WPF XAML Storyboard를 사용하여 경로의 한 지점을 이동/위치 변경

Question

그래서 추가 정보를 표시하기 위해 확장 할 수있는 항목의 목록을 만드는 프로젝트가 있습니다. 지금까지 필자는 정보 패널이 열려 있거나 닫혀 있는지를 나타 내기 위해 각도를 180도 회전하는 방법을 생각해 냈지만 약간 인공적인 것처럼 느껴집니다. Gif demonstration here. 이상적으로, 나는 내 각도 (<)가 반대 방향을 가리 키도록 변모하고 싶습니다. 그래서 좌표가 -5,0 0,5와 5,0 (빨강) -5,5 0,0과 5,5 (Blue)로가는 애니메이션을 만들고 싶다고합시다.

애니메이션/경로/morph/스토리 보드와 같은 키워드를 사용하여 잠시 동안이 문제에 대해 살펴 보았습니다. 제 이론은 이제 Path 데이터에서 각 포인트의 이름을 개별적으로 지정하고 공통 데이터 트리거를 기반으로 위치를 이동할 스타일을 스타일에 추가 할 수있는 방법이 될 수 있다는 것입니다. 현재 아래 그림과 같이 모두 연결되어 있으며 경로에 연결된 스타일까지 모두 연결되어 있습니다. XAML에서이 모든 작업을 수행하기를 원하므로 모든 도움을 받으실 수 있습니다.

<DataTrigger Binding="{Binding RevealAdditionalInformation}" Value="False"> 
    <DataTrigger.EnterActions> 
    <StopStoryboard BeginStoryboardName="ArrowPointUp"/> 
    <BeginStoryboard Name="ArrowPointDown"> 
     <Storyboard> 
     <DoubleAnimation Storyboard.TargetProperty="(LayoutTransform).(RotateTransform.Angle)" From="180" To="0" Duration="0:0:0.6"/> 
     </Storyboard> 
    </BeginStoryboard> 
    </DataTrigger.EnterActions> 
</DataTrigger> 

---

업데이트 : 난 그냥 <Path Data="m 0 0 5 5 5 -5">보다는 내 경로를 그릴 수있는 새로운 방법을 찾기 위해 노력했습니다

. 그래서 지금 나는 같은 모양이 다른 방식으로 쓰여졌습니다. 아마도 이것은 각 지점을 개별적으로 조작하는 것이 더 쉬울 것입니다. 여기서 문제가되는 것은이 포인트 중 어느 것도 Name="Something"으로 명명 할 수 없으므로 액세스하기 어렵다는 것입니다.

<Path Stroke="Black" StrokeThickness="1" Grid.Column="1"> 
    <Path.Data> 
    <PathGeometry> 
     <PathGeometry.Figures> 
     <PathFigureCollection> 
      <PathFigure IsClosed="False" StartPoint="0,0"> 
      <PathFigure.Segments> 
       <PathSegmentCollection> 
       <LineSegment Point="5,5" /> 
        <LineSegment Point="10,0" /> 
       </PathSegmentCollection> 
       </PathFigure.Segments> 
      </PathFigure> 
      </PathFigureCollection> 
     </PathGeometry.Figures> 
     </PathGeometry> 
    </Path.Data> 
    </Path> 

업데이트 2 : 이것은 또 다른 내가 실험을 봤는데 가지고있다

이

<DataTrigger Binding="{Binding RevealAdditionalInformation}" Value="True"> 
    <DataTrigger.EnterActions> 
    <BeginStoryboard Name="AnimateTrue"> 
     <Storyboard> 
     <PointAnimationUsingPath Duration="0:0:0.5" Storyboard.TargetProperty="Figures"> 
      <PointAnimationUsingPath.PathGeometry> 
      <PathGeometry Figures="m -5 0 0 5 5 0"/> 
      </PointAnimationUsingPath.PathGeometry> 
     </PointAnimationUsingPath> 
     </Storyboard> 
    </BeginStoryboard> 
    </DataTrigger.EnterActions> 
</DataTrigger> 

, 문제는 여기 Storyboard.Target 속성을 것 같다, 애니메이션하지 아마도 다른 종류입니다 필요합니다. 내가 이것을 실험하고있는 경로는 위의 데이터 트리거를 사용하는 스타일 인 FiguresTest입니다.

<Path x:Name="_testPath" Stroke="Black" StrokeThickness="1" Style="{StaticResource FiguresTest}"> 
    <Path.Data> 
    <PathGeometry Figures="m -5 5 0 0 5 5"/> 
    </Path.Data> 
</Path> 

Answer 1

당신은 Path의 개별 점에 애니메이션을 적용 할 수 있습니다. 이를 수행하려면 Path을 애니메이션하려는 각 포인트가 명명 된 요소의 속성 인 방식으로 정의해야합니다. 이것은 물론 더 자세한 정의를 내리지만, 당신이 얻은 것을 얻을 수 있습니다. 예를 들어 :

<Path Stroke="Black" StrokeThickness="1"> 
    <Path.Data> 
     <PathGeometry> 
      <PathFigure x:Name="Figure" StartPoint="-5,5"> 
       <LineSegment x:Name="Line1" Point="0,0" /> 
       <LineSegment x:Name="Line2" Point="5,5" /> 
      </PathFigure> 
     </PathGeometry> 
    </Path.Data> 
</Path> 

그런 다음 애니메이션은 다음과 같이 수 :

<BeginStoryboard Name="AnimateTrue"> 
    <Storyboard> 
     <PointAnimation To="-5,0" Duration="0:0:0.5" 
         Storyboard.TargetName="Figure" 
         Storyboard.TargetProperty="StartPoint" /> 
     <PointAnimation To="0,5" Duration="0:0:0.5" 
         Storyboard.TargetName="Line1" 
         Storyboard.TargetProperty="Point" /> 
     <PointAnimation To="5,0" Duration="0:0:0.5" 
         Storyboard.TargetName="Line2" 
         Storyboard.TargetProperty="Point" /> 
    </Storyboard> 
</BeginStoryboard> 

---

편집

을 당신이 일 작업 받고 고민하고 있기 때문에, 아래의 예이다 Path은 ToggleButton 템플릿의 일부입니다. 그것은 확장 상태를 토글하는 데 사용될 것이므로 좋은 선택 인 것으로 보인다.애니메이션이 ToggleButton.IsChecked 특성에 의해서만 유발되는

<ToggleButton> 
    <ToggleButton.Template> 
     <ControlTemplate TargetType="{x:Type ToggleButton}"> 
      <ControlTemplate.Resources> 
       <Duration x:Key="AnimationDuration">0:0:0.2</Duration> 
      </ControlTemplate.Resources> 
      <Border Background="Transparent"> 
       <Path Stroke="Black" StrokeThickness="1" Width="10" Height="5"> 
        <Path.Data> 
         <PathGeometry> 
          <PathFigure x:Name="Figure" StartPoint="0,0"> 
           <LineSegment x:Name="Line1" Point="5,5" /> 
           <LineSegment x:Name="Line2" Point="10,0" /> 
          </PathFigure> 
         </PathGeometry> 
        </Path.Data> 
       </Path> 
      </Border> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsChecked" Value="True"> 
        <Trigger.EnterActions> 
         <BeginStoryboard Name="ToggleOn"> 
          <Storyboard> 
           <PointAnimation To="0,5" Duration="{StaticResource AnimationDuration}" 
               Storyboard.TargetName="Figure" 
               Storyboard.TargetProperty="StartPoint" /> 
           <PointAnimation To="5,0" Duration="{StaticResource AnimationDuration}" 
               Storyboard.TargetName="Line1" 
               Storyboard.TargetProperty="Point" /> 
           <PointAnimation To="10,5" Duration="{StaticResource AnimationDuration}" 
               Storyboard.TargetName="Line2" 
               Storyboard.TargetProperty="Point" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </Trigger.EnterActions> 
        <Trigger.ExitActions> 
         <BeginStoryboard Name="ToggleOff"> 
          <Storyboard> 
           <PointAnimation Duration="{StaticResource AnimationDuration}" 
               Storyboard.TargetName="Figure" 
               Storyboard.TargetProperty="StartPoint" /> 
           <PointAnimation Duration="{StaticResource AnimationDuration}" 
               Storyboard.TargetName="Line1" 
               Storyboard.TargetProperty="Point" /> 
           <PointAnimation Duration="{StaticResource AnimationDuration}" 
               Storyboard.TargetName="Line2" 
               Storyboard.TargetProperty="Point" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </Trigger.ExitActions> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </ToggleButton.Template> 
</ToggleButton> 

주 (데이터 반대로 뷰 - 모델 속성에 바인딩 트리거), 그래서이 컨트롤이 잠재적으로 재사용 (난 당신이 비록 먼저 스타일 템플릿을 이동 제안) . 할 일은 ToggleButton.IsChecked 속성을 올바르게 바인딩하는 것입니다.