Avec WPF, comment lier une animation avec un ContentControl?

Question

Je ne sais pas comment lier avec succès un StoryBoard à un TranslateTransform qui fait partie d'un ContentControl. Je reçois toujours l'erreur suivante lorsque je tente de lancer mon StoryBoard:...

propriété 'RenderTransform' ne pointe pas vers un DependencyObject dans le chemin « (Enfants) [0] (contenu) (0) (. 1)'.

Je suppose que je ne sais pas comment définir correctement un objet TargetProperty! J'ai essayé beaucoup de chemins différents mais j'ai toujours échoué. Voici une version simplifiée de mon code:

Le DataTemplate:

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

La toile où le DataTemplate est utilisé:

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

Et mon StoryBoard:

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

Beaucoup Merci!

Answer 1

Tout dépend de la façon dont vous avez l'intention de déclencher ce Storyboard. Vous étiez plutôt vague, alors cela ne correspond peut-être pas à votre situation. Tout est contenu dans le DataTrigger, tout est dans la même portée et vérifier que la traduction de la propriété Y est facile de cette façon.

<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

Voici un exemple de quelque chose que j'ai utilisé

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