UWP 滑块拇指动态指针在颜色上答案

【问题标题】：UWP Slider Thumb Dynamic Pointer Over ColorUWP 滑块拇指动态指针在颜色上
【发布时间】：2020-01-16 21:05:35
【问题描述】：

我希望我的Slider Thumb 根据TemplateBinding Foreground 调整其PointerOver Stroke。然而，即使我给Slider 一个黑色Foreground（不在Style 中），它是PointerOver Stroke 仍然是White。我猜是因为Style只生成了一次？

但我不知道如何解决这个问题。下面是我的 XAML。 PointerOver 样式在 SliderPointerOverThumbStyle 中定义。

<Style x:Key="MediaProgressSliderStyle" TargetType="Slider">
    <Setter Property="Background" Value="{ThemeResource SliderTrackFill}" />
    <Setter Property="BorderThickness" Value="{ThemeResource SliderBorderThemeThickness}" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="ManipulationMode" Value="None" />
    <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
    <Setter Property="FocusVisualMargin" Value="-7,0,-7,0" />
    <Setter Property="IsFocusEngagementEnabled" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Slider">
                <Grid Margin="{TemplateBinding Padding}">
                    <Grid.Resources>
                        <AcrylicBrush
                            x:Key="MedialSliderPointerOverThumbStrokeBrush"
                            BackgroundSource="Backdrop"
                            FallbackColor="{TemplateBinding Foreground}"
                            TintColor="{TemplateBinding Foreground}"
                            TintOpacity="0.75" />
                        <Style x:Key="SliderThumbStyle" TargetType="Thumb">
                            <Setter Property="BorderThickness" Value="0" />
                            <Setter Property="Foreground" Value="{TemplateBinding Foreground}" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Thumb">
                                        <Ellipse
                                            x:Name="ellipse"
                                            Fill="{StaticResource MediaSliderThumbFillBrush}"
                                            Stroke="{TemplateBinding Foreground}"
                                            StrokeThickness="3.2" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                        <Style
                            x:Key="SliderPressedThumbStyle"
                            BasedOn="{StaticResource SliderThumbStyle}"
                            TargetType="Thumb">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Thumb">
                                        <Ellipse
                                            x:Name="ellipse"
                                            Fill="{TemplateBinding Foreground}"
                                            Stroke="{TemplateBinding Foreground}"
                                            StrokeThickness="3.2" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                        <Style
                            x:Key="SliderPointerOverThumbStyle"
                            BasedOn="{StaticResource SliderThumbStyle}"
                            TargetType="Thumb">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Thumb">
                                        <Ellipse
                                            x:Name="ellipse"
                                            Fill="{StaticResource MediaSliderThumbFillBrush}"
                                            StrokeThickness="3.2">
                                            <Ellipse.Stroke>
                                                <AcrylicBrush
                                                    BackgroundSource="Backdrop"
                                                    FallbackColor="{TemplateBinding Foreground}"
                                                    TintColor="{TemplateBinding Foreground}"
                                                    TintOpacity="0.75" />
                                            </Ellipse.Stroke>
                                        </Ellipse>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                        <Style x:Key="MediaSliderProgressBarStyle" TargetType="ProgressBar">
                            <Setter Property="Height" Value="1" />
                            <Setter Property="Minimum" Value="0" />
                            <Setter Property="Maximum" Value="100" />
                            <Setter Property="Foreground" Value="{ThemeResource SystemControlHighlightChromeAltLowBrush}" />
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="BorderBrush" Value="Transparent" />
                            <Setter Property="BorderThickness" Value="1" />
                        </Style>
                    </Grid.Resources>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <ContentPresenter
                        x:Name="HeaderContentPresenter"
                        Grid.Row="0"
                        Margin="{StaticResource SliderTopHeaderMargin}"
                        x:DeferLoadStrategy="Lazy"
                        Content="{TemplateBinding Header}"
                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                        FontWeight="{ThemeResource SliderHeaderThemeFontWeight}"
                        Foreground="{ThemeResource SliderHeaderForeground}"
                        TextWrapping="Wrap"
                        Visibility="Collapsed" />
                    <Grid
                        x:Name="SliderContainer"
                        Grid.Row="1"
                        Background="{ThemeResource SliderContainerBackground}"
                        Control.IsTemplateFocusTarget="True">
                        <Grid x:Name="HorizontalTemplate" MinHeight="{ThemeResource SliderHorizontalHeight}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="{ThemeResource SliderPreContentMargin}" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="{ThemeResource SliderPostContentMargin}" />
                            </Grid.RowDefinitions>
                            <Rectangle
                                x:Name="HorizontalTrackRect"
                                Grid.Row="1"
                                Grid.ColumnSpan="3"
                                Height="{ThemeResource SliderTrackThemeHeight}"
                                Fill="{StaticResource MediaSliderTrackRectBrush}" />
                            <Rectangle
                                x:Name="HorizontalDecreaseRect"
                                Grid.Row="1"
                                Height="2"
                                Fill="{TemplateBinding Foreground}" />
                            <TickBar
                                x:Name="TopTickBar"
                                Grid.ColumnSpan="3"
                                Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                Margin="0,0,0,4"
                                VerticalAlignment="Bottom"
                                Fill="{ThemeResource SliderTickBarFill}"
                                Visibility="Collapsed" />
                            <ProgressBar
                                x:Name="DownloadProgressIndicator"
                                Grid.Row="1"
                                Grid.ColumnSpan="3"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Center"
                                Style="{StaticResource MediaSliderProgressBarStyle}" />
                            <TickBar
                                x:Name="HorizontalInlineTickBar"
                                Grid.Row="1"
                                Grid.ColumnSpan="3"
                                Height="{ThemeResource SliderTrackThemeHeight}"
                                Fill="{ThemeResource SliderInlineTickBarFill}"
                                Visibility="Collapsed" />
                            <TickBar
                                x:Name="BottomTickBar"
                                Grid.Row="2"
                                Grid.ColumnSpan="3"
                                Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
                                Margin="0,4,0,0"
                                VerticalAlignment="Top"
                                Fill="{ThemeResource SliderTickBarFill}"
                                Visibility="Collapsed" />
                            <Thumb
                                x:Name="HorizontalThumb"
                                Grid.Row="0"
                                Grid.RowSpan="3"
                                Grid.Column="1"
                                Width="20"
                                Height="20"
                                AutomationProperties.AccessibilityView="Raw"
                                DataContext="{TemplateBinding Value}"
                                FocusVisualMargin="-14,-6,-14,-6"
                                RenderTransformOrigin=".5, .5"
                                Style="{StaticResource SliderThumbStyle}">
                                <Thumb.RenderTransform>
                                    <ScaleTransform />
                                </Thumb.RenderTransform>
                            </Thumb>
                        </Grid>
                    </Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="HorizontalThumb.Style" Value="{StaticResource SliderPressedThumbStyle}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderHeaderForegroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopTickBar" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BottomTickBar" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LeftTickBar" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RightTickBar" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTickBarFillDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderContainerBackgroundDisabled}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="HorizontalThumb.Style" Value="{StaticResource SliderPointerOverThumbStyle}" />
                                    <Setter Target="VerticalThumb.Style" Value="{StaticResource SliderPointerOverThumbStyle}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusEngagementStates">
                            <VisualState x:Name="FocusDisengaged" />
                            <VisualState x:Name="FocusEngagedHorizontal">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="FocusEngagedVertical">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【问题讨论】：

标签： xaml uwp win-universal-app

【解决方案1】：

我建议使用 Storyboard 来更改样式引用，而不是直接使用 Setter。

<VisualState x:Name="Pressed">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Style">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderPointerOverThumbStyle}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

另外，AcrylicBrush中使用TemplateBinding的层次太深了。此时，AcrylicBrush 无法获取Foreground 的值。这不是一个好习惯。我建议你直接给 AcrylicBrush 赋值，而不是使用 TemplateBinding，比如：

<Ellipse
        x:Name="ellipse"
        Fill="{StaticResource MediaSliderThumbFillBrush}"
        StrokeThickness="3.2">
     <Ellipse.Stroke>
          <AcrylicBrush
                       BackgroundSource="Backdrop"
                       FallbackColor="{ThemeResource xxx}"
                       TintColor="{ThemeResource xxx}"
                       TintOpacity="0.75" />
     </Ellipse.Stroke>
</Ellipse>

简而言之，在控件属性上使用TemplateBinding，而不是画笔资源。

最好的问候。

【讨论】：

我也试过放在Grid.Resource中，不深。它应该得到价值，但它没有。什么是主题资源？
这里的depth不是指嵌套层次，而是你把TemplateBinding放在了不合适的位置。 AcrylicBrush 是颜色资源，不是DependencyProperty，绑定不起作用。 ThemeResource 类似于StaticResource，但可以根据主题更改值
对不起，我没有说清楚。我的意思是ThemeResource 的值是多少？
你将AcrylicBrush绑定到Foreground，但最后你还是会为Foreground赋值，此时你可以为AcrylicBrush赋值.不知道你设置的Foreground的最终值是多少，留给你写吧。
例如Foreground 可以是Black 或White，那么ThemeResource 会是什么呢？