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 - 动画改变堆叠面板的方向？

回答

相关问题