WPF - スタックパネルの向きの変更をアニメーション化しますか？

Question

アイコン（Viewboxでラップされたキャンバス上のxamlベクトルグラフィック）がテキスト（TextBlock）をその下に持つようになるアニメーションを作成しようとしています。

私は現在、ViewboxとTextBlockを横向きのStackPanelにしています。私は垂直に方向を変更することができますが、これは即座の変更です（滑らかにアニメーション化されていません）。 TextBlockの位置をアニメーション化できるTranslateTransformで設定することもできますが、これは再利用可能な方法（つまり値をハードコーディングすることなく）では困難です。

スタックパネルで水平方向から垂直方向への遷移をアニメーション化するためのWPF中心の方法がある場合、誰にでも教えてください。または、私が望む効果を達成するために考えなかった別の方法ですか？

ありがとうございます！

Answer 1

blendには、FluidLayoutと呼ばれる機能があります。

ブレンド中

• 、新しい状態グループを作成し、遷移時間を設定し、流体レイアウトを可能にします。
• 水平方向に1つ、垂直方向に2つの状態を作成します。
• 次に、動作を使用して動作を切り替えることができます。

あなたはブレンドを持っていない場合は、必要なファイルのMicrosoft.Expression.InteractionsとSystem.Windows.Interactivityを持っている必要がありSDKをダウンロードすることができます。これらへの参照を追加し、以下のサンプルを試してみてください。

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions" 
    xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
    x:Class="WpfApplication4.MainWindow" 
    x:Name="Window" 
    Title="MainWindow" 
    Width="640" Height="480"> 

    <Grid x:Name="LayoutRoot"> 
     <VisualStateManager.CustomVisualStateManager> 
      <ic:ExtendedVisualStateManager/> 
     </VisualStateManager.CustomVisualStateManager> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="Orientation" ic:ExtendedVisualStateManager.UseFluidLayout="True"> 
       <VisualStateGroup.Transitions> 
        <VisualTransition GeneratedDuration="00:00:00.3000000"/> 
       </VisualStateGroup.Transitions> 
       <VisualState x:Name="Vertical"/> 
       <VisualState x:Name="Horizontal"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="stack" Storyboard.TargetProperty="(StackPanel.Orientation)"> 
          <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Orientation.Horizontal}"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <StackPanel x:Name="stack" Margin="8,49,8,8"> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
      <Button Content="Button"/> 
     </StackPanel> 
     <Button HorizontalAlignment="Left" Margin="8,8,0,0" VerticalAlignment="Top" Width="97" Height="25" Content="H"> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="Click"> 
        <ic:GoToStateAction StateName="Horizontal"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
     </Button> 
     <Button HorizontalAlignment="Left" Margin="109,8,0,0" VerticalAlignment="Top" Width="97" Height="25" Content="V"> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="Click"> 
        <ic:GoToStateAction StateName="Vertical"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
     </Button> 
    </Grid> 
</Window> 

あなたはGrid.Row、ROWSPAN、コルを変更することにより、要素またはを移動する状態を使用してアイテムの移行を処理するために同様の方法を使用することができます。すべてを結びつけるためにいくつかのコードが必要な場合があります。問題を整理すると、私はより精巧なサンプルを見ています。