Starting a VisualTransition from code behind - wpf

Question

I have created a sliding panel in Blend for VS2013. Using two buttons I can slide the panel in and out. I want to do this with a single button. I have tried invoking the VisualStateManager.GoToState from code behind without any luck. What am I missing here?
<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:ee="http://schemas.microsoft.com/expression/2010/effects"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
</Window.Triggers>
<Grid>
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SlidingPanel">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" To="SlidePanelOut">
<ei:ExtendedVisualStateManager.TransitionEffect>
<ee:SlideInTransitionEffect SlideDirection="RightToLeft"/>
</ei:ExtendedVisualStateManager.TransitionEffect>
</VisualTransition>
<VisualTransition GeneratedDuration="0" To="SlidePanelIn">
<ei:ExtendedVisualStateManager.TransitionEffect>
<ee:SlideInTransitionEffect/>
</ei:ExtendedVisualStateManager.TransitionEffect>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="SlidePanelOut">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="MyStackPanel">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="MyStackPanel">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SlidePanelIn">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="MyStackPanel">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="MyStackPanel">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Button x:Name="button" Content="Button" Margin="0,0,397,283" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click" SourceName="button">
<ei:GoToStateAction StateName="SlidePanelIn"/>
</i:EventTrigger>
<i:EventTrigger EventName="Click">
<ei:ChangePropertyAction/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button x:Name="button1" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="160,0,0,0" Height="37" Click="button1_Click">
<!--<i:Interaction.Triggers>
<i:EventTrigger EventName="Click" SourceName="button1">
<ei:GoToStateAction StateName="SlidePanelOut"/>
</i:EventTrigger>
</i:Interaction.Triggers>-->
</Button>
<StackPanel x:Name="MyStackPanel" HorizontalAlignment="Left" Height="278" VerticalAlignment="Top" Width="100" Background="#FFDC1717" RenderTransformOrigin="0.5,0.5" Margin="-100,42,0,0">
<StackPanel.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</StackPanel.RenderTransform>
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</StackPanel>
</Grid>
</Window>
private void button1_Click(object sender, RoutedEventArgs e)
{
VisualState vs = SlidingPanel.CurrentState;
if (vs.Name == "SlidePanelIn")
{
VisualStateManager.GoToState(MyStackPanel, SlidePanelOut.Name, true);
}
}
Any and all help appreciated!
TIA,
Doug

Answer 1

You will make things simpler if you use a ToggleButton as your single Button. Then you can use the Checked and Unchecked events to trigger changes to your VisualTransition states:
<ToggleButton x:Name="button" Content="Button" Margin="0,0,397,283" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked" SourceName="button">
<ei:GoToStateAction StateName="SlidePanelIn"/>
</i:EventTrigger>
<i:EventTrigger EventName="Unchecked">
<ei:GoToStateAction StateName="SlidePanelOut"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ToggleButton>