런타임에 이중 콜렉션 값에 애니메이션 적용

Question

모양이 있습니다. 원하는 파선 테두리를 얻으려면 Stroke 및 StrokeThickness 및 StrokeDashArray을 입력했습니다. 그런 다음 StrokeDashOffset을 VisualStateManager을 통해 애니메이션하여 "Marching Ants"스타일 애니메이션을 얻습니다. 모든 것은 내가 원하는 제외

모양의 기본은 우리가 내가 단지 속성에 DoubleAnimation을 수행 할 수 있습니다 알고있는 불행하게도 제외하고 VisualStateManager에서 VisualState에 따라 그 설정하려면 대신 StrokeDashArray을 가지고 NOT 할 ... 좋은 작품 그리고, 영리한 선택되지 않은 상태에서 모양이 고체 Stroke을 가지고 그래서 런타임시에 그 값을 애니메이션 수있는 방법하지만 'VisualStateManager를 통해이 StrokeDashArray이 무엇인지와 같은 두 컬렉션의 가치 ... 내 질문은

이 없습니다 '(아마도) StrokeDashOffset을 선택한 상태로 동일한 모양으로 제공합니까? 또는 두 개의 분리 된 도형을 사용하는 것과 그 사이의 가시성을 전환하는 것이 나을 것이므로 각각이 고유 한 기본값을 가질 수 있습니까?

그림으로 시각화하는 데 도움이되거나 알려 주시면 더 자세히 알려 드리겠습니다.

Answer 1

한 가지 옵션은 이중 속성에 애니메이션을 적용하고 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); 
     } 
    } 
}