如何在 UWP XAML 上将样式触发器设置为路径绑定父状态

Question

我正在使用 c# 和 XAML 开发 UWP 应用；在项目中，我有一个 Resouce 字典，其中有几个 Path 图标，我希望这个图标在父控件有 Pointer Over 时改变颜色，我确实在带有 Style 数据触发器的 WPF 应用程序上做到了这一点：

<Style.Triggers>
        <DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource AncestorType={x:Type Button}, Mode=FindAncestor}}" Value="True">
            <Setter Property="Fill" Value="White"/>
        </DataTrigger>
    </Style.Triggers>

但在 UWP 中，我知道这有不同的工作方式，但我无法弄清楚我首先尝试创建路径样式：

 <Style TargetType="Path">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <Setter.Value>
            <VisualStateGroup>
                <VisualState x:Name="PointerOver">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RootGrid">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="#F2B71E"/>
                        </ObjectAnimationUsingKeyFrames>
                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </Setter.Value>
    </Setter>
</Style>

我知道这是不正确的，因为它需要绑定父状态而不是这个实际状态，但不仅如此，这给了我错误：

属性“VisualStateGroups”没有可访问的设置器。

所以我选择以这种方式在路径内设置它：

 <Path x:Key="printIcon" Width="44" Height="43" Canvas.Left="16" Canvas.Top="17" Stretch="Fill" Data="F1 M 25,27L 25,17L 51,17L 51,27L 47,27L 47,21L 29,21L 29,27L 25,27 Z M 16,28L 60,28L 60,51L 51,51L 51,60L 25,60L 25,51L 16,51L 16,28 Z M 55,46L 55,33L 21,33L 21,46L 55,46 Z M 25,44L 25,39L 51,39L 51,44L 25,44 Z ">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="PointerOver">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RootGrid">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="#F2B71E"/>
                    </ObjectAnimationUsingKeyFrames>
                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Path>

但现在我正在处理

名称“PointerOver”已在此范围内定义。
这并不能修复与父状态的绑定

所以我想我迷路了，我怎样才能通过父级的状态来改变填充颜色或路径？

Answer 1

你可以做这样的事情......

“路径”存储为字符串资源以供重复使用，然后使用已经存在的 UI 控件的视觉状态。

<Page.Resources>
    <x:String x:Key="Icon_Printer">F1 M 25,27L 25,17L 51,17L 51,27L 47,27L 47,21L 29,21L 29,27L 25,27 Z M 16,28L 60,28L 60,51L 51,51L 51,60L 25,60L 25,51L 16,51L 16,28 Z M 55,46L 55,33L 21,33L 21,46L 55,46 Z M 25,44L 25,39L 51,39L 51,44L 25,44 Z</x:String>
    <Color x:Key="Color_Base">#FFF2B71E</Color>
    <Color x:Key="Color_Hover">#FFFFFFFF</Color>
    <SolidColorBrush x:Key="Brush_Base" Color="{StaticResource Color_Base}" />
    <SolidColorBrush x:Key="Brush_Hover" Color="{StaticResource Color_Hover}" />
    <Style x:Key="PrinterButtonStyle" TargetType="Button" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="RootGrid" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Icon">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Brush_Hover}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Icon">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SystemAltMediumColor}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Path x:Name="Icon" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="{StaticResource Icon_Printer}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Foreground="{StaticResource Brush_Base}" Style="{StaticResource PrinterButtonStyle}" />
</Grid>