如何以 XAML 样式为边框定义故事板答案

【问题标题】：How to define Storyboard for Border in XAML style如何以 XAML 样式为边框定义故事板
【发布时间】：2013-12-05 21:44:05
【问题描述】：

有没有办法以 XAML 样式为 TargetType 边框定义情节提要？这是我想要实现的目标：

<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>

请帮忙。

【问题讨论】：

您在此处未使用离散情节提要是正确的

标签： windows-store-apps winrt-xaml windows-8.1

【解决方案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

祝你好运！

【讨论】：

作为一个快速提醒，厚度不能用框架以外的任何东西动画。
谢谢@Jerry :) 我实际上是在尝试获得 Marquee 类型的边框样式（边框由破折号组成并不断移动，就像我们在 Photoshop 中选择元素时得到的那样）。我能够为 xaml 元素 Rectangle 的笔划获得它:) 但不确定如何为边框做它，因为我没有看到 StrokeDashArray 或 StrokeDashOffset 的边框。
我知道。我回答了你的另一个问题。 stackoverflow.com/questions/19800928/… 只有绘图对象具有这些属性。
好吧。不过，很高兴看到那些带有 Border 的属性。谢谢杰里
@ashishnirkhe 边框内的矩形基本上是一样的。

【解决方案2】：

为什么需要在 Style 中使用它？只需为 Storyboard 命名并在 Resources 下声明即可。

  <Page.Resources>
      <Storyboard x:Name="Bordersb" RepeatBehavior="Forever">
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="PART_BORDER">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaperDark}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="StrokeThickness">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="StrokeDashArray" Storyboard.TargetName="PART_BORDER">
                            <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" Storyboard.TargetName="PART_BORDER">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="3"/>
                            <DiscreteObjectKeyFrame KeyTime="00:00:0.200" Value="0"/>
                            <DiscreteObjectKeyFrame KeyTime="00:00:0.400" Value="3"/>
                        </ObjectAnimationUsingKeyFrames>
         </Storyboard>
  </Page.Resources>

<Border x:Name="PART_BORDER>
 Some code...
</Border>

在后面的代码中，您可以通过

开始您的故事板

 Bordersb.Begin();

【讨论】：

我之前尝试过这个选项，但没有奏效。我想知道目标属性“Stroke”或“StrokeDashArray”等是否可用于 XAML 元素我知道它可用于 Rectangle，它适用于 Rectangle。
@ashishnirkhe 是的，边框没有 Stroke 、 StrokeThickness 等属性。请改用 BoderThickness 、BorderBrush 等属性。
@asitis 但他希望他们创造一种特定的效果。

【解决方案3】：

也许您需要改用DoubleAnimationUsingKeyFrames 和EnableDependentAnimation？

实际上是从头开始。视觉状态需要定义为模板的一部分，因此您只需重新定义整个模板。否则 - 是的，您需要在 XAML 或代码中定义 Storyboards 并手动运行它们，而不是依赖视觉状态。

如果您真的不想更改整个模板，也许您可以定义一个资源并在运行时修改代码中的视觉状态，但这听起来有点老套，而且可靠性可能存在问题。

【讨论】：

除了Border没有模板