windows-store-apps - 如何以 XAML 样式定义 Border 的 Storyboard

Question

有没有办法以 XAML 样式为 TargetType Border 定义 Storyboard？ 这是我想要实现的目标:

<Style x:Key="MyBorderStyle" TargetType="Border">

    <Setter Property="VisualStateManager.VisualStateGroups">

        <Setter.Value>
            <VisualStateGroup>
                <VisualStateGroup.States>
                    <VisualState x:Name="Normal">
                        <Storyboard RepeatBehavior="Forever">
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaperDark}"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="StrokeThickness">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="StrokeDashArray">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="3, 3"/>
                                <DiscreteObjectKeyFrame KeyTime="00:00:0.200" Value="3, 3"/>
                                <DiscreteObjectKeyFrame KeyTime="00:00:0.400" Value="3, 3"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="StrokeDashOffset">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="3"/>
                                <DiscreteObjectKeyFrame KeyTime="00:00:0.200" Value="0"/>
                                <DiscreteObjectKeyFrame KeyTime="00:00:0.400" Value="3"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup.States>
            </VisualStateGroup>
        </Setter.Value>
    </Setter>        
</Style>

但这不起作用。

我还尝试了更多方法，但无法使其发挥作用。 我想在 MyStyles.XAML 中定义此样式，然后在 MainPage.XAML 中使用它，如下所示:

<Border Style="{StaticResource MyBorderStyle}">
Some code...
</Border>

请帮忙。

Answer 1

只需将其包装在 Grid 中并在那里定义状态即可。如果您想重用它，请将其包装在 UserControl 中。像这样(有效):

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="VisualState0">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background)" Storyboard.TargetName="border">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <SolidColorBrush Color="Red"/>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ColorAnimation Duration="0" To="#FF2E00FF" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <Thickness>5</Thickness>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.CornerRadius)" Storyboard.TargetName="border">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <CornerRadius>15</CornerRadius>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="VisualState1">
                <Storyboard>
                    <ColorAnimation Duration="0" To="#FF2EFF00" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background)" Storyboard.TargetName="border">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <SolidColorBrush Color="#FF0017FF"/>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <Thickness>25,5</Thickness>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.CornerRadius)" Storyboard.TargetName="border">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <CornerRadius>45</CornerRadius>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Border x:Name="border" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="234" VerticalAlignment="Top" Width="303" Margin="75,75,0,0"/>
</Grid>

请记住，使用 Blend 来定义您的视觉状态。

阅读:http://blog.jerrynixon.com/2013/11/windows-81-how-to-use-visual-states-in.html

祝你好运!