Самый простой способ оживить контроль от скрытого до полноразмерного?

Question

У меня есть элемент управления типа «панель инструментов», который представляет собой набор кнопок для «групп» других кнопок.Кнопки и группы расположены горизонтально вдоль верхней части моего окна.

То, что я хотел бы иметь, когда пользователь нажимает одну из кнопок для одной из групп, список (вероятно, ItemsPanel) других кнопок для этой группы расширяется от ширины 0 доВ общем, он должен содержать список кнопок.

Таким образом, вы бы начали с чего-то вроде этого:

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

, где G - кнопка группы.И если вы нажмете на кнопку средней группы, вы получите:

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

, где кнопки исходной группы все еще есть, а новые кнопки для выбранной группы «выросли» на свои места.

Какой лучший способ сделать это?Должен ли я использовать ListBox в качестве внешнего контейнера и запускать анимацию, когда IsSelected изменяется на одном из ListBoxItems?Если да, то как мне написать анимацию, которая переходит от 0 ширины (или скрытой) к «полной ширине» (что бы это ни было)?

Спасибо!

Answer 1

Я бы использовал плавную компоновку, не то чтобы это был лучший способ или что-то в этом роде, а только один. В основном позволяет анимировать между, скажем, Auto width и 0 width.

<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>