WPF – Panel Slide-In Animation From Left Or Right Side
Full Code
<Grid>
<Grid.Resources>
<system:Double x:Key="SlideOffSet">100</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>
<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>
</Grid.Resources>
<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 Fill="Blue" 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>
Pages: 1 2