Question

我创建了这个故事板：

<Window.Resources>
    <Storyboard x:Key="OnMouseEnter1">
        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Btn" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#FF323232"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>

<Window.Triggers>
    <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="Btn">
        <BeginStoryboard x:Name="OnMouseEnter1_BeginStoryboard" Storyboard="{StaticResource OnMouseEnter1}"/>
    </EventTrigger>
</Window.Triggers>

如何在超过1个按钮而不仅仅是“Btn”上使用此故事板？我需要在Storyboard.TargetName中编写什么才能完成此任务？

Answer 1

在这种情况下，您最好创建或编辑按钮模板，并将故事板添加到该模板中。然后其他按钮将引用该模板并“继承”故事板以及模板中的所有样式和功能。

在下面的示例中，有两个按钮，每个按钮都引用ButtonStyle1。按钮样式1有一个触发器，用于启动MouseOver故事板。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:StackOverflow"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna" mc:Ignorable="d"
    x:Class="MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">
    <Window.Resources>
        <Storyboard x:Key="OnSizeChanged1"/>
        <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="OnMouseEnter1" AutoReverse="True">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Chrome">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true" ThemeColor="Metallic" Height="48.277" Margin="0,0,-37,0" RenderTransformOrigin="0.5,0.5">
                            <Microsoft_Windows_Themes:ButtonChrome.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Microsoft_Windows_Themes:ButtonChrome.RenderTransform>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Microsoft_Windows_Themes:ButtonChrome>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                <BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" DataContext="{Binding}">
        <Button Content="Button" Margin="193.093,39,251.093,0" VerticalAlignment="Top" Style="{DynamicResource ButtonStyle1}"/>
        <Button Content="Button" Margin="0,39,85.093,0" VerticalAlignment="Top" Style="{DynamicResource ButtonStyle1}" HorizontalAlignment="Right" Width="115.907"/>
    </Grid>
</Window>

在任何按钮上使用1个故事板

1 个答案: