Setting Button FlatStyle in WPF

Question

I have just been learning about how styles and control templates in WPF can affect the appearance of buttons,

I'm trying to set the Button's FlatStyle, in the resources I've seen I can't find anything that tells me how I can do this, in Windows Forms this is set through FlatStyle = Flat.

How would one do this in WPF?

Solution 1

The ToolBar class defines a Style that makes Buttons look flat. An example of using it is:

<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"/>

This also works for a ToggleButton when using ToggleButtonStyleKey.

WPF lets you completely restyle controls to make them look like whatever you want, which is why it doesn't have such a specific FlatStyle property on the Button control.

Solution 2

Add the following to your Window/Page resources:

<Style BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" TargetType="Button"></Style>

It will apply the flat style to all buttons in that styles scope.

Comments

[Guilherme]

Which is more correct? To create a style for Button that mimics the ToolBar.ButtonStyle, or just use the code you've provided. Thanks Ed

[aroon65]

Depends on your scenario I think. You can also "derive" a style from the ToolBar Button style by using the Style.BasedOn property.

[newman]

This is a great tip. Thanks very much, Kent.

[thrag]

If I could up vote twice would. Never even occurred to me to poach a style from another control. Very nice tip.

[BP.]

In a pinch, this works pretty well. It is nice to use for a WPF Button control with an image as the sole content, as the image now will not shift up one pixel when you click and hold on the button. Thanks Kent.

[O. R. Mapper]

That's a good start. Unfortunately, WPF's toolbar button seems to show being focused in a way that can easily be confused with a "checked" toggle button (in fact, it looks a lot like a graphics bug, where the hover state is not correctly reset upon leaving the control) :-/

[O. R. Mapper]

Just noticed - setting the button's Focusable property to false will fix that, though. (Note that the button should still be reachable with keyboard shortcuts - it's just not included in the tab order, which is generally not something expected of a toolbar button.)