WPF - 动画显示stackpanel方向的变化？
我正在尝试创建一个动画，其中一个图标（Viewbox包装的Canvas上的xaml矢量图形）从它旁边的文本（TextBlock）到它下面。
我目前在水平方向的StackPanel中有Viewbox和TextBlock。我可以将方向更改为垂直方向，但这是一个即时更改（不是平滑动画）。我也可以使用TranslateTransform（可以设置动画）来设置TextBlock的位置，但这很难以可重用的方式进行（即没有硬编码值）。
任何人都能告诉我是否有任何以WPF为中心的方式来动画在堆栈面板中从水平方向到垂直方向的过渡？或者我没有想过要达到预期效果的另一种方式？
谢谢大家！
没有找到相关结果
已邀请:
1 个回复
陷牡彭拈峰
<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>