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>

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

1 个答案: