Animate width from right to left

Question

I want to animate my window coming in from the right edge of the screen.

This is my xaml

<Window x:Class="SidebarTest.DockWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="DockWindow" Width="275"         
    ShowInTaskbar="False" 
    WindowStyle="None" ResizeMode="NoResize"
    AllowsTransparency="True" Background="Transparent" >

<Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
        <BeginStoryboard>
            <Storyboard >
                <DoubleAnimation Duration="0:0:1.5" Storyboard.TargetProperty="Width" From="0" To="275" AccelerationRatio=".1"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Window.Triggers>

<Grid Background="#2F2F2F">

</Grid>

But it animates the width from left to right instead of right to left. Like this:

How can I change this so it comes in from the edge?

Answer 1

In your codebehind,

public DockWindow()
    {
        InitializeComponent();
        this.Left = this.Width + SystemParameters.FullPrimaryScreenWidth;
    }

Change your trigger to

<Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
        <BeginStoryboard>
            <Storyboard >
                <DoubleAnimation Duration="0:0:1.5" Storyboard.TargetProperty="Left"  To="10" AccelerationRatio=".1"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Window.Triggers>

Answer 2

Instead of trying to scale the width I might suggest leaving the width fixed and applying a TranslateTransform to the Window itself and in effect literally sliding it in from offscreen. A quick and dirty example provided below, you'll likely want to play with the value of the X coordinate and the KeyTime to get the effect just right but hopefully this is helpful to you. Cheers

<Window.RenderTransform>
    <TranslateTransform x:Name="SlideTheThingy" X="1000" />
</Window.RenderTransform>
<Window.Triggers>
  <EventTrigger RoutedEvent="Window.Loaded">
     <BeginStoryboard>
        <Storyboard>
           <DoubleAnimationUsingKeyFrames Storyboard.TargetName="SlideTheThingy"
                                          Storyboard.TargetProperty="X">
               <SplineDoubleKeyFrame KeyTime="0:0:1.25" Value="0" />
           </DoubleAnimationUsingKeyFrames>
        </Storyboard>
     </BeginStoryboard>
  </EventTrigger>
</Window.Triggers>

Answer 3

Windows are positioned by their Top-Left corner. So, when you animate your width and the position stays constant, the window will naturally grow to the right

In order to have the effect you're looking for, you also need to animate the position of the Window using the .Left property. If you want to snap the window to the right side of the screen and slide in from there, you need to start animating with a value of Left that matches your screen's width (and a zero-pixel width), and then animate to screenWidth - finalWidthOfWindow.

Answer 4

I actually figured it out, I needed to set the horizontal Alignment to right of the component I wanted to animate the size of. And it worked like a charm!