Reputation: 41
Please check the below example first
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>
Upvotes: 0
Views: 6245
Reputation: 10376
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>
Upvotes: 1
Reputation: 3318
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>
Upvotes: 0