使用WPF，如何將動畫與ContentControl關聯？

Question

我不知道如何成功將StoryBoard鏈接到屬於ContentControl一部分的TranslateTransform。我總是得到以下錯誤，當我嘗試運行我的故事板：。

'的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 x:Key="sbGame"> 
    <DoubleAnimationUsingKeyFrames 
    BeginTime="00:00:00" 
    Storyboard.TargetName="cnvGame" 
    Storyboard.TargetProperty="(Children)[0].(Content).(UIElement.RenderTransform).(TranslateTransform.Y)" /> 
</Storyboard> 

許多謝謝！

Answer 1

這一切都取決於你打算如何觸發該Storyboard。你有點模糊，所以可能不適合你的情況。一切都包含在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>