如何将情节提要动画应用于多个xaml元素

Question

I have created a storyboard animation, and it works for my one XAML element, however how can i apply it to multiple XAML elements ones?

here is the XAML:

<Storyboard x:Name="FlipOpen">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="Front">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-90"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="Back">
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-270"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-360"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

and the controlled XAML:

                        <StackPanel Background="Blue" Width="420" x:Name="Front">
                            <StackPanel.Projection>
                                <PlaneProjection/>
                            </StackPanel.Projection>
                            <TextBlock Text="Front" FontSize="25" Height="40"/>
                            <TextBlock Text="alcim" FontSize="10" Height=" 20"/>
                        </StackPanel>

                        <StackPanel x:Name="Back" Width="420" Background="Red">
                            <StackPanel.Projection>
                                <PlaneProjection RotationY="-270" />
                            </StackPanel.Projection>
                            <TextBlock Text="Hátlap"/>
                        </StackPanel>
                    </Grid>

How can i create the controlled party in code (multiple times), and then apply the storyboard to it? because they can't have the same x:Name property...

Answer 1

Define your storyboard as a resource and reference it from the controls you want animate or from a style.

  <Storyboard x:Key="FlipOpenStoryboard">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-90"/>
        </DoubleAnimationUsingKeyFrames>
   </Storyboard>

Define in the stack panel when you want start the animation.

    <StackPanel Background="Blue" Width="420" x:Name="Front">
        <StackPanel.Triggers>
            <EventTrigger RoutedEvent="StackPanel.Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard Storyboard="{StaticResource FlipOpenStoryboard}" />
                </EventTrigger.Actions>
            </EventTrigger>
        </StackPanel.Triggers>
        <StackPanel.Projection>
            <PlaneProjection/>
        </StackPanel.Projection>

        <TextBlock Text="Front" FontSize="25" Height="40"/>
        <TextBlock Text="alcim" FontSize="10" Height=" 20"/>
    </StackPanel>

I don't have the PlaneProjection control so below I provide you a working example of animating the Height of the panel.

The animation:

<Storyboard x:Key="FlipOpenStoryboard">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height" >
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:4" Value="500"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

The panel:

<StackPanel Background="Blue" Width="420" Height="100">
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="StackPanel.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard Storyboard="{StaticResource FlipOpenStoryboard}" />
            </EventTrigger.Actions>
        </EventTrigger>
    </StackPanel.Triggers>

    <TextBlock Text="Front" FontSize="25" Height="40"/>
    <TextBlock Text="alcim" FontSize="10" Height=" 20"/>
</StackPanel>