Syncfusion SfRating Control In UWP With XAML And C#

Syncfusion is the provider of software components and tools for Microsoft.NET platform. The SfRating Control provides the number of stars that represents a rating. And also, it is used to configure the item Count, precision, and values in the SFRating Control. SFRating control can be used in various scenarios like movie rating or rating the application etc.

Reading this article, you will learn how to use Syncfusion SfRating Control in Universal Windows apps development with XAML and Visual C#.

The following important tools are required for developing UWP.

1. Windows 10 (Recommended)
2. Visual Studio 2017 Community Edition (It is a free software available online)
3. Syncfusion Essential Studio for UWP and get Syncfusion Community Licence (It is free for individuals with less than $1 Million revenue).

Now, let's discuss step by step app development.

Step 1

Install Visual Studio 2017 and Syncfusion Essential Studio for UWP and activate it.

Step 2

Open Visual Studio 2017. Go to Start -> New Project-> select Windows Universal (under Visual C#) -> Blank App (Universal Windows) -> Give suitable name to your app (UWPSfStar)->OK.

 

Step 3

Choose the target and minimum platform version that your Windows Universal application will support. After, the project creates App.xaml and MainPage.xaml.

 

Step 4

Add TextBlock control and change the name and text property of title.

 

Step 5

Add 3 TextBlock controls and change the name and text property for sample - Rating, Friendliness, Knowledge, Helpful.

 

Add 3 Syncfusion SfRating controls and set the Name, ItemsCount, ItemSize, and Precision Property for rating.

 

Note

Automatically, the following code will be generated in XAML Code View while we are done in the Design View.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPSfStar" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Input="using:Syncfusion.UI.Xaml.Controls.Input" x:Class="UWPSfStar.MainPage" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="146,45,0,0" TextWrapping="Wrap" Text="UWP - Syncfusion SfStar Control with XAML and C#" VerticalAlignment="Top" Height="27" Width="375" FontWeight="Bold" />
        <TextBlock x:Name="tblStar1" HorizontalAlignment="Left" Margin="146,129,0,0" TextWrapping="Wrap" Text="Friendliness" VerticalAlignment="Top" />
        <TextBlock x:Name="tblStar2" HorizontalAlignment="Left" Margin="142,173,0,0" TextWrapping="Wrap" Text="Knowledge" VerticalAlignment="Top" />
        <TextBlock x:Name="tblStar3" HorizontalAlignment="Left" Margin="146,214,0,0" TextWrapping="Wrap" Text="Helpful" VerticalAlignment="Top" RenderTransformOrigin="0.597,1.567" />
        <Input:SfRating x:Name="SfRFriend" ItemsCount="5" ItemSize="20" HorizontalAlignment="Left" Height="20" Margin="258,129,0,0" VerticalAlignment="Top" Width="135" />
        <Input:SfRating x:Name="SfRKnowledge" ItemsCount="5" ItemSize="20" HorizontalAlignment="Left" Height="20" Margin="258,173,0,0" VerticalAlignment="Top" Width="135" />
        <Input:SfRating x:Name="SfRHelp" ItemsCount="5" Precision="Half" ItemSize="20" HorizontalAlignment="Left" Height="50" Margin="262,197,0,0" VerticalAlignment="Top" Width="135" /> </Grid>
</Page>

Step 6

Deploy your app on Local Machine. The output of the UWPSfStar App is shown below.

 

After Rating -

Summary

Now, we have successfully tested Syncfusion SFRating Control in Visual C# - UWP environment.

Please find the link for Source Code.