Start storyboard at the same time with one buttonclick in xaml - c#

I'm trying to make a flip animation, and have one that flips when it's a loaded RoutedEvent, but I want it to flip when the RoutedEvent is Button.Click. This is my code so far:
<Grid>
<Button Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5" Height="100">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform" ScaleX="-1" />
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Source="gurbe1.jpg"/>
</ControlTemplate>
</Button.Template>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard x:Name="Storyboard1" Completed="Storyboard1_Completed">
<DoubleAnimation To="0" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5" Height="100">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform2" ScaleX="0" />
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Source="gurbe2.jpg"/>
</ControlTemplate>
</Button.Template>
<Button.Triggers>
<EventTrigger RoutedEvent="loaded">
<BeginStoryboard>
<Storyboard x:Name="Storyboard2">
<DoubleAnimation From="0" To="1" BeginTime="0:0:2.3" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform2" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
So is there a way to start the storyboards with just one click?


So i think i got it:
XAML
<Window.Resources>
<BeginStoryboard x:Key="begin">
<Storyboard x:Name="Storyboard1">
<DoubleAnimation To="0" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard x:Key="twa">
<Storyboard x:Name="Storyboard2">
<DoubleAnimation From="0" To="1" BeginTime="0:0:2.3" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform2" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</Window.Resources>
<Grid>
<Button x:Name="button1" Width="100" Click="button1_Click" RenderTransformOrigin="0.5,0.5" Height="100">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform" ScaleX="-1" />
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Source="gurbe1.jpg"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Click="button1_Click" RenderTransformOrigin="0.5,0.5" Height="100">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform2" ScaleX="0" />
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Source="gurbe2.jpg"/>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
C#
private void Clicked_Button(object sender, RoutedEventArgs e)
{
BeginStoryboard sb = this.FindResource("begin2") as BeginStoryboard;
sb.Storyboard.Begin();
}

Related

How do i change the image in a "flip" animation in XAML?

So I am trying to make an animation for a memory game project. The animation I am having trouble with is the flip animation. I have no problem making the image flip, but I want to make it change the image after the scale.x went from -1 to 0. This is what I have so far:
<Window.Resources>
<ControlTemplate TargetType="Button" x:Key="ImageButton">
<Image Source="gurbe1.jpg"
x:Name="image"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}" />
</ControlTemplate>
</Window.Resources>
<Grid>
<Button Template="{StaticResource ImageButton}"
Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform" ScaleX="-1" />
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
<DoubleAnimation To="1" BeginTime="0:0:1" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
</Window>
I already looked on here and tried some stuff, but I couldn't get it to work :
xaml change image source
How can I do multiple animations in a single storyboard in C#/XAML?

For people also having this problem, it's as simple as this:
<Grid>
<Button Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5" Height="100">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform" ScaleX="-1" />
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Source="gurbe1.jpg"/>
</ControlTemplate>
</Button.Template>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Width="100" Click="Button_Click" RenderTransformOrigin="0.5,0.5" Height="100">
<Button.RenderTransform>
<ScaleTransform x:Name="AnimatedScaleTransform2" ScaleX="0" />
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Source="gurbe2.jpg"/>
</ControlTemplate>
</Button.Template>
<Button.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="1" BeginTime="0:0:2.3" Duration="0:0:1" Storyboard.TargetName="AnimatedScaleTransform2" Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
It's not smooth atm, but you can get pretty close by adjusting the begin time

How to make animation start at hovering - storyboard

How to make the animation start of the TextBlock when entering (hovering) the button
In TextBlock I want that the <EventTrigger RoutedEvent will be in Input2 at MouseEnter, How can I do that
<EventTrigger RoutedEvent=Input2.MouseEnter doesn't recognized
The button:
<Button Grid.Row="0" Name="Input2" Click="Input_Click" MouseEnter="Input_MouseEnter" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}">
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source= "C:\Users\Me\input.png"
Width="40"
Height="40"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
The TextBlock:
<TextBlock Grid.Row="0" Name="Input_Name1" Text="Input" FontSize="40" FontFamily="/10KHours;component/Font_count/#Dancing Script" VerticalAlignment="Center" Height="48" Margin="65.346,33.6,-102.081,36">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Input_Name1"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="true" RepeatBehavior="1x">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>

The basic idea to change the style of the TextBlock is totally correct. Add a DataTrigger and bind it to the the IsMouseOver of the Button you are going to hover. Using the IsMouseOver is propaply the simplest way to get the desired information. Here is a minimal example:
<Button x:Name="btn" Content="Hover me"/>
<TextBlock x:Name="tb" Text="Input">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=btn, Path=IsMouseOver}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="true" RepeatBehavior="1x">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>

How to make blinking rectangle stroke in WPF

