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>