WPF - 動畫改變堆疊面板的方向？

我試圖創建一個動畫，其中一個圖標（一個Viewbox包裝的畫布上的xaml矢量圖形）從其旁邊的文本（TextBlock）轉到其下面。WPF - 動畫改變堆疊面板的方向？

我目前有一個水平面向StackPanel的Viewbox和TextBlock。我可以將方向更改爲垂直方向，但這是即時更改（不平滑動畫）。我也可以用一個TranslateTransform（可以是動畫）來設置TextBlock的位置，但這很難以可重用的方式進行（即沒有硬編碼值）。

誰能告訴我，如果有動畫從水平到垂直方向在堆棧上鑲板的過渡任何WPF爲中心的方法是什麼？或者我還沒有想到達到預期效果的另一種方式？

謝謝大家！

來源

2011-01-31 Nick W.

我的直覺告訴我，你將不得不編寫一些代碼來做一些翻譯轉換，而且它不會很漂亮。有趣的是，如果有人想出一個好方法。 – Ray 2011-01-31 11:52:48

您是否試圖將它放置在與ViewBox相關的某個區域中？例如，無論ViewBox的大小如何，您都可以將它放置在ViewBox的左側和下方，或者...？ – 2011-01-31 14:53:23

Blend中有一個名爲FluidLayout的功能可以做到這一點。

在Blend

創建一個新的狀態組中，設置一個過渡持續時間和使流體佈局。
創建兩個狀態一個用於水平，一個用於垂直。
然後，您可以使用行爲在它們之間切換。

如果你沒有混合，您可以下載SDK應具備所需的文件Microsoft.Expression.Interactions和System.Windows.Interactivity。添加對這些的引用並嘗試下面的示例。

<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，行跨度，上校。您可能需要一些代碼才能將所有內容聯繫在一我正在尋找更詳細的樣本，如果我理清問題，我會發布。

來源

2011-01-31 20:58:43 Kris

WPF - 動畫改變堆疊面板的方向？

回答

相關問題