Below my rectangle in WPF:
<Rectangle Margin="5,0" HorizontalAlignment="Left" Width="380" Height="25" Fill="LightYellow" Stroke="Orange" StrokeThickness="2" RadiusX="8" RadiusY="8"/>
I would like to start bliking for some seconds (and then stop) the rectangle stroke property when a property "StartBlinking" in view model changes from false to true.
I would like to implement storyboard in xaml not in c# code.
How can I do this?
I have tried this but not working:
<Rectangle Margin="5,0" HorizontalAlignment="Left" Width="380" Height="25" Fill="LightYellow" Stroke="Orange" StrokeThickness="2" RadiusX="8" RadiusY="8">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Style.Resources>
<Storyboard x:Key="flashAnimation" >
<DoubleAnimation Storyboard.TargetProperty="Stroke" From="1" To="0" AutoReverse="True" Duration="0:0:0.5" RepeatBehavior="Forever" />
</Storyboard>
</Style.Resources>
</Style>
</Rectangle.Style>
</Rectangle>
I am using C# and .NET 3.5 in Visual Studio 2008.

You could animate the Opacity property of the Stroke using a DataTrigger and a Storyboard:
<Rectangle Margin="5,0" HorizontalAlignment="Left" Width="380" Height="25" Fill="LightYellow"
Stroke="Orange" StrokeThickness="2" RadiusX="8" RadiusY="8">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<DataTrigger Binding="{Binding StartBlinking}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Stroke.(SolidColorBrush.Opacity)"
To="0" AutoReverse="True" Duration="0:0:0.5" RepeatBehavior="6x" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Stroke.(SolidColorBrush.Opacity)"
To="1" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>

StartStoryboard on another control

I have this xaml:
<Window x:Class="StoryboardTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="RenderTransformOrigin" Value="0.5 0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform x:Name="rt" Angle="0"/>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="Start">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="0" To="100" Storyboard.TargetName="pbar" Storyboard.TargetProperty="Value" Duration="0:0:6"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Grid.Row="1" Content="1" x:Name="btn1">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard x:Name="bs1">
<Storyboard>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Duration="0:0:1" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Grid.Row="1" Grid.Column="1" Content="2" x:Name="btn2">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard x:Name="bs2">
<Storyboard>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Duration="0:0:1" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Grid.Row="1" Grid.Column="2" Content="3" x:Name="btn3">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard x:Name="bs3">
<Storyboard>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Duration="0:0:1" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<ProgressBar x:Name="pbar" Maximum="100" Grid.Row="2" Grid.ColumnSpan="3"/>
</Grid>
</Window>
As you can see there are 4 buttons(Start button - the main one, buttons 1, 2 and 3) and a progress bar. When I click buttons 1,2 or 3 they rotate slightly. My question is how can I trigger that rotations(which are described by respective storyboards) in Start's button EventTrigger? Is it possible to achieve this not writing 3 other storyboards in the Start button but invoking already attached storyboards for buttons 1,2,3 in xaml only?

<Window.Resources>
<Storyboard x:Key="StoryboardName">
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Storyboard.TargetName="btn1" Duration="0:0:1" AutoReverse="True"/>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Storyboard.TargetName="btn2" Duration="0:0:1" AutoReverse="True"/>
<DoubleAnimation From="0" To="90" Storyboard.TargetProperty="RenderTransform.Angle" Storyboard.TargetName="btn3" Duration="0:0:1" AutoReverse="True"/>
</Storyboard>
</Window.Resources>
<Button Grid.Column="1" Content="Start">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource StoryboardName}"/>
</EventTrigger>
</Button.Triggers>
</Button>
Doubleanimations declared in storyboard will run simultaneously.
<Button>
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=start, Path=IsPressed}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
...
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>

move in and move out animation in wpf

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>

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>

I did simplify your animation to something like this so you can work on it :
<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" ></Button>
<Button x:Name="btnOther" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="70,0,0,0" Content="OTher" ></Button>
<Button x:Name="btnCAIIB" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="150,0,0,0" Content="CAIIB" ></Button>
<Grid x:Name="sPanelPNB" Height="100" VerticalAlignment="Bottom" >
<Border Background="Aquamarine"></Border>
</Grid>
<Grid x:Name="sPanelOtherBank" Height="100" VerticalAlignment="Bottom" >
<Grid.RenderTransform>
<TranslateTransform X="-550" Y="0"></TranslateTransform>
</Grid.RenderTransform>
<Border Background="Blue"></Border>
</Grid>
<Grid x:Name="sPanelCAIIB" Height="100" VerticalAlignment="Bottom" >
<Grid.RenderTransform>
<TranslateTransform X="-550" Y="0"></TranslateTransform>
</Grid.RenderTransform>
<Border Background="Violet"></Border>
</Grid>
</Grid>

Categories