将相同样式应用于 XAML 页面中的多个按钮

Apply the same style to multiple buttons in a XAML page

我正在尝试在单击按钮时为按钮添加背景颜色,并在一段时间后恢复为原始颜色。我尝试创建一个 ResourceDictionary.xaml 并添加我的样式集并将其引用添加到 XAML 页面。似乎我的代码有问题。如果我将样式直接添加到按钮标签中,它会起作用。但不是通过 ResourceDictionary 。请帮忙。

ResourceDictionary.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:FantasyPlay">

<Style TargetType="Button">
    <Setter Property="Background" Value="Gainsboro" />
    <Style.Triggers>
        <Trigger Property="IsPressed" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" From="Orange" To="Gainsboro" Duration="0:0:0.50" AutoReverse="True" />
                        <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" From="Gainsboro"  To="Orange" Duration="0:0:0.1" AutoReverse="True" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>

我的XAML:

我像

一样引用了它
<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="ResourceDictionary.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>

WPF 控件有一个模板。

该按钮的模板可执行多种操作,其中之一是鼠标悬停效果。那会影响你的造型。

这里的样式与您的样式类似,但替换了按钮模板,因此当鼠标悬停在上面时您可以看到效果。

我使用的是红色而不是 Gainsboro,因此这可能不是一个完整的剪切和粘贴解决方案,但可以帮助您入门。

    <Style TargetType="Button">
        <Setter Property="Background" Value="Red"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                            BorderThickness="1"
                            Padding="4,2" 
                            BorderBrush="DarkGray" 
                            CornerRadius="3" 
                            Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" 
                                            To="Orange" 
                                            Duration="0:0:1" 
                                            AutoReverse="True" 
                                            FillBehavior="Stop" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

显然,这会替换您资源字典中的内容。先保留一份原件。

美好的一天,试试这个

<Trigger Property="IsPressed" Value="True">
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard  AutoReverse="True" >
                            <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" Duration="0:0:0"/>
                            <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="Orange" Duration="0:0:0.50"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>