Question

I’ve got a “toolbar” type control that is basically a set of buttons for “groups” of other buttons. The buttons and groups are arranged horizontally along the top of my window.

What I’d like is to have, when the user clicks one of the buttons for one of the groups, the list (probably an ItemsPanel) of other buttons for that group expands from being 0 width to being however wide it needs to be to hold the list of buttons.

So you’d start off with something like this:

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

where G is a group button. And if you click on the middle group button, you’ll end up with this:

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

where the original group buttons are still there and the new buttons for the selected group have “grown” into place.

What’s the best way to make this happen? Should I use a ListBox as the outer container and trigger an animation when IsSelected changes on one of the ListBoxItems? If so, how do I write an animation that goes from 0 width (or hidden) to “full width” (whatever that may be)?

Thanks!

Answer 1

I’d use fluid layout, not that this is the best way or anything, but its one way. Basically allows you to animate between say Auto width and 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>