将UWP XAML动画转换为C#

时间:2016-08-17 19:37:42

标签: c# xaml animation uwp uwp-xaml

我有一个可用的XAML动画,用于为类似里程表的数字制作动画。我需要制作这个动画的六个几乎相同但不同的版本。据我所知,没有一种以这种方式重用动画XAML的好方法,所以为了保持代码DRY,我转向动画的编程创作。

在尝试将此XAML动画转换为C#时,我遇到了无法找到目标的问题:

  

未检测到已安装的组件。\ r \ n \ r \ n无法解析TargetName Digit1。

如果我拨打Storyboard.SetTarget()而不是Storyboard.SetTargetName(),我就不会再收到此异常,但屏幕上仍然没有任何结果。

有人可以告诉我在这个翻译中我做错了吗?

XAML:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      mc:Ignorable="d">

    <Page.Resources>
        <x:Double x:Key="OdometerMoveUpDistance">-101</x:Double>

        <Storyboard x:Name="OdometerUpStoryboard">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                                           Storyboard.TargetName="Digit1">
                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="{StaticResource OdometerMoveUpDistance}" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Page.Resources>

    <Canvas x:Name="Odometer" Width="100" Height="100">
        <TextBlock x:Name="Digit1" FontSize="100" Text="8">
            <TextBlock.RenderTransform><CompositeTransform /></TextBlock.RenderTransform>
        </TextBlock>
    </Canvas>

</Page>

C#:

private void Btn_Click(object sender, RoutedEventArgs e)
{
    DoubleAnimationUsingKeyFrames digitUp = CreateOdometerdigitAnim(this.Digit1, 0, -101);

    var storyboard = new Storyboard();
    storyboard.Children.Add(digitUp);
    storyboard.Begin(); // Exception happens on this line
}

private DoubleAnimationUsingKeyFrames CreateOdometerdigitAnim(TextBlock digit, double startPos, double endPos)
{
    var start = new EasingDoubleKeyFrame();
    start.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));
    start.Value = startPos;

    var end = new EasingDoubleKeyFrame();
    end.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(1000));
    end.Value = endPos;

    var anim = new DoubleAnimationUsingKeyFrames();
    anim.KeyFrames.Add(start);
    anim.KeyFrames.Add(end);

    Storyboard.SetTargetProperty(anim, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
    Storyboard.SetTargetName(anim, digit.Name);

    /* Using SetTarget instead of SetTargetName throws no exception but still does not animate */
    // Storyboard.SetTarget(anim, digit);

    return anim;
}

1 个答案:

答案 0 :(得分:2)

  

如果我调用Storyboard.SetTarget()而不是Storyboard.SetTargetName()我不再得到此异常,但屏幕上仍然没有任何反应。

您需要向CompositeTransform提供Digit1.RenderTransform个对象。您可以在XAML或代码隐藏中执行此操作:

如果在XAML中:

<TextBlock x:Name="Digit1" FontSize="100" Text="8">
    <TextBlock.RenderTransform>
        <CompositeTransform />
    </TextBlock.RenderTransform>
</TextBlock>

如果在Code-Behind中,请在storyboard.Begin()之前添加代码,如下所示:

Digit1.RenderTransform = new CompositeTransform();
...
storyboard.Begin();
  

在尝试将此XAML动画转换为C#时,我遇到了无法找到目标的问题:

     

未检测到已安装的组件。\ r \ n \ r \ n无法解析TargetName Digit1。

我可以使用您的代码重现问题。我尝试使用XAML定义的StoryBoard + Animation,一切正常。稍后需要通过内部渠道进行一些确认。