WPF – Panel Slide-In Animation From Left Or Right Side
Goal
Create a panel which slides in from the right when a button is clicked. The second goal is to have it all done in Xaml with no codebehind code. This article describes how to do that and explains the process behind what is needed in a step by step process. Page #2 below has a link to the full code if one does not need the explanation.
Process
The picture here shows the final code in action where a ToggleButton switches it’s state (IsChecked) between true and false. When that state changes to true it will have the panel slide in from the right and false will have it slide back.
The process described below can be done by placing the code snippets in Xaml and switching to the Design view of Visual Studio.
The Panel is a Blue Rectangle
For the example we will use a basic Rectangle and place it on the screen in a plain Grid. The panel will be blue an it will reside on the right side of the screen. Here is the initial code, note in future code examples I will omit the Marigin and the alignments for the sake of brevity; but those omitions are needed and will be required in the final code.
<Grid>
<Rectangle Fill="Blue" Width="100" Height="100" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,0,0" />
</Grid>Not Understanding TranslateTransform Is The First Hurdle
When researching and applying the concepts found, I did not understand the importance of TranslateTransform coordinates in this process. When I learned about this concept, other things fell into place.
What TranslateTransform process is, is that each object on the screen has a location, and that location is it’s anchor, so to speak. When one changes the TranslateTransform of an object, it moves it off its anchor and can be shifted right, left, up, or down by changes X and Y values from that initial position.
To achieve movement as mentioned one must provide the initial anchor point to the Rectangle. Below is a non-moved anchoring of the panel at "0,0" so it will appear the on the screen with 0 movement(s).
<Rectangle ...>
<Rectangle.RenderTransform>
<TranslateTransform X="0" Y="0" />
</Rectangle.RenderTransform>
</Rectangle>Start it off the screen
What we need now is to, adjust what we have, but start it out of sight to the right *side* of the screen. To achieve this we will change the above translate transform coordinates to instead move the X value and have the start in the off page position. To do that change the existing to this:
<TranslateTransform X="100" Y="0" />Play with it in design mode by changing the X and Y values and not how it moves around from its initial anchor point.
Set Associative Values
Currently our panel has a Width of 100 and we want to move it off the screen, *and move it back* by that amount; an offset slide amount. What we will do is in the Grid Resource section, *though it could be placed in the page’s Resource section*, is a constant which we will apply to the panel’s Width and the X as an initial offset value.
<Grid>
<Grid.Resources>
<system:Double x:Key="SlideOffSet">100</system:Double>
</Grid.Resources>
<Rectangle Width="{StaticResource SlideOffSet}" Height="100" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,0,0" >
<Rectangle.RenderTransform>
<TranslateTransform X="{StaticResource SlideOffSet}" Y="0" />
</Rectangle.RenderTransform>
</Rectangle>
</Grid>Check the design mode…it should still be off the screen and in the same dimensions as specified in the previous section.
Add a ToggleButton To Change States
We add a toggle button above the Rectangle panel because we want the panel to be drawn last; so to have it have the highest Zindex. So when it slides in, it will be above all other controls.
<Grid>
<ToggleButton Height="30" Width="60" Margin="0,20,0,20" x:Name="SlideState">
<TextBlock Text="{Binding IsChecked, ElementName=SlideState}"
FontSize="18"
VerticalAlignment="Center" HorizontalAlignment="Center" >
</TextBlock>
</ToggleButton>
<Rectangle ...The Animation Magic To Move It In and Out
To do this we will use Storyboards which when triggered will change the panel’s TranslateTransform X value to and from our slide offset. Go ahead and add the StoryBoards below under the SlideOffset setting in the Resources section.
<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> The above code basically changes the target control, in our case the Rectangle, and shifts the X transform anchor value.
Initiate The Dark Move Magic On Button Click
Believe it or not, but we are not finished. The final bit of code has us, again, putting code in the Resource section which will define a style for our Rectangle.
This style is a trigger which is based, bound, off of the value of the IsChecked and depending on its value, initiates the SlideLeft (to move into view) and the SlideRight to move it back off the screen.
<Style TargetType="{x:Type Rectangle}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, ElementName=SlideState}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource SlideLeft}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource SlideRight}" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>Final Thoughts & Code
On the following page (#2) is the full code for your perusal, with no changes from above. For me learning how to position a panel off the screen and then move it was trial and error of internet searches and reading StackOverflow posts. Each component on its own is understandable, but has to be consumed in a certain order. This post is that order in which I would have liked to have read first.
To further your understanding of this see Transforms Overview on Microsoft’s documentation.
Full Code on Page 2 —-(*if link to page #2 is not seen below, load the whole article and scroll down*)——–>
Pages: 1 2
