How do I make a button have a down state instead of an over state in WPF?

Question

I've just put a perfectly normal default button in a WPF window, expecting it to have some normal button states. But it's only reacting to mouse over and not mouse down. I only need it to have two states so I can do without the over state. How do I get it to react to the mouse button being pressed instead?

Here is my button:

<Button Width="380"
        Height="80"
        FontSize="30"
        FontFamily="VAG Rounded"
        Background="#337A05"
        Foreground="White"
        Margin="0,15"
        Content="BACK TO GAMES" />

score 1 · Answer 1 · answered Apr 10 '17 at 23:12

1

You have to change it's style / template. You'll need to get acquainted with ControlTemplates and VisualStates. Here's a tutorial.

answered Apr 10 '17 at 23:12

Laith

6,071
1
33
60

score 1 · Accepted Answer · answered Apr 11 '17 at 10:12

You can right-click on the Button in design mode in Visual Studio and choose Edit Template->Edit a Copy and then modify the default control template as per your requirements by for example remove the IsMouseOver trigger and change the value of the Background property setter in the IsPressed trigger:

<Window...>
<Window.Resources>
<Style x:Key="FocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="Red"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
    <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
    <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                    <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsDefaulted" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                    </Trigger>
                    <!--<Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                            </Trigger>-->
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                        <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
</Window.Resources>
<Grid>
    <Button Width="380"
    Height="80"
    FontSize="30"
    FontFamily="VAG Rounded"
    Background="#337A05"
    Foreground="White"
    Margin="0,15"
    Content="BACK TO GAMES"
    Style="{StaticResource ButtonStyle1}"/>
</Grid>
</Window>

And no, there is no property that you can simply set to do this :) You have to override the template.

Good lord. That's inconvenient. I'd think a functional button wouldn't be something a user-friendly IDE would make its users work so hard for. I was hoping a feature like this wouldn't take more XAML than the rest of my window combined. — Kyle Delaney, Apr 11 '17 at 15:11
You could put the style in a ResourceDictionary that you merge from your App.xaml. Then you will be able to reference it from all views in your application. — mm8, Apr 11 '17 at 15:12
Please remember to accept an answer if your issue has been solved: https://meta.stackexchange.com/questions/23138/how-to-accept-the-answer-on-stack-overflow — mm8, Apr 13 '17 at 10:03
Oh now I've discovered that it had a down state all along, but the color was so similar that I couldn't tell the difference. — Kyle Delaney, Apr 13 '17 at 19:28
No, there is no "shorter" way of doing this than to override the template. — mm8, Apr 18 '17 at 08:58

How do I make a button have a down state instead of an over state in WPF?

2 Answers2