title: move in and move out animation in wpf
body: <p>Please check the below example first</p>
  
  <p><a href="http://codecanyon.net/item/multipurpose-bookshelf-slider-jquery-plugin/full_screen_preview/1985655" rel="nofollow">animation example</a></p>
  
  <p>i want to do this in my wpf windows application. plz help me</p>
  
  <p>i am using 3 buttons in grid.row="0"
  and three stack panels in grid.row="1"</p>
  
  <p>when user clicks on any button the appropriate stack panel should move in and and other should move out.</p>
  
  <p>I am new to WPF and i tried below.</p>
  
  <pre><code>&lt;Grid&gt;
  
      &lt;Grid.Triggers&gt;
          &lt;EventTrigger SourceName="btnPNB" RoutedEvent="Button.Click"&gt;
              &lt;EventTrigger.Actions&gt;
                  &lt;BeginStoryboard x:Name="StoryBoard1"&gt;
                      &lt;Storyboard&gt;
                          &lt;DoubleAnimation x:Name="dbMoveOut" Storyboard.TargetName="sPanelPNB" 
                                           Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                           From="0" To="600" AutoReverse="False"&gt;
                          &lt;/DoubleAnimation&gt;
                          &lt;DoubleAnimation x:Name="dbMoveIn" Storyboard.TargetName="sPanelOtherBank" 
                                           Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                           From="-550" To="0" AutoReverse="False"&gt;
                          &lt;/DoubleAnimation&gt;
                      &lt;/Storyboard&gt;
                  &lt;/BeginStoryboard&gt;
              &lt;/EventTrigger.Actions&gt;
          &lt;/EventTrigger&gt;
          &lt;EventTrigger SourceName="btnOther" RoutedEvent="Button.Click"&gt;
              &lt;EventTrigger.Actions&gt;
                  &lt;BeginStoryboard x:Name="StoryBoard2"&gt;
                      &lt;Storyboard&gt;
                          &lt;DoubleAnimation Storyboard.TargetName="sPanelOtherBank" 
                                           Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                           From="-550" To="0" AutoReverse="False"&gt;
                          &lt;/DoubleAnimation&gt;
                      &lt;/Storyboard&gt;
                  &lt;/BeginStoryboard&gt;
              &lt;/EventTrigger.Actions&gt;
          &lt;/EventTrigger&gt;
          &lt;EventTrigger SourceName="btnCAIIB" RoutedEvent="Button.Click"&gt;
              &lt;EventTrigger.Actions&gt;
                  &lt;BeginStoryboard x:Name="StoryBoard3"&gt;
                      &lt;Storyboard&gt;
                          &lt;DoubleAnimation Storyboard.TargetName="sPanelCAIIB" 
                                           Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                           From="-550" To="0" AutoReverse="False"&gt;
                          &lt;/DoubleAnimation&gt;
                      &lt;/Storyboard&gt;
                  &lt;/BeginStoryboard&gt;
              &lt;/EventTrigger.Actions&gt;
          &lt;/EventTrigger&gt;
      &lt;/Grid.Triggers&gt;
  
      &lt;Button x:Name="btnPNB" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="20,0,0,0" Content="PNB" Click="moveSP_Click"&gt;&lt;/Button&gt;
      &lt;Button x:Name="btnOther" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="70,0,0,0" Content="OTher"  Click="moveSP_Click"&gt;&lt;/Button&gt;
      &lt;Button x:Name="btnCAIIB" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="150,0,0,0" Content="CAIIB" Click="moveSP_Click"&gt;&lt;/Button&gt;
  
      &lt;StackPanel x:Name="sPanelPNB" VerticalAlignment="Bottom" Orientation="Horizontal"&gt;
          &lt;StackPanel.RenderTransform&gt;
              &lt;TranslateTransform X="-550" Y="0"&gt;&lt;/TranslateTransform&gt;
          &lt;/StackPanel.RenderTransform&gt;
          &lt;Image Source="1_1.jpg" Margin="10,0,0,0" Width="100" HorizontalAlignment="Left" VerticalAlignment="Bottom"&gt;
          &lt;/Image&gt;
          &lt;Image Source="1_2.png" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom"&gt;
          &lt;/Image&gt;
          &lt;Image Source="1_3.png" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom"&gt;
          &lt;/Image&gt;
      &lt;/StackPanel&gt;
  
      &lt;StackPanel x:Name="sPanelOtherBank" VerticalAlignment="Bottom" Orientation="Horizontal"&gt;
          &lt;StackPanel.RenderTransform&gt;
              &lt;TranslateTransform X="-550" Y="0"&gt;&lt;/TranslateTransform&gt;
          &lt;/StackPanel.RenderTransform&gt;
          &lt;Image Source="2_1.png" Margin="10,0,0,0" Width="100" HorizontalAlignment="Left" VerticalAlignment="Bottom"&gt;
          &lt;/Image&gt;
          &lt;Image Source="2_2.jpg" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom"&gt;
          &lt;/Image&gt;
          &lt;Image Source="2_3.png" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom"&gt;
          &lt;/Image&gt;
      &lt;/StackPanel&gt;
  
      &lt;StackPanel x:Name="sPanelCAIIB" VerticalAlignment="Bottom" Orientation="Horizontal"&gt;
          &lt;StackPanel.RenderTransform&gt;
              &lt;TranslateTransform X="-550" Y="0"&gt;&lt;/TranslateTransform&gt;
          &lt;/StackPanel.RenderTransform&gt;
          &lt;Image Source="3_1.png" Margin="10,0,0,0" Width="100" HorizontalAlignment="Left" VerticalAlignment="Bottom"&gt;
          &lt;/Image&gt;
          &lt;Image Source="3_2.png" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom"&gt;
          &lt;/Image&gt;
          &lt;Image Source="3_3.jpg" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom"&gt;
          &lt;/Image&gt;
      &lt;/StackPanel&gt;
  
  
  
  
  &lt;/Grid&gt;
  </code></pre>