С WPF, как связать анимацию с ContentControl?

Question

Я не знаю, как правильно связать StoryBoard с формулой TranslateTransform, которая является частью ContentControl. Я всегда получаю следующее сообщение об ошибке при попытке запустить мою раскадровку:....

свойства 'RenderTransform' не указует на DependencyObject в пути «(дети) [0] (Содержание) (0) (1)».

Я думаю, что я не знаю, как правильно определить TargetProperty! Я пробовал много разных путей, но всегда терпел неудачу. Вот упрощенная версия моего кода:

DataTemplate:

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

Холст, где используется DataTemplate:

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

И мой StoryBoard:

<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, все находится в пределах одного и того же объема и выясняет, что переводить свойство 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>