I recently blogged about my Windows Phone app development framework Newport, which is available on GitHub and NuGet. While Newport contains primarily helper classes for making MVVM development easier, it also comes with a couple of custom controls, that I considered useful having in this framework.

Newport is a Windows Phone app development framework embracing the Model-View-ViewModel (MVVM) approach.

One of these custom controls in Newport is a Rating Control (Newport.RatingControl), which is type of control that is quite commonly used to seeing in current web or desktop applications.

Here is an example of a rating control in the Windows store, for rating a downloaded app.

Default Style

Placing a default RatingControl inside one of your application pages, the user experience will be similar to the screenshot below.

You might want to change the Maximum or current Value though, which can also happen through data binding and might look like this.

<n:RatingControl
  Maximum="{Binding Path=MaxValue}"
  Value="{Binding Path=CurrentValue}"/>

Customizing the Rating Control

The default visualization is usually not very useful and the control is meant to be customized using a DataTemplate. Here is an example of the necessary XAML code to provide an ItemTemplate using a fancy smiley from the Segoe UI Symbol font for the rating control.

<n:RatingControl
  Maximum="6"
  Value="4">
  <n:RatingControl.ItemTemplate>
    <DataTemplate>
      <Grid>
        <Ellipse
          Width="50"
          Height="50"
          Margin="4"
          Fill="#FF1D9709" />
        <TextBlock
          HorizontalAlignment="Center"
          VerticalAlignment="Center"
          FontSize="40"
          Foreground="WhiteSmoke"
          Text="&#x263a;" FontFamily="Segoe UI Symbol" />
      </Grid>
    </DataTemplate>
  </n:RatingControl.ItemTemplate>
</n:RatingControl>

Here is another example of how I have used this control in one of my applications, where it allows users to specify the amount of tickets they wish to reserve for a movie.

This screenshot is taken from a Windows Phone application I wrote for a local cinema in Linz (Austria) as a 3rd party application since they only have apps for Android and iOS. Unfortunately, the IT guys there did not appreciate me reverse-engineering their web services and prevented the publication of this app, which really sucks since it was a ton of work.

If you also think that this is uncool, please support me and give these guys crap. Mail them, Tweet them, post on their Facebook wall. Thanks!