Apply the same style to multiple buttons in a XAML page

Question

I am trying to add a background color to a button whenever it is clicked and restoring to its original color after some time. I tried to create a ResourceDictionary.xaml and added my style set and added its reference to a XAML page. Seems something is wrong in my code. If I add the style directly into the button tags, it works.. But not via ResourceDictionary . Please help.

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>

MyXAML:

I have referenced it like

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="ResourceDictionary.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>

score 0 · Answer 1 · answered Oct 01 '19 at 12:09

WPF controls have a template.

The button's template does various things, one of which is a mouseover effect. That will interfere with your styling.

Here's a style which works similarly to yours but replaces the template of buttons so you can see the effect when the mouse is over it.

I've used red rather than Gainsboro so this might not be a total cut and paste solution but is to get you started.

    <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>

Obviously, this replaces what you have in your resource dictionary. Keep a copy of your original first.

score 0 · Accepted Answer · answered Oct 01 '19 at 12:13

Good day, let try this

<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>

Thanks @Daniil Rudchenko. This works like a charm & a simple one! — , Oct 02 '19 at 14:32

Apply the same style to multiple buttons in a XAML page

2 Answers2