Question

说我有一个形状。我已经给它Stroke和StrokeThickness以及StrokeDashArray来获得所需的虚线轮廓。然后我通过StrokeDashOffset为VisualStateManager设置动画，以获得“Marching Ants”风格动画。一切都很好......

除非我希望形状的默认值没有StrokeDashArray，而是希望根据VisualState中的VisualStateManager进行设置，但不幸的是，我们知道我只能这样做属性上的DoubleAnimation，而不是像StrokeDashArray那样的双重集合值...

我的问题是，是否有一种聪明的方法可以在运行时为该值设置动画，因此UnSelected State中的形状具有实体Stroke但是通过'VisualStateManager'（可能）仍然提供{{1}选择状态上的相同形状？或者我最好有两个单独的形状并切换它们之间的可见性，以便每个形状都有自己的默认值？

如果它有助于用图片或其他东西进行想象，请告诉我，我会在问题中添加更多内容。

Answer 1

一个选项是为double属性设置动画并创建一个绑定到StrokeDashArray的新DoubleCollection。

的Xaml：

<UserControl x:Class="SilverlightApplication1.MainPage"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Name="UI">
<Grid DataContext="{Binding ElementName=UI}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="StrokeDashArrayAnimation">
                <Storyboard BeginTime="0">
                    <DoubleAnimation Duration="0:0:5"
                                     From="0"
                                     Storyboard.TargetName="UI"
                                     Storyboard.TargetProperty="StrokeValue"
                                     To="10" />
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Ellipse x:Name="lo"
             Stroke="Red"
             StrokeDashArray="{Binding StrokeArray}"
             StrokeThickness="5" />
    <Button Width="150"
            Height="49"
            Margin="29,65,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Click="Button_Click_1"
            Content="Start" />
</Grid>

代码：

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {


    public MainPage()
        {
            InitializeComponent();
        }

        public double StrokeValue
        {
            get { return (double)GetValue(StrokeValueProperty); }
            set { SetValue(StrokeValueProperty, value); }
        }

        public static readonly DependencyProperty StrokeValueProperty =
            DependencyProperty.Register("StrokeValue", typeof(double), typeof(MainPage),
            new PropertyMetadata(0.0, OnStrokeValueChanged));

        private static void OnStrokeValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var page = d as MainPage;
            if (page != null) page.StrokeArray = new DoubleCollection { (double)e.NewValue, 1 };
        }

        public DoubleCollection StrokeArray
        {
            get { return (DoubleCollection)GetValue(StrokeArrayProperty); }
            set { SetValue(StrokeArrayProperty, value); }
        }

        public static readonly DependencyProperty StrokeArrayProperty =
            DependencyProperty.Register("StrokeArray", typeof(DoubleCollection), typeof(MainPage)
            , new PropertyMetadata(new DoubleCollection { 0, 1 }));


        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, "StrokeDashArrayAnimation", false);
        }
    }
}

在运行时动画双重集合值

1 个答案: