wpf - 从隐藏到全尺寸动画控制的最简单方法？

Question

我有一个“工具栏”类型的控件，它基本上是一组用于“组”其他按钮的按钮。按钮和组沿我的窗口顶部水平排列。

我想要的是，当用户单击其中一个组的按钮之一时，该组的其他按钮的列表(可能是 ItemsPanel)从 0 宽度扩展到需要的宽度按住按钮列表。

所以你会从这样的事情开始:

   _______
   |G|G|G|
   -------

其中 G 是组按钮。如果你点击中间的组按钮，你会得到这样的结果:

_______________
|G|G|B|B|B|B|G|
---------------

原始组按钮仍然存在，所选组的新按钮已“生长”到位。

实现这一目标的最佳方法是什么？我应该使用 ListBox 作为外部容器并在 ListBoxItems 之一上的 IsSelected 更改时触发动画吗？如果是这样，我如何编写从 0 宽度(或隐藏)到“全宽”(无论是什么)的动画？

谢谢!

Answer 1

我会使用流体布局，并不是说这是最好的方式或任何东西，而是一种方式。基本上允许您在说 Auto 之间设置动画宽度和 0宽度。

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    x:Class="Example.MainWindow"
    Title="MainWindow"
    Height="350"
    Width="525">
<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="Group1" ei:ExtendedVisualStateManager.UseFluidLayout="True">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:1"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="G1Hidden">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="button">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <System:Double>0</System:Double>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="button1">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <System:Double>0</System:Double>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="G1Shown"/>
        </VisualStateGroup>
        <VisualStateGroup x:Name="Group2" ei:ExtendedVisualStateManager.UseFluidLayout="True">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:1"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="G2Hidden">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="button2">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <System:Double>0</System:Double>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="button3">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <System:Double>0</System:Double>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="G2Shown"/>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <VisualStateManager.CustomVisualStateManager>
        <ei:ExtendedVisualStateManager/>
    </VisualStateManager.CustomVisualStateManager>
    <i:Interaction.Behaviors>
        <ei:DataStateBehavior Binding="{Binding IsChecked, ElementName=toggleButton}" Value="True" TrueState="G1Shown" FalseState="G1Hidden"/>
        <ei:DataStateBehavior Binding="{Binding IsChecked, ElementName=toggleButton1}" Value="True" TrueState="G2Shown" FalseState="G2Hidden"/>
    </i:Interaction.Behaviors>
    <StackPanel Orientation="Horizontal">
        <ToggleButton x:Name="toggleButton" Content="Group1" />
        <Button x:Name="button" Content="Group1B1" />
        <Button x:Name="button1" Content="Group1B2" />
        <ToggleButton x:Name="toggleButton1" Content="Group2" />
        <Button x:Name="button2" Content="Group2B1" />
        <Button x:Name="button3" Content="Group2B2" />
    </StackPanel>
</Grid>