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

祝你好运！

Answer 2

为什么你需要在Style里面使用它？只需给故事板＆amp;在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();

Answer 3

也许您需要使用DoubleAnimationUsingKeyFrames和EnableDependentAnimation代替？

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

如果你真的不想改变整个模板，也许你可以定义一个资源并在运行时修改代码中的可视状态，但这听起来有点hacky并且可能有可疑的可靠性。

如何在XAML样式中为Border定义Storyboard

3 个答案: