slide form behind windows in wpf

Question

Port this to WPF

Slide form base Windos Forms

I'm trying to port this to WPF, do you consider that this is possible to make in WPF?

Slide form base

I´m test this:

wpf-animation-how-do-i-make-it-slide-in

And this:

open-close-popup-with-slide-animation-from-custom-position

I want to create a drawer like macosx

enter image description here

Answer 1

If you're after the effect you showed on the first gif on the Winforms, where the drawer slides from underneath the form, to achieve similar effect on WPF there's a couple of possible problems you need to deal with.

First of all, in order to see the drawer outside the Window you need to set AllowTransparency to True and WindowStyle to None.

That's the first problem, cause you're now missing the default Window functionalities like Minimize, Maximize, Drag and Close. Not to mention that now there's also Window default DropShadow effect missing, and if you'd like to have it anyway, you need to create it yourself.

Second of all, responsivness, since WindowStyle is None, there's also missing Resize functionality of the Window. If you'd like to bring it back, there's even bigger problem cause now, you need to take great care of the layout and make sure all the values of the RenderTransform.TranslateLayout are correct in order to move the drawer to desired values when the size of the Window would change.

With all that said, here's my proposal, how the slide effect can be achieved.

<Window x:Class="WpfApp8.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp8"
        Title="MainWindow"
        WindowStyle="None"
        AllowsTransparency="True"
        Background="Transparent"
        mc:Ignorable="d">

    <Grid Width="400" Height="400">
        <Grid.Resources>
            <Storyboard x:Key="TransformBorder">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="movingBorder"
                                               Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.X)"
                                               Duration="0:0:0.3">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="400">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <QuadraticEase EasingMode="EaseInOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>

        <Border x:Name="movingBorder"
                Background="LightBlue"
                RenderTransformOrigin="0.5,0.5">
            <Border.RenderTransform>
                <TranslateTransform x:Name="translateTransform" X="0" Y="0"/>
            </Border.RenderTransform>
        </Border>

        <Border Background="White">
            <Button x:Name="btnSlide"
                    Width="100"
                    Height="50"
                    Content="Slide"/>
            <Border.Effect>
                <DropShadowEffect ShadowDepth="0"
                                  Opacity="0.5"
                                  BlurRadius="20"
                                  Color="Black"/>
            </Border.Effect>
        </Border>

        <Grid.Triggers>
            <EventTrigger RoutedEvent="Button.Click" SourceName="btnSlide">
                <BeginStoryboard Storyboard="{StaticResource TransformBorder}"/>
            </EventTrigger>
        </Grid.Triggers>
    </Grid>
</Window>

https://imgur.com/LB7EVEo