WPF - 动画堆栈面板方向的变化？

Question

我正在尝试创建一个动画，其中图标（Viewbox-wrapped Canvas 上的 xaml 矢量图形）从其旁边的文本 (TextBlock) 变为其下方。

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

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

谢谢大家！

Answer 1

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,RowSpan,Col。您可能需要一些代码将所有内容联系在一起。我正在查看一个更详细的示例，如果我解决了这些问题，我会发布。