从右到左动画宽度

Question

我希望能让我的窗口从屏幕的右侧移入并进行动画效果。

这是我的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>

但它将宽度从左到右动画显示，而不是从右到左。像这样:

我该如何修改它以便从边缘进入？

- Robby Smet

Answer 1

在您的代码后台，

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

将您的触发器更改为：

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

- Mat J

Answer 2

与其尝试缩放宽度，我建议将宽度固定，并对Window应用TranslateTransform，实际上从屏幕外面滑动进来。下面提供了一个快速而简单的示例，您可能需要调整X坐标和KeyTime的值，以获得完美的效果，但希望这对您有所帮助。干杯！

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

- Chris W.

Answer 3

我终于想通了，我需要将要动画调整大小的组件的水平对齐设置为右侧。这样就可以完美地实现了！

- Dibesjr

Answer 4

窗口是通过它们的左上角定位的。因此，当您动画化宽度并且位置保持不变时，窗口自然会向右增长。

为了获得您想要的效果，您还需要使用 .Left 属性动画化窗口的位置。如果您想将窗口捕捉到屏幕的右侧并从那里滑入，则需要从与屏幕宽度匹配的值（和零像素宽度）开始动画化，并动画化到 screenWidth - finalWidthOfWindow。

- Dan Puzey