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
Post a Comment