使用 WPF，如何将动画与 ContentControl 链接？

Question

我不知道如何将 StoryBoard 成功链接到属于 ContentControl 的 TranslateTransform。当我尝试运行我的 StoryBoard 时，我总是收到以下错误：

“RenderTransform”属性未指向路径“(Children).[0].(Content).(0).(1)”中的 DependencyObject。

我想我不知道如何正确定义 TargetProperty！我尝试了许多不同的路径，但总是失败。这是我的代码的简化版本：

数据模板：

<DataTemplate x:Key="bdAnswer">
  <Border>
    <Border.RenderTransform>
      <TranslateTransform X="0" Y="0"/>
    </Border.RenderTransform>
  </Border>
</DataTemplate>

使用 DataTemplate 的 Canvas：

<Canvas x:Name="cnvGame">
  <ContentControl ContentTemplate="{StaticResource bdAnswer}" />
  <ContentControl ContentTemplate="{StaticResource bdAnswer}" />
</Canvas>

还有我的故事板：

<Storyboard x:Key="sbGame">
  <DoubleAnimationUsingKeyFrames 
     BeginTime="00:00:00" 
     Storyboard.TargetName="cnvGame" 
     Storyboard.TargetProperty="(Children)[0].(Content).(UIElement.RenderTransform).(TranslateTransform.Y)" />
</Storyboard>

非常感谢！

Answer 1

这完全取决于您打算如何触发该故事板。你有点模糊，所以它可能不适合你的情况。一切都包含在 DataTrigger 中，一切都在同一个范围内，并且通过这种方式很容易确定 translate Y 属性。

<DataTemplate x:Key="bdAnswer">
    <DataTemplate.Resources>
        <Storyboard x:Key="Storyboard1">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </DataTemplate.Resources>
    <Border x:Name="border" RenderTransformOrigin="0.5,0.5">
        <Border.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform Y="10"/>
            </TransformGroup>
        </Border.RenderTransform>
        <TextBlock Text="A Bar of Foo"/>
    </Border>
    <DataTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard x:Name="Storyboard1_BeginStoryboard" Storyboard="{StaticResource Storyboard1}"/>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <RemoveStoryboard BeginStoryboardName="Storyboard1_BeginStoryboard"/>
            </Trigger.ExitActions>
        </Trigger>
    </DataTemplate.Triggers>
</DataTemplate>

Answer 2

这是我用过的一个例子

    <DataTemplate x:Key="PM_ORDERSTemplate">
        <DataTemplate.Resources>
            <Storyboard x:Key="OnChecked1">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="OnUnchecked1">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="OnLoaded1">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </DataTemplate.Resources>
        <RadioButton x:Name="radioButton" GroupName="OrderSelect" BorderThickness="1,1,1,1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Style="{DynamicResource RadioButtonOrderPicker}" Checked="RadioButton_Checked" Template="{DynamicResource RadioButtonControlTemplate1}" Margin="5,5,5,0" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}">
            <Border x:Name="bOrderPicker" BorderThickness="5,5,5,5" BorderBrush="{DynamicResource DNP-MediaPlayerBorderColor}" CornerRadius="10,10,10,10" BitmapEffect="{DynamicResource DNP-OrderPickerShadow}" MinHeight="45" Padding="5" d:LayoutOverrides="Width, Height, GridBox" >
                <Border.Background>
                    <LinearGradientBrush EndPoint="125000,1704.038" StartPoint="125000,0" MappingMode="Absolute" SpreadMethod="Pad">
                        <GradientStop Color="#19FFFFFF" Offset="0"/>
                        <GradientStop Color="#34FFFFFF" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Image x:Name="image" Width="40" Height="40" Source="Res/Branding/icon_check.png" Margin="2"/>
                    <Grid Margin="0,0,0,0" d:LayoutOverrides="Width" Grid.Column="1" >
                       <Label Content="{Binding ORDER_ID.Value" />

                    </Grid>
                </Grid>
            </Border>
        </RadioButton>
        <DataTemplate.Triggers>
            <EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="radioButton">
                <BeginStoryboard x:Name="OnUnchecked1_BeginStoryboard1" Storyboard="{StaticResource OnLoaded1}"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="radioButton">
                <BeginStoryboard Storyboard="{StaticResource OnChecked1}"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="radioButton">
                <BeginStoryboard x:Name="OnUnchecked1_BeginStoryboard" Storyboard="{StaticResource OnUnchecked1}"/>
            </EventTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>