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

时间:2017-01-19 19:32:56

标签: c# xaml uwp

我正在使用c#和XAML开发一个UWP应用程序;在项目中,我有一个Resouce字典,其中有几个Path图标,我希望这个图标在父控件有指针结束时改变颜色,我确实在带有样式数据触发器的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”没有可访问的setter。

所以我选择以这种方式在路径中设置它:

 <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”   这不会修复与父状态的绑定

所以我觉得我迷路了,怎样才能通过父母的状态改变填充颜色或路径?

1 个答案:

答案 0 :(得分:1)

你可以这样做......

&#34;路径&#34;存储为字符串资源以供重用,然后使用已存在的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>