wpf animation to hide and collapse panel on button click - wpf

Question

I have a StackPanel and a button. Initallty the button content should be << When the button is clicked the StackPanel content should collapse and the button text should become >> where collapse is happening correctly. Again when the same button is pressed I want the content to show up and text should be << which I am unsure how to do.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" x:Name="stkEasyLocatePanel" Loaded="stkEasyLocatePanel_Loaded" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,0,28"></StackPanel>
<Button Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,5,0,0" Panel.ZIndex="140" Height="20" Width="25" Background="Transparent" Content="<<">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard x:Name="HideStackPanel">
<DoubleAnimation Storyboard.TargetName="stkEasyLocatePanel" Storyboard.TargetProperty="Width" From="330" To="0" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<!--This part dosent work. The content collapses and shows on a single click. But I want it to happen on two clicks of same button-->
<Storyboard x:Name="ShowStackPanel">
<DoubleAnimation Storyboard.TargetName="stkEasyLocatePanel" Storyboard.TargetProperty="Width" From="0" To="330" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>

Answer 1

Replace Button with ToggleButton , and use code below as it is, and see if this solves your problem.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Width="330" x:Name="stkEasyLocatePanel" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,0,28">
<Image Source="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg"/>
</StackPanel>
<ToggleButton Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,5,0,0" Panel.ZIndex="140" Height="20" Width="25" Background="Transparent" Content="<<">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard x:Name="HideStackPanel">
<DoubleAnimation Storyboard.TargetName="stkEasyLocatePanel" Storyboard.TargetProperty="Width" From="0" To="330" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="<<" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<!--This part dosent work. The content collapses and shows on a single click. But I want it to happen on two clicks of same button-->
<Storyboard x:Name="ShowStackPanel">
<DoubleAnimation Storyboard.TargetName="stkEasyLocatePanel" Storyboard.TargetProperty="Width" From="330" To="0" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn"></PowerEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value=">>" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
</Grid>

Answer 2

I would suggest to keep a variable in code behind (something like isCollaped) and then in code behind hookup to the click event of the button. Inside the click method of the button place some logic to hide or show the stack panel.
For example:
XAML
<StackPanel Grid.Column="0" x:Name="stkEasyLocatePanel" Loaded="stkEasyLocatePanel_Loaded" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,0,28"></StackPanel>
//Add the Click event.
<Button Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,5,0,0" Panel.ZIndex="140" Height="20" Width="25" Background="Transparent" Content="<<" Click=Button_Click>
CODE BEHIND
bool isCollapsed = false;
private void Button_Click(object sender, RoutedEventArgs e)
{
if (isCollapsed)
{
//Create and run show Stackpanel animation
//Change the content of the button to "<<"
}
else
{
//Create and run hide Stackpanel animation
//Change the content of the button to ">>"
}
isCollapsed = !isCollapsed;
}
EDIT
As requested in the comment, this is an example on how you would animate from code behind.
if (isCollapsed)
{
DoubleAnimation showAnim = new DoubleAnimation();
showAnim.Duration = TimeSpan.FromSeconds(0.3);
showAnim.EasingFunction = new PowerEase() { EasingMode = EasingMode.EaseIn };
showAnim.From = 330;
showAnim.To = 0;
stkEasyLocatePanel.BeginAnimation(StackPanel.WidthProperty, showAnim);
//Change the content of the button to "<<"
}