WPF-设置stackpanel方向变化的动画？

我正在尝试创建一个动画，其中图标（Viewbox包装画布上的xaml矢量图形）从旁边的文本（TextBlock）转到下面

我目前在水平方向的StackPanel中有Viewbox和TextBlock。我可以将方向更改为垂直，但这是一个即时更改（未平滑设置动画）。我也可以使用TranslateTransform（可以设置动画）设置TextBlock的位置，但这很难以可重用的方式实现（即没有硬编码值）

有谁能告诉我，是否有任何以WPF为中心的方法来设置堆栈面板中从水平方向到垂直方向的过渡动画？还是我没有想到的达到预期效果的另一种方法

---

谢谢大家

Blend中有一个名为的功能可以做到这一点

调和

• 创建新状态组，设置过渡持续时间并启用流体布局
• 创建两个状态，一个用于水平，一个用于垂直
• 然后可以使用行为在它们之间切换

如果没有Blend，可以下载，其中应包含所需的文件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、RowSpan、Col来处理。您可能需要一些代码来将所有内容绑定在一起。如果我能解决这些问题，我将发布一个更详细的示例。

我的直觉告诉我，你必须编写一些代码来进行一些翻译转换，但这不会很好。如果有人能想出一个好方法，我会很感兴趣。您是否试图将其放置在与ViewBox相关的某个区域…例如，无论ViewBox大小如何，您都可以将其放置在ViewBox的左侧和下方，或者…？这可能无法达到预期的效果，但可以更平滑地设置此更改的动画，实现起来可能不那么复杂，可能是在更改StackPanel的方向（例如，使用

DataTrigger

，以及它的开始/结束操作，尽管我不知道如何轻松地获得正确的计时…）时淡出文本，然后再重新输入。这看起来是一个非常好的方法+1只需手动为画布上的元素创建动画，即可实现此效果。我们的项目团队没有使用Blend，所以fluidlayout不是一个选项。@Nick W:如果您最终自己找到了一个问题的答案，请将其添加为该问题的实际答案并接受它（对于那些可以使用Blend的人，可能会引用此答案）