Show / hide control using simple animation

A general request, but its realy simple. If you want to create a simple menu control, like visual studio toolbar, which has the ability to auto hide, use the below code;

Say we have a control, (I am using a border to demonstrate this)

<Border x:Name="MenuBorder" Width="160" HorizontalAlignment="Left" Margin="2">
<Some data - controls etc>
</Border>

Use Storyboards to animate the control

<Storyboard x:Name="CloseMenu">
<DoubleAnimation Duration="00:00:00.10" From="160" To="24" Storyboard.TargetName="MenuBorder" Storyboard.TargetProperty="Width"/>
</Storyboard>
<Storyboard x:Name="OpenMenu">
<DoubleAnimation Duration="00:00:00.10" From="25" To="160" Storyboard.TargetName="MenuBorder" Storyboard.TargetProperty="Width"/>
</Storyboard>

Use a button to open and close the menu controls;

Simple;

private void OnMenuButtonClick(object sender, RoutedEventArgs e)
{
Button menuButton = sender as Button;
if (string.Equals(menuButton.Tag, "Open"))
{
this.OpenMenu.Begin();
}
else
{
this.CloseMenu.Begin();
}
}

Comments