With WPF, how to link an animation with a ContentControl?

Question

I don't know how to link successfully a StoryBoard to a TranslateTransform that is part of a ContentControl. I always get the following error when I try to run my StoryBoard:

'RenderTransform' property does not point to a DependencyObject in path '(Children).[0].(Content).(0).(1)'.

I guess I don't know how to define a TargetProperty properly! I tried many different paths but always failed. Here is a simplified version of my code:

The DataTemplate:

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

The Canvas where the DataTemplate is used:

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

And my StoryBoard:

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

Many thanks!

Answer 1

That all depends on how you intend to trigger that Storyboard. You were kind of vague, so it might not fit your situation. Everything is contained within the DataTrigger, everything is within the same scope and ascertaining that translate Y property is easy this way.

<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

Here is an example of something I have used

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