首页 文章

WPF - 动画显示stackpanel方向的变化?

提问于
浏览
10

我正在尝试创建一个动画,其中一个图标(Viewbox包装的Canvas上的xaml矢量图形)从它旁边的文本(TextBlock)到它下面 .

我目前在水平方向的StackPanel中有Viewbox和TextBlock . 我可以将方向更改为垂直方向,但这是一个即时更改(不是平滑动画) . 我也可以使用TranslateTransform(可以设置动画)来设置TextBlock的位置,但这很难以可重用的方式进行(即没有硬编码值) .

任何人都能告诉我是否有任何以WPF为中心的方式来动画在堆栈面板中从水平方向到垂直方向的过渡?或者我没有想过要达到预期效果的另一种方式?

谢谢大家!

1 回答

  • 4

    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 . 您可能需要一些代码将所有内容绑定在一起 . 如果我解决问题的话,我正在看一个更精细的样本 .

相关问题