RatingControl.xaml

<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. See LICENSE in the project root for license information. -->
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Microsoft.UI.Xaml.Controls">
  
    <Style TargetType="local:RatingControl">
        <Setter Property="Height" Value="32"/>
        <!-- 9794813: retire these two properties as customisation points once all resource keys available -->
        <Setter Property="Foreground" Value="{ThemeResource RatingControlCaptionForeground}"/>
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}"/>
        <Setter Property="ItemInfo" Value="{ThemeResource MUX_RatingControlDefaultFontInfo}"/>
        <!-- IsFocusEngagementEnabled means the control has to be "engaged" with 
             using the A button before it actually receives key input from gamepad. -->
        <Setter Property="IsFocusEngagementEnabled" Value="True"/>
        <!-- I've picked values so that these LOOK like the redlines, but these
             values are not actually from the redlines because the redlines don't
             consistently pick "distance from glyph"/"distance from edge of textbox"
             so it's not possible to actually just have a consistent sizing model
             here based on the redlines. -->
        <Setter Property="FocusVisualMargin" Value="-8,-7,-8,0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:RatingControl">
                    <Grid x:Name="LayoutRoot">
                        <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="{ThemeResource RatingControlPlaceholderForeground}"/>
                                    </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="{ThemeResource RatingControlSelectedForeground}"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOverSet">
                                    <VisualState.Setters>
                                        <Setter Target="ForegroundContentPresenter.Foreground" Value="{ThemeResource RatingControlSelectedForeground}"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <StackPanel Orientation="Horizontal" Grid.Row="0" Margin="-20,-20,-20,-20">
                            <StackPanel x:Name="RatingBackgroundStackPanel" Orientation="Horizontal" Background="Transparent" Margin="20,20,0,20"/>
                            <TextBlock x:Name="Caption" Height="32" Margin="4,9,20,0" TextLineBounds="TrimToBaseline" Style="{ThemeResource CaptionTextBlockStyle}" VerticalAlignment="Center" AutomationProperties.AccessibilityView="Raw" AutomationProperties.Name="RatingCaption" IsHitTestVisible="False" Text="{TemplateBinding Caption}"/>
                            <!-- 4 = 8 item spacing +4 of magic redline spacing -8 to compensate for scale of the last RatingItem -->
                            <!-- NB: The redlines say 8px, but it's really 12 px because:
                                Designer note: The value between the last glyph and first text character is 12px.
                                (There's 4px of whitespace accounted for in the text area in the redline) -->
                            <!-- TODO MSFT: 9925444 Fix vertical alignment in all text scenarios -->
                        </StackPanel>

                        <ContentPresenter x:Name="ForegroundContentPresenter" IsHitTestVisible="False" Grid.Row="0">
                            <!-- Margin is on the StackPanel because ContentPresenter clips differently such that moving the reverse margin up won't work -->
                            <StackPanel Orientation="Horizontal" Margin="-40,-40,-40,-40">
                                <StackPanel x:Name="RatingForegroundStackPanel" Orientation="Horizontal" IsHitTestVisible="False" Margin="40,40,40,40"/>
                            </StackPanel>
                        </ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>