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>
Share

Pages: 1 2

Leave a Reply