如何解决 XAML C# 中的动画问题？

Question

我想为按钮上的反射设置动画。 你能告诉我为什么它不起作用吗？ 我的猜测是，重点是我的元素是嵌套的，因此它不能引用它来制作动画。

<Grid Background="Black">
        <Grid.Resources>
            <Storyboard
                x:Name="animation"
                Storyboard.TargetName="btn"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.X)">
                <DoubleAnimation
                    RepeatBehavior="Forever"
                    From="-100"
                    To="100"
                    Duration="0:0:1" />
            </Storyboard>
        </Grid.Resources>
        <Button x:Name="btn"
            Width="200"
            Height="50"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Button.Template>
                <ControlTemplate>
                    <Grid Background="LightGreen">
                        <TextBlock
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Text="TRY FOR FREE" />
                        <Grid
                            x:Name="grid"
                            Width="20"
                            Height="70">
                            <Grid.Background>
                                <LinearGradientBrush StartPoint="0,2" EndPoint="0,0">
                                    <GradientStop Offset="1.1" Color="Yellow" />
                                    <GradientStop Offset="0.5" Color="Transparent" />
                                </LinearGradientBrush>
                            </Grid.Background>
                            <Grid.RenderTransform>
                                <TransformGroup>
                                    <RotateTransform Angle="30" CenterX="20" />
                                    <TranslateTransform x:Name="transform" X="0" />
                                </TransformGroup>
                            </Grid.RenderTransform>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>

在此处输入图片说明

Answer 1

你有两个问题。 一个是您已经说过的，即您已在无法访问Storyboard的位置定义了Storyboard.TargetProperty 。 您的第二个问题是您没有显示任何 XAML 或任何触发动画开始的代码。 这是一个示例，显示了Storyboard的更正位置，以及一个EventTrigger ，用于在加载Grid时启动Storyboard 。

编辑：这是一个 WPF 解决方案。 对于 UWP，请继续滚动。

<Grid Background="Black">
    <Button x:Name="btn" Width="200" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button.Template>
            <ControlTemplate>
                <Grid Background="LightGreen">
                    <TextBlock
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Text="TRY FOR FREE" />
                    <Grid
                        x:Name="grid"
                        Width="20"
                        Height="70">
                        <Grid.Resources>
                            <Storyboard x:Key="animateme" x:Name="animation"
                                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.X)">
                                <DoubleAnimation RepeatBehavior="Forever" From="-100" To="100" Duration="0:0:1" />
                            </Storyboard>
                        </Grid.Resources>
                        <Grid.Background>
                            <LinearGradientBrush StartPoint="0,2" EndPoint="0,0">
                                <GradientStop Offset="1.1" Color="Yellow" />
                                <GradientStop Offset="0.5" Color="Transparent" />
                            </LinearGradientBrush>
                        </Grid.Background>
                        <Grid.RenderTransform>
                            <TransformGroup>
                                <RotateTransform Angle="30" CenterX="20" />
                                <TranslateTransform x:Name="transform" X="0" />
                            </TransformGroup>
                        </Grid.RenderTransform>
                        <Grid.Triggers>
                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                <EventTrigger.Actions>
                                    <BeginStoryboard Storyboard="{StaticResource animateme}"/>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Grid.Triggers>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>

这是一个 UWP 解决方案

<Grid Background="Black">
    <Button x:Name="btn" Width="200" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button.Template>
            <ControlTemplate>
                <Grid Background="LightGreen">
                    <TextBlock
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Text="TRY FOR FREE" />
                    <Grid
                        x:Name="grid"
                        Width="20"
                        Height="70">
                        <Grid.Background>
                            <LinearGradientBrush StartPoint="0,2" EndPoint="0,0">
                                <GradientStop Offset="1.1" Color="Yellow" />
                                <GradientStop Offset="0.5" Color="Transparent" />
                            </LinearGradientBrush>
                        </Grid.Background>
                        <Grid.RenderTransform>
                            <TransformGroup>
                                <RotateTransform Angle="30" CenterX="20" />
                                <TranslateTransform x:Name="transform" X="0" />
                            </TransformGroup>
                        </Grid.RenderTransform>
                        <Grid.Triggers>
                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard x:Name="animation" Storyboard.TargetName="grid"
                                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.X)">
                                            <DoubleAnimation RepeatBehavior="Forever" From="-100" To="100" Duration="0:0:1" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Grid.Triggers>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>