UWP 中的 VisualState Storyboard.TargetName答案

【问题标题】：VisualState Storyboard.TargetName in UWPUWP 中的 VisualState Storyboard.TargetName
【发布时间】：2017-08-16 11:49:44
【问题描述】：

我是使用 VisualStates 的新手，想知道如何将 Storyboard.TargetName 设置为正在设置样式的控件？

希望下面的sn-p能让我的问题更清楚一点。

<Style x:Key="AppBarBtnStyle" TargetType="AppBarButton">

    <Setter Property="BorderBrush" Value="Gray"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AppBarButton">
<Grid x:Name="Root"
 <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Flash">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="WHAT GOES HERE TO TARGET THE BORDERBRUSH SET PREVIOUSLY ABOVE" Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)"  Duration="0:0:1">

【问题讨论】：

标签： xaml uwp-xaml

【解决方案1】：

如何将 Storyboard.TargetName 设置为正在设置样式的控件？

您似乎想要为属性为BorderBrush 的<Setter> 设置动画。实际上，当使用 Style 定义控件模板时，Style 元素的 TargetType 和 Control.Template 元素的 TargetType 应该始终使用相同的值。详细请参考Setter class 的样式和模板部分。

例如，BorderBrush 属性你可以在Grid 控件中找到它，该控件在AppBarButton styles and templates 内命名为Root。

<Grid
    x:Name="Root"
    MinWidth="{TemplateBinding MinWidth}"
    MaxWidth="{TemplateBinding MaxWidth}"
    Background="{TemplateBinding Background}"
    BorderBrush="{TemplateBinding BorderBrush}"
    BorderThickness="{TemplateBinding BorderThickness}">

这样您就可以通过在此处将颜色动画的Storyboard.TargetName 设置为Root 元素来满足您的要求。

<VisualState x:Name="Normal">
    <Storyboard>
        <ColorAnimationUsingKeyFrames
            Storyboard.TargetName="Root"
            Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
            Duration="0:0:5">
            <LinearColorKeyFrame KeyTime="00:00:02" Value="Blue" />
            <DiscreteColorKeyFrame KeyTime="00:00:2.5" Value="Yellow" />
        </ColorAnimationUsingKeyFrames>
        <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
    </Storyboard>
</VisualState>

【讨论】：