用户控件XAML动画化

Question

用户控件XAML动画化

4

我一直在尝试为UserControl添加动画效果，但一直没有成功，想知道是否有人可以帮忙？

我有一个UserControl，它简单地包含有关记录的信息。它以盒子的形式出现在现有页面上，但我想让这个盒子以简单的动画效果展开。我正在尝试让盒子以扩展动画效果打开，而不是只是出现。

以下是我一直在努力的代码。

<UserControl Name="RecordViewerUserControl" 
            xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
            x:Class="VisionWare.MasterDataServices.Silverlight.UI.Common.RecordViewer"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
            xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
            xmlns:conv="clr-namespace:VisionWare.MasterDataServices.Silverlight.UI.Converters"
            xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
            mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

            Height="490"
            Width="600"
            Margin="0,0,0,0">





<UserControl.Resources>
    <conv:DateConverter x:Key="dateConverter" />
    <conv:BoolToVisibilityConverter x:Key="visibilityConverter" />
    <conv:EntityIdToUrlConverter x:Key="urlConverter"/>
    <conv:FileConverter x:Key="fileConverter"/>
    <conv:AlertImageURLConverter x:Key="alertConverter"/>

    <Style TargetType="UserControl" x:Key="CustomUserControlStyle">
        <Setter Property="Effect">
            <Setter.Value>
    <BeginStoryboard>
        <Storyboard>
            <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleX">
                <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(RenderTransform).(Children)[0].ScaleY">
                <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1.05" />
                <SplineDoubleKeyFrame KeyTime="00:00:00.45" Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </BeginStoryboard>
            </Setter.Value>
        </Setter>
    </Style>

</UserControl.Resources>

我已根据@jrb的建议修改了我的代码...

<UserControl.Triggers>
    <EventTrigger RoutedEvent="UserControl.Loaded">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="RecordViewerUserControl" Storyboard.TargetProperty="Width" To="600"/>
                    <DoubleAnimation Storyboard.TargetName="RecordViewerUserControl" Storyboard.TargetProperty="Height" To="490"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</UserControl.Triggers>

我已在初始的UserControl开放标签后插入了这段代码。当应用运行时不再报错，但它似乎并没有起到作用。

你有什么想法吗？我是否在后台代码中漏掉了什么？

- Dave

为什么不直接使用 ChildWindow？如何像弹出框一样打开这个 UserControl？ - Justin XL

嘿，谢谢回复。我没有使用子窗口，因为我需要保持焦点在弹出的用户控件后面的主窗口上（您仍然可以选择主用户控件上的记录，基本上是一个弹出窗口）。 - Dave

打开这个用户控件的代码是什么？ - Justin XL

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thumbmunkeys · Answer 1

我认为你的动画数值是错误的，最后应该有一个值为1（100%大小），而不是0。

你为什么在LayoutRoot的第一个子元素上进行动画？你应该将动画目标设置为RecordViewerUserControl。

- jrb · Answer 2

我建议您在用户控件上测试将大小设置为1，然后使用事件触发器“Loaded”（我想是这个）和一个简单的DoubleAnimation来增加控件的大小。

<EventTrigger RoutedEvent="Loaded">

这是一个可工作的示例，您可以在kaxaml中进行测试。

<Page
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Width="1"
     Height="1"
     Background="Black">
     <Page.Triggers>
          <EventTrigger RoutedEvent="Loaded">
               <EventTrigger.Actions>
                    <BeginStoryboard>
                         <Storyboard>
                              <DoubleAnimation
                                   Storyboard.TargetProperty="Width"
                                   To="200"/>
                              <DoubleAnimation
                                   Storyboard.TargetProperty="Height"
                                   To="200"/>
                         </Storyboard>
                    </BeginStoryboard>
               </EventTrigger.Actions>
          </EventTrigger>
     </Page.Triggers>
     <Grid>
     </Grid>
</Page>