Visual States를 사용하여 UWP에서 컨트롤의 가시성을 어떻게 애니메이트 할 수 있습니까?

Question

현재 상태를 변경하려면 클릭 할 수있는 헤더가 포함 된 내용을 펼치거나 접는 응용 프로그램의 사용자 정의 컨트롤에서 작업하고 있습니다. 이 템플릿은 현재 이와 같이 보입니다.

<Style TargetType="controls:ExpandControl"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="controls:ExpandControl"> 
       <Border> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="State"> 
          <VisualState x:Name="Visible"> 
           <VisualState.Setters> 
            <Setter Target="Grid.Visibility" Value="Visible" /> 
           </VisualState.Setters> 
          </VisualState> 

          <VisualState x:Name="Collapsed"> 
           <VisualState.Setters> 
            <Setter Target="Grid.Visibility" Value="Collapsed" /> 
           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <Grid> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
          <RowDefinition Height="*" /> 
         </Grid.RowDefinitions> 

         <ContentPresenter x:Name="HeaderPresenter" Content="{TemplateBinding Header}" /> 

         <Grid x:Name="Grid" Grid.Row="1"> 
          <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" /> 
         </Grid> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

템플릿에서 볼 수 있듯이

, 나는 현재이 컨트롤의 내용의 가시성을 설정하는 시각적 상태를 사용하고 있지만, 내용이 사라질으로 훌륭한 사용자 경험이 아니다.

컨트롤의 표시가 변경 될 때 헤더에서 축소되거나 확장되는 것처럼 보이게하는 콘텐츠를 어떻게 든 조작 할 수 있기를 바랍니다.

Storyboards를 사용하여 애니메이션을 보았습니다.하지만 완전히 새로운 것이므로 누군가 Storyboards에 대한 도움을 줄 수 있고 시나리오를 내 컨트롤에 적용 할 수 있다면 매우 감사하게 생각합니다!

미리 감사드립니다.

Answer 1

Storyboarding은 Visual Studio에서 뛰어난 경험이 아니며 수동으로 작성하려고하면 최상의 아이디어가 아닐 수도 있습니다.

Visual Studio 설치의 일부로 제공되는 Blend에서 프로젝트를 여는 것이 좋습니다. 응용 프로그램을 설계하고 특히 스토리 보드를 아주 쉽게 추가 할 수있는 훌륭한 도구이며 디자이너에서 변경 사항을 볼 때 Storyboard XAML이 자동으로 생성됩니다.

애니메이션 시나리오에서 저는 페이지에서 XAML 템플릿을 가지고 놀았으며 축소되거나 확대되는 것처럼 보이지만 다음과 같은 Visibility 속성을 조작하지 않고 수행합니다.

<VisualStateGroup x:Name="State"> 
    <VisualState x:Name="Visible"> 
     <Storyboard> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Grid"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/> 
      </DoubleAnimationUsingKeyFrames> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Grid"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/> 
      </DoubleAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Grid"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
       <DiscreteObjectKeyFrame KeyTime="0:0:0.1"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
     </Storyboard> 
    </VisualState> 

    <VisualState x:Name="Collapsed"> 
     <Storyboard> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Grid"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/> 
      </DoubleAnimationUsingKeyFrames> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Grid"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/> 
      </DoubleAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Grid"> 
       <DiscreteObjectKeyFrame KeyTime="0"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Visible</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
       <DiscreteObjectKeyFrame KeyTime="0:0:0.2"> 
        <DiscreteObjectKeyFrame.Value> 
         <Visibility>Collapsed</Visibility> 
        </DiscreteObjectKeyFrame.Value> 
       </DiscreteObjectKeyFrame> 
      </ObjectAnimationUsingKeyFrames> 
     </Storyboard> 
    </VisualState> 
</VisualStateGroup> 

또한 같이하는 콘텐츠 그리드를 변경할 수 있습니다

: 당신은 그리드에 대한 변경과 어떤 스토리 보드가 다음에 무엇을해야하는 이유

<Grid x:Name="Grid" Grid.Row="1" RenderTransformOrigin="0.5,0"> 
    <Grid.RenderTransform> 
     <CompositeTransform/> 
    </Grid.RenderTransform> 

    <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" /> 
</Grid> 

내가 설명 할 것이다 .

당신이 찾고있는 것과 비슷한 것을 얻기 위해 그리드의 불투명도와 Y 스케일을 애니메이션으로 선택했습니다.

컨트롤의 Y 스케일을 조작 할 것이기 때문에 RenderTransform을 Grid에 추가했습니다. CompositeTransform을 사용하는 이유는 가장 일반적인 변환 (축척, 회전, 변환 등)을 조작 할 수 있기 때문입니다.

주에서는 키 프레임을 사용하여 시간에 따라 값을 조작합니다. 이것은 스토리 보드에서 애니메이션을 얻는 방법입니다. 시간이 0 인 KeyFrame 하나만 설정하면 속성을 변경하는 VisualState.Setters 메커니즘을 사용하는 것과 비슷한 즉각적인 변경으로 나타납니다.

접힌 상태에서 Grid의 불투명도와 Y 배율을 1에서 0으로 변경합니다. 이렇게하면 내용이 헤더로 접히는 것을 보여주는 애니메이션이 제공됩니다. 키 프레임에서 볼 수 있듯이 우리는 두 속성의 애니메이션을 비틀 거리며 크기 조정이 끝나기 전에 내용이 흐려집니다.

Visible 상태에서 우리는 같은 시간 동안 불투명도와 Y 스케일링을 0에서 1로 변경하여 축소 상태를 본질적으로 바꿉니다.

컨트롤에로드하고 블렌드에서 재생 해보십시오. 이 일을 아주 빨리 던짐으로써 출발점이되었습니다. 이 여전히 가시성 속성 변경을 사용하여 작동겠습니까 https://blogs.msdn.microsoft.com/avtarsohi/2016/02/16/understand-storyboard-concept-in-xaml-using-blend-2015/