将故事板制作成可以在WPF中由多个控件使用的资源

Question

我有一个可以运行的动画，现在我正在将其放置在Apps.xaml中的application.Resources下，并使用所有必要的绑定，但它无法工作。在绑定过程中我是否漏掉了什么？绑定Storyboard.Targetname的正确方法是什么？

<Storyboard x:Key="RotateIn">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="button2">
                <EasingDoubleKeyFrame KeyTime="0" Value="-100"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="button2">
                <EasingDoubleKeyFrame KeyTime="0" Value="50"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="button2">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimation Storyboard.TargetName="AnimatedRotateTransform" 
                                                 Storyboard.TargetProperty="Angle" 
                                                 By="10"        
                                                 To="360" 
                                                 Duration="0:0:0.7" 
                                                 FillBehavior="Stop" />
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="textBlock">
                <EasingDoubleKeyFrame KeyTime="0" Value="90"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

<Button Grid.Column="1" Name="btn2" Width="150" Height="150" Background="gray">
                <StackPanel >
                    <Image Source="{StaticResource img2}" x:Name="button2" RenderTransformOrigin=".5,.5">
                        <Image.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform Angle="0" x:Name="AnimatedRotateTransform"/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </Image.RenderTransform>
                    </Image>
                    <TextBlock x:Name="textBlock" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5">
                        <TextBlock.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </TextBlock.RenderTransform>Rotate In</TextBlock>
                </StackPanel>
            </Button>

上面是我为单个控件创建的工作动画。但是，当我试图将其制作成一个可以像此处这样重复使用的资源时，(H.B.)的答案是：

<Application.Resources>
        <ResourceDictionary>
            <Storyboard x:Key="BindingRotate" x:Shared="False">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="{DynamicResource AnimationTarget}">
                    <EasingDoubleKeyFrame KeyTime="0" Value="-100"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="{DynamicResource AnimationTarget}">
                    <EasingDoubleKeyFrame KeyTime="0" Value="50"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="{DynamicResource AnimationTarget}">
                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimation Storyboard.TargetName="{DynamicResource AnimationTarget1}"
                                                 Storyboard.TargetProperty="Angle" 
                                                 By="10"        
                                                 To="360" 
                                                 Duration="0:0:0.7" 
                                                 FillBehavior="Stop" />
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="{DynamicResource AnimationTarget2}">
                    <EasingDoubleKeyFrame KeyTime="0" Value="90"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
                </DoubleAnimationUsingKeyFrames>

            </Storyboard>
        </ResourceDictionary>

    </Application.Resources>

<Button Grid.Column="1" Name="btn2" Width="150" Height="150" Background="gray">
                <StackPanel >
                    <Image Source="{StaticResource img2}" x:Name="button2" RenderTransformOrigin=".5,.5">
                        <Image.Resources>
                            <sys:String x:Key="AnimationTarget">button</sys:String>
                        </Image.Resources>
                        <Image.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform Angle="0" x:Name="AnimationTarget1">

                                </RotateTransform>
                                <TranslateTransform/>
                            </TransformGroup>
                        </Image.RenderTransform>
                    </Image>
                    <TextBlock x:Name="textBlock" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Text="Rotate In">
                        <TextBlock HorizontalAlignment="Center" Text="Expand In">
                            <TextBlock.Resources>
                                <sys:String x:Key="AnimationTarget2">button</sys:String>
                            </TextBlock.Resources>
                        </TextBlock>
                    </TextBlock>
                </StackPanel>
                <Button.Triggers>
                    <EventTrigger RoutedEvent="ButtonBase.MouseEnter">
                        <BeginStoryboard Storyboard="{StaticResource BindingRotate}"/>
                    </EventTrigger>
                </Button.Triggers>
            </Button>

''[未知]' 属性在路径 '(0).(1)[3].(2)' 中没有指向 DependencyObject。'

我只得到了一个异常。我完全按照回答中所述的去做，但无法找到相关主题，请告诉我我的绑定缺少什么。

另外一个问题是，有没有办法让我设置

<sys:String x:Key="AnimationTarget1">button</sys:String>

我像对其他控件一样将其放入<RotateTransform.Resources>中吗？感谢您的时间，我对WPF还很陌生。

- ben Lim

Answer 1

在定义Storyboard的Button中，通过在Resources属性中定义AnimationTarget、AnimationTarget1和AnimationTarget2等资源来引用它们。以下方法适用于我：

<Button Grid.Column="1" Name="btn2" Width="150" Height="150" Background="gray">
    <Button.Resources>
        <sys:String x:Key="AnimationTarget">button2</sys:String>
        <sys:String x:Key="AnimationTarget1">AnimatedRotateTransform</sys:String>
        <sys:String x:Key="AnimationTarget2">button2</sys:String>
    </Button.Resources>
    <StackPanel >
        <Image Source="{StaticResource img2}" x:Name="button2" RenderTransformOrigin=".5,.5">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <TextBlock x:Name="textBlock" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Text="Rotate In">
            <TextBlock HorizontalAlignment="Center" Text="Expand In" />
        </TextBlock>
    </StackPanel>
    <Button.Triggers>
        <EventTrigger RoutedEvent="ButtonBase.MouseEnter">
            <BeginStoryboard Storyboard="{StaticResource BindingRotate}"/>
        </EventTrigger>
    </Button.Triggers>
</Button>

- mm8