Geek Answers Handbook

The easiest way to adjust the control from hidden to full size?

I have a toolbar control, which is a set of buttons for the "groups" of other buttons. Buttons and groups are located horizontally along the top of the window.

What I would like to have when the user clicks one of the buttons for one of the groups, the list (possibly ItemsPanel) of the other buttons for this group expands from width 0 to how much it is needed to hold the list of buttons.

So you start with something like this:

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

where G is the group button. And if you click on the middle group button, you will get the following:

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

where the original buttons of the group are still present, and the new buttons for the selected group have "grown" in place.

? ListBox , IsSelected ListBoxItems? , , ( ) 0 " " ( )?

!

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

+3

More articles:


All Articles