Custom RatingControl

Learn creating a Custom RatingControl using Windows App SDK with this Tutorial

Custom RatingControl shows how to create a Style for a RatingControl using Windows App SDK.

Step 1

Follow Setup and Start on how to get Setup and Install what you need for Visual Studio 2022 and Windows App SDK.

In Windows 11 choose Start and then find or search for Visual Studio 2022 and then select it.

Once Visual Studio 2022 has started select Create a new project.

Then choose the Blank App, Packages (WinUI in Desktop) and then select Next.

After that in Configure your new project type in the Project name as CustomRatingControl, then select a Location and then select Create to start a new Solution.

Step 2

Then in Visual Studio within Solution Explorer for the Solution double-click on App.xaml to see the XAML for the Project.

Step 3

In the XAML for App.xaml below the Comment of  type in the following XAML:


<RatingItemFontInfo x:Key="RatingControlFontInfo" Glyph="&#xE00B;"/>
<Style x:Key="CustomRatingControl" TargetType="RatingControl">
    <Setter Property="Foreground" 
    Value="{ThemeResource RatingControlCaptionForeground}"/>
    <Setter Property="UseSystemFocusVisuals" 
    Value="{StaticResource UseSystemFocusVisuals}"/>
    <Setter Property="FontFamily" 
    Value="Segoe MDL2 Assets"/>
    <Setter Property="ItemInfo" 
    Value="{StaticResource RatingControlFontInfo}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RatingControl">
                <Grid x:Name="LayoutRoot">
                    <!-- Visual State Groups -->

                    <!-- Content -->

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This XAML is part of a Style of CustomRatingControl that will be used to target a RatingControl which will contain some Visual State Groups and Content for the Custom RatingControl along with a RatingItemFontInfo which will set the Glyph will be used for the Custom RatingControl.

Step 4

While still the XAML for App.xaml below the Comment of  type in the following XAML:


<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Disabled">
            <VisualState.Setters>
                <Setter Target="ForegroundContentPresenter.Foreground" 
                Value="{ThemeResource 
                RatingControlDisabledSelectedForeground}"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Placeholder">
            <VisualState.Setters>
                <Setter Target="ForegroundContentPresenter.Foreground" 
                Value="Goldenrod"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="PointerOverPlaceholder">
            <VisualState.Setters>
                <Setter Target="ForegroundContentPresenter.Foreground" 
                Value="{ThemeResource 
                RatingControlPointerOverPlaceholderForeground}"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="PointerOverUnselected">
            <VisualState.Setters>
                <Setter Target="ForegroundContentPresenter.Foreground" 
                Value="{ThemeResource 
                RatingControlPointerOverUnselectedForeground}"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Set">
            <VisualState.Setters>
                <Setter Target="ForegroundContentPresenter.Foreground" 
                Value="Salmon"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="PointerOverSet">
            <VisualState.Setters>
                <Setter Target="ForegroundContentPresenter.Foreground" 
                Value="Gold"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

This XAML is for the Visual State Groups that will represent the States for the RatingControl used in the Custom RatingControl.

Step 5

Then in the XAML for App.xaml below the Comment of  type in the following XAML:


<StackPanel Margin="-20,-20,-20,-20" Orientation="Horizontal" Grid.Row="0">
    <StackPanel x:Name="RatingBackgroundStackPanel" 
    Background="Transparent" Margin="20,20,0,20" 
    Orientation="Horizontal"/>
    <TextBlock x:Name="Caption" AutomationProperties.AccessibilityView="Raw" 
    Height="32" IsHitTestVisible="False" Margin="4,9,20,0" 
    AutomationProperties.Name="RatingCaption" 
    Style="{ThemeResource CaptionTextBlockStyle}" 
    TextLineBounds="TrimToBaseline" Text="{TemplateBinding Caption}" 
    VerticalAlignment="Center"/>
</StackPanel>
<ContentPresenter x:Name="ForegroundContentPresenter" 
    IsHitTestVisible="False" Grid.Row="0">
    <StackPanel Margin="-40,-40,-40,-40" 
        Orientation="Horizontal">
        <StackPanel x:Name="RatingForegroundStackPanel" 
        IsHitTestVisible="False" Margin="40,40,40,40" 
        Orientation="Horizontal"/>
    </StackPanel>
</ContentPresenter>

This XAML is the Content for the layout of a RatingControl when the Style is applied for the Custom RatingControl.

Step 6

Within Solution Explorer for the Solution double-click on MainWindow.xaml to see the XAML for the Main Window.

Step 7

In the XAML for MainWindow.xaml there will be some XAML for a StackPanel, this should be Removed:


<StackPanel Orientation="Horizontal" 
HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
</StackPanel>

Step 8

While still in the XAML for MainWindow.xaml above </Window>, type in the following XAML:

                            
<Viewbox>
    <RatingControl Margin="50" Name="Rating" 
    Style="{StaticResource CustomRatingControl}"/>
</Viewbox>

This XAML contains a ViewBox with a RatingControl with Style set to the StaticResource of CustomRatingControl from App.xaml.

Step 9

Within Solution Explorer for the Solution select the arrow next to MainWindow.xaml then double-click on MainWindow.xaml.cs to see the Code for the Main Window.

Step 10

In the Code for MainWindow.xaml.cs there be a Method of myButton_Click(...) this should be Removed by removing the following:


private void myButton_Click(object sender, RoutedEventArgs e)
{
    myButton.Content = "Clicked";
}

Step 11

That completes the Windows App SDK application. In Visual Studio 2022 from the Toolbar select CustomRatingControl (Package) to Start the application.

Step 12

Once running you will see the Custom RatingControl displayed where you can select a Value.

Custom RatingControl Running and Output

Step 13

To Exit the Windows App SDK application, select the Close button from the top right of the application as that concludes this Tutorial for Windows App SDK from tutorialr.com!

Custom RatingControl PDF