CODEWITHSUNDEEP
wpfxamlwpf-animation
Robby Smet
Robby Smet

Reputation: 4661

Animate width from right to left

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:

enter image description here enter image description here

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

Upvotes: 3

Views: 5003

Answers (4)

Chris W.
Chris W.

Reputation: 23270

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>

Upvotes: 1

Dibesjr
Dibesjr

Reputation: 496

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!

Upvotes: 0

Mat J
Mat J

Reputation: 5632

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>

Upvotes: 3

Dan Puzey
Dan Puzey

Reputation: 34200

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.

Upvotes: 0

Related Questions