Question

Please check the below example first

animation example

i want to do this in my wpf windows application. plz help me

i am using 3 buttons in grid.row=”0″
and three stack panels in grid.row=”1″

when user clicks on any button the appropriate stack panel should move in and and other should move out.

I am new to WPF and i tried below.

<Grid>

    <Grid.Triggers>
        <EventTrigger SourceName="btnPNB" RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard x:Name="StoryBoard1">
                    <Storyboard>
                        <DoubleAnimation x:Name="dbMoveOut" Storyboard.TargetName="sPanelPNB" 
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                         From="0" To="600" AutoReverse="False">
                        </DoubleAnimation>
                        <DoubleAnimation x:Name="dbMoveIn" Storyboard.TargetName="sPanelOtherBank" 
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                         From="-550" To="0" AutoReverse="False">
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger SourceName="btnOther" RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard x:Name="StoryBoard2">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="sPanelOtherBank" 
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                         From="-550" To="0" AutoReverse="False">
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger SourceName="btnCAIIB" RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard x:Name="StoryBoard3">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="sPanelCAIIB" 
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                         From="-550" To="0" AutoReverse="False">
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Grid.Triggers>

    <Button x:Name="btnPNB" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="20,0,0,0" Content="PNB" Click="moveSP_Click"></Button>
    <Button x:Name="btnOther" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="70,0,0,0" Content="OTher"  Click="moveSP_Click"></Button>
    <Button x:Name="btnCAIIB" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="150,0,0,0" Content="CAIIB" Click="moveSP_Click"></Button>

    <StackPanel x:Name="sPanelPNB" VerticalAlignment="Bottom" Orientation="Horizontal">
        <StackPanel.RenderTransform>
            <TranslateTransform X="-550" Y="0"></TranslateTransform>
        </StackPanel.RenderTransform>
        <Image Source="1_1.jpg" Margin="10,0,0,0" Width="100" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
        <Image Source="1_2.png" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
        <Image Source="1_3.png" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
    </StackPanel>

    <StackPanel x:Name="sPanelOtherBank" VerticalAlignment="Bottom" Orientation="Horizontal">
        <StackPanel.RenderTransform>
            <TranslateTransform X="-550" Y="0"></TranslateTransform>
        </StackPanel.RenderTransform>
        <Image Source="2_1.png" Margin="10,0,0,0" Width="100" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
        <Image Source="2_2.jpg" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
        <Image Source="2_3.png" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
    </StackPanel>

    <StackPanel x:Name="sPanelCAIIB" VerticalAlignment="Bottom" Orientation="Horizontal">
        <StackPanel.RenderTransform>
            <TranslateTransform X="-550" Y="0"></TranslateTransform>
        </StackPanel.RenderTransform>
        <Image Source="3_1.png" Margin="10,0,0,0" Width="100" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
        <Image Source="3_2.png" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
        <Image Source="3_3.jpg" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
    </StackPanel>




</Grid>

Answer 1

Here is what you want. You have update your panels everytime. And I personally, would add duration. But in this example you will notice your panels if you resize your window

<Grid>
    <Grid.Triggers>
        <EventTrigger SourceName="btnRed" RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard x:Name="StoryBoard1">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="sPanelRed"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="0"/>
                        <DoubleAnimation Storyboard.TargetName="sPanelBlue"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="-550"/>
                        <DoubleAnimation Storyboard.TargetName="sPanelBlack"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="-550"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger SourceName="btnBlue" RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard x:Name="StoryBoard2">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="sPanelRed"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="600" AutoReverse="False"/>
                        <DoubleAnimation Storyboard.TargetName="sPanelBlue"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="0"/>
                        <DoubleAnimation Storyboard.TargetName="sPanelBlack"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="-550"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger SourceName="btnBlack" RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard x:Name="StoryBoard3">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="sPanelRed"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="600"/>
                        <DoubleAnimation Storyboard.TargetName="sPanelBlue"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="600"/>
                        <DoubleAnimation Storyboard.TargetName="sPanelBlack"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="0"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Grid.Triggers>

    <Button x:Name="btnRed" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="20,0,0,0" Content="show red"></Button>
    <Button x:Name="btnBlue" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,359,0" Content="show blue"></Button>
    <Button x:Name="btnBlack" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,279,0" Content="show black"></Button>
    <StackPanel x:Name="sPanelRed" VerticalAlignment="Bottom" Orientation="Horizontal" Height="10" Background="Red">
        <StackPanel.RenderTransform>
            <TranslateTransform X="-550" Y="0"></TranslateTransform>
        </StackPanel.RenderTransform>
    </StackPanel>

    <StackPanel x:Name="sPanelBlue" VerticalAlignment="Bottom" Orientation="Horizontal" Height="10" Background="Blue">
        <StackPanel.RenderTransform>
            <TranslateTransform X="-550" Y="0"></TranslateTransform>
        </StackPanel.RenderTransform>
    </StackPanel>

    <StackPanel x:Name="sPanelBlack" VerticalAlignment="Bottom" Orientation="Horizontal" Height="10" Background="Black">
        <StackPanel.RenderTransform>
            <TranslateTransform X="-550" Y="0"></TranslateTransform>
        </StackPanel.RenderTransform>
    </StackPanel>
</Grid>