Xaml 用户控件中的故事板

Question

我对 UserControl 的动画有疑问。

动画只运行一次。

如果我在另一个 window 中有我的 UserControl 的多个实例，将为 UserControl 的每个实例调用动画。

<UserControl x:Class="My_UserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" Margin="10,10">
    <UserControl.Resources>
        <Storyboard x:Key="CartTicket_Whip">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="UserControlGrid">
                <SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="-2"/>
                <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="UserControlGrid">
                <DiscreteBooleanKeyFrame KeyTime="0:0:0.1" Value="True"/>
                <DiscreteBooleanKeyFrame KeyTime="0:0:0.2" Value="False"/>
            </BooleanAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="DecrementButton">
            <BeginStoryboard Storyboard="{StaticResource CartTicket_Whip}"/>
        </EventTrigger>
    </UserControl.Triggers>

    <Grid x:Name="UserControlGrid" Height="60">
        <Grid.LayoutTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Grid.LayoutTransform>
        <Grid.Effect>
            <DropShadowEffect ShadowDepth="5" Color="Silver"></DropShadowEffect>
        </Grid.Effect>
        <DockPanel Background="White">
            <Button Name="DecrementButton" DockPanel.Dock="Left" Content="-" FontSize="40" Width="60">
            </Button>
            <TextBlock x:Name="TicketCount" DockPanel.Dock="Left" Text="2 x" VerticalAlignment="Center" HorizontalAlignment="Center"
                       FontSize="20" FontWeight="Bold" Margin="10">
                <TextBlock.Effect>
                    <DropShadowEffect ShadowDepth="4" Color="Silver"></DropShadowEffect>
                </TextBlock.Effect>
            </TextBlock>
            <StackPanel DockPanel.Dock="Left" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">
                <TextBlock x:Name="TicketName" Text="Ticket type 01" HorizontalAlignment="Center"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                    <TextBlock x:Name="PriceTxt" Grid.Column="2" Text="100" HorizontalAlignment="Center"/>
                    <TextBlock x:Name="PriceTxt_currency" Grid.Column="2" Text=" EUR" HorizontalAlignment="Center"/>
                </StackPanel>
            </StackPanel>
        </DockPanel>
    </Grid>
</UserControl>

Answer 1

您可以通过以下方式将 Storyboard 的 FillBehavior 属性设置为 Stop：

<UserControl.Resources>
    <Storyboard x:Key="CartTicket_Whip" FillBehavior="Stop">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="UserControlGrid">
            <SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="-2"/>
            <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="UserControlGrid">
            <DiscreteBooleanKeyFrame KeyTime="0:0:0.1" Value="True"/>
            <DiscreteBooleanKeyFrame KeyTime="0:0:0.2" Value="False"/>
        </BooleanAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

希望对您有所帮助。

Answer 2

好的，我明白了...抱歉，这是一个转储巧合！因为我改变了 Grid 元素的倾斜度，使其具有上下摆动的效果，孔用户控件具有这种效果。现在，在我的 window 中，我将其中的五个 UserControl 放在一个网格中，彼此下方... 所以有这样的效果，每次点击似乎 evrey UserControl 开始动画......

这里是新代码，我在其中为子元素（dockPanel）制作故事板：

<UserControl x:Class="MyUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" Margin="10,10">
    <UserControl.Resources>
        <Storyboard x:Key="CartTicket_Whip">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="UserControlDockPanel">
                <SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="-1.5"/>
                <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="DecrementButton">
            <BeginStoryboard Storyboard="{StaticResource CartTicket_Whip}"/>
        </EventTrigger>
    </UserControl.Triggers>

    <Grid x:Name="UserControlGrid" Height="60">
        <Grid.LayoutTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Grid.LayoutTransform>
        <Grid.Effect>
            <DropShadowEffect ShadowDepth="5" Color="Silver"></DropShadowEffect>
        </Grid.Effect>
        <DockPanel x:Name="UserControlDockPanel" Background="White" RenderTransformOrigin="0.5,0.5">
            <DockPanel.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </DockPanel.RenderTransform>
            <Button Name="DecrementButton" DockPanel.Dock="Left" Content="-" FontSize="40" Width="60">
            </Button>
            <TextBlock x:Name="TicketCount" DockPanel.Dock="Left" Text="2 x" VerticalAlignment="Center" HorizontalAlignment="Center"
                       FontSize="20" FontWeight="Bold" Margin="10">
                <TextBlock.Effect>
                    <DropShadowEffect ShadowDepth="4" Color="Silver"></DropShadowEffect>
                </TextBlock.Effect>
            </TextBlock>
            <StackPanel DockPanel.Dock="Left" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">
                <TextBlock x:Name="TicketName" Text="Ticket type 01" HorizontalAlignment="Center"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
                    <TextBlock x:Name="PriceTxt" Grid.Column="2" Text="100" HorizontalAlignment="Center"/>
                    <TextBlock x:Name="PriceTxt_currency" Grid.Column="2" Text=" EUR" HorizontalAlignment="Center"/>
                </StackPanel>
            </StackPanel>
        </DockPanel>
    </Grid>
</UserControl>

Xaml 用户控件中的故事板

Xaml Storyboard in a UserControl

wpf

xaml

user-controls