WPF Animation : How do i make it slide in?

Question

So I just got into animations and I wanted to do a "Slide out" animation and I managed to do so just fine. But now I want it to slide in with the click on the same button. So like I click it and it slides out and then I want it to slide back in when I click it again.

WITHOUT any code behind, so just through xaml

Here is the XAML

<Grid>
    <Grid.Resources>
        <Storyboard x:Key="TransformImage">
            <DoubleAnimation
                Storyboard.TargetName="MovingImage"
                Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)"
                By="130" Duration="0:0:0.3">
            </DoubleAnimation>
        </Storyboard>

        <Storyboard x:Key="TransformButton">
            <DoubleAnimation
                Storyboard.TargetName="btnChange"
                Storyboard.TargetProperty="(Button.RenderTransform).(TranslateTransform.X)"
                By="130" Duration="0:0:0.3">
            </DoubleAnimation>
        </Storyboard>
    </Grid.Resources>


    <Grid.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="btnChange">
            <BeginStoryboard Storyboard="{StaticResource TransformImage}"/>
            <BeginStoryboard Storyboard="{StaticResource TransformButton}"/>
        </EventTrigger>
    </Grid.Triggers>

    <StackPanel Orientation="Horizontal" Margin="0">
        <Image x:Name="MovingImage" Source="logo.png"
               MaxWidth="120">
            <Image.RenderTransform>
                <TranslateTransform />
            </Image.RenderTransform>
        </Image>
    </StackPanel>

    <StackPanel
        Panel.ZIndex="1"
        Height="450" 
          Width="120"
          HorizontalAlignment="Left"
          Background="Black"></StackPanel>

    <Button Margin="130,0,0,0" Height="40" Width="120"
            Content="Show Image" x:Name="btnChange"
            HorizontalAlignment="Left" >
        <Button.RenderTransform>
            <TranslateTransform />
        </Button.RenderTransform>
    </Button>
</Grid>

Answer 1

You need to store current state of slide animation when clicking on button and based on it run appropriate story board.

For example, you could use ToggleButton that has IsChecked property (or property in view-model).

To avoid duplicate triggers/styles I placed Image and ToggleButton in the same StackPanel.

<Grid>
    <Grid.Resources>

        <system:Double x:Key="SlideOffSet">130</system:Double>

        <Storyboard x:Key="SlideRight">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                             From="0" To="{StaticResource SlideOffSet}"
                             Duration="0:0:0.3" />
         </Storyboard>

         <Storyboard x:Key="SlideLeft">
             <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                              From="{StaticResource SlideOffSet}" To="0" 
                              Duration="0:0:0.3" />
         </Storyboard>

    </Grid.Resources>

    <StackPanel Orientation="Horizontal" Margin="0">
        <StackPanel.Style>
            <Style TargetType="StackPanel">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsChecked, ElementName=SlideState}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource SlideRight}" />
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard Storyboard="{StaticResource SlideLeft}" />
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </StackPanel.Style>

        <StackPanel.RenderTransform>
            <TranslateTransform />
        </StackPanel.RenderTransform>

        <Image Source="logo.png" MaxWidth="120" />
        <ToggleButton x:Name="SlideState" Margin="10,0,0,0" Height="40" Width="120" Content="Show Image" />

    </StackPanel>

    <StackPanel
        Panel.ZIndex="1"
        Height="450" 
        Width="120"
        HorizontalAlignment="Left"
        Background="Black"></StackPanel>
</Grid>

Also, I would not recommend using By property of the DoubleAnimation:
If animation is still running and you click button again, then second animation will be started at wrong position (it will use X value from first animation, which is not finished) - Click button quickly many times and you will see the problem.

Use From and To properties instead.