ビジュアルステートを使用して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> 

テンプレートから見ることができるように、私は現在、このコントロールのコンテンツの可視性を設定するために視覚的な状態を使用していますが、内容がちょうど消えるように、優れたユーザー体験ではありません。

コントロールの表示が変更されたときにヘッダーから折りたたまれて展開されているように見えるように、コンテンツを何とか操作できるようにしたいと考えています。

私はストーリーボードを使ってアニメーションを見てきましたが、私はそれを完全に新しくしています。誰かがストーリーボードに助けを与えることができ、シナリオを自分のコントロールのために働かせることができれば、

ありがとうございます！

Answer 1

ストーリーボードは、Visual Studioの素晴らしい体験ではなく、手動で書き込むことがベストセラーではないかもしれません。

Visual Studioのインストールに含まれるBlendでプロジェクトを開くことをお勧めします。これは、アプリケーションを設計するための優れたツールです。特に、ストーリーボードを非常に簡単に追加できます。また、ストーリーボード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スケールを操作するので、GridにRenderTransformを追加しました。 CompositeTransformを使用する理由は、最も一般的な変換（スケール、回転、変換など）を操作できるようにするためです。

状態では、キーフレームを使用して時間の経過とともに値を操作します。これはストーリーボードでアニメーションを達成する方法です。時間が0のKeyFrameを1つだけ設定すると、プロパティを変更するVisualState.Settersメカニズムを使用するのと同じような即時の変更として表示されます。

Collapsed状態では、グリッドの不透明度とYスケーリングを1から0に変更しています。これにより、コンテンツがヘッダーに折り畳まれていることを示すアニメーションが表示されます。キーフレームからわかるように、私たちは2つのプロパティのアニメーションをずらしているので、スケールを終了する前にコンテンツがフェードアウトします。

Visible状態では、不透明度とYスケーリングを同じ時間に0から1に変更することによって、Collapsed状態を本質的に逆転しています。

これらをコントロールに読み込んで、Blendで再生してみてください。私がこれを非常に素早く一緒に投げたので、それは素晴らしい出発点です。

あなたはここにブレンドを使用してストーリーボードにいくつかのより多くの情報を見つけることができます：https://blogs.msdn.microsoft.com/avtarsohi/2016/02/16/understand-storyboard-concept-in-xaml-using-blend-2015/