Show ratings with stars in WinRT XAML

Show ratings with stars in WinRT XAML

When you try to build an app that displays ratings of some kind, it’s often interesting to show them using stars “notation”. Unfortunately, there is no native rating control to be used with WinRT and XAML, but on the bright side there are many open source projects available for Silverlight and WPF that can be ported relatively easy. I did that for one of my projects and I’ll show you about it more in this blog article.

If you search for rating controls, you’ll find many interesting options. Some of them even offer that you can actually rate things by clicking on the stars. I only needed a control which renders filled stars according to rating value. I found a few that suited my needs, but the problem with those is that they only fill full star of half of the star. It’s done by using a drawing of the whole star, and then two more drawings of half of the stars, because they can be split into 2 same parts. That didn’t work for me, so I dug some more and found an open source WPF control created by Sacha Barber, Microsoft Visual C# MVP. He wrote an article on CodeProject, and you can find it here:

WPF: A Simple Yet Flexible Rating Control

It does the job by using a mask that covers part of the stars depending on what the value is, like this:

This way, it can cover parts of the stars, and not just the whole star or the half of it.

Porting was easy to do, because of all the similarities between the WPF and XAML for WinRT. It uses a bit different set of libraries, and the properties are defined a bit differently. For example:

/// <summary>
/// StarForegroundColor Dependency Property
/// </summary>
public static readonly DependencyProperty StarForegroundColorProperty =  
    DependencyProperty.Register("StarForegroundColor", typeof(SolidColorBrush),
    typeof(Star),
        new PropertyMetadata(new SolidColorBrush(Colors.Transparent),
            new PropertyChangedCallback(OnStarForegroundColorChanged)));

/// <summary>
/// Gets or sets the StarForegroundColor property.  
/// </summary>
public SolidColorBrush StarForegroundColor  
{
    get { return (SolidColorBrush)GetValue(StarForegroundColorProperty); }
    set { SetValue(StarForegroundColorProperty, value); }
}

Distributing the control: CodePlex and NuGet

There are also some differences in distributing the control, which is specific for the WinRT. I’ll write about it in my next blog post, but for now, all that’s important is that the control is available on CodePlex:

MetroRate on CodePlex

and the proper way to get it in your projects is NuGet.

metrorate

How to use the control?

It’s very simple! All you need to do is add the project through NuGet and then reference it on your XAML page, like this:

<Page  
    x:Class="RatingsTestApp.BlankPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Application3"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:rate="using:MetroRate"
    mc:Ignorable="d">

Then, just add the control anywhere in your project:

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">  
    <rate:RatingsControl NumberOfStars="10" Value="7.7"
                         BackgroundColor="{StaticResource ApplicationPageBackgroundBrush}"
                         StarForegroundColor="Yellow"
                         StarOutlineColor="Transparent" 
                         HorizontalAlignment="Center" 
                         VerticalAlignment="Center"/>
</Grid>  

There are a few properties to be set:

  • Number of stars – usual is between 5 and 10. Default is 5.
  • Value – you will usually bind this, but for now I set it on 7.7.
  • BackgroundColor – I used the static resource – application page background
  • StarForegroundColor – Foreground color of the star – in my case it’s yellow
  • StarOutlineColor – Outline color of the star – I left it transparent

And that’s it! The result:

image

I hope this will help you in your projects! Have in mind that this is still in some sort of alpha and is just ported without much testing. It’s released as-is.

Facebook? Twitter?

Igor Ralic

igor ralic

View Comments
Microsoft Certified Solutions Developer: Windows Store Apps in C#