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?

Does this answer your question? [wpf flat button](https://stackoverflow.com/questions/2064185/wpf-flat-button) — StayOnTarget, Jan 15 '21 at 14:00

score 147 · Accepted Answer · edited Jul 15 '21 at 14:27

147

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.

edited Jul 15 '21 at 14:27

StayOnTarget

11,743
10
52
81

answered Mar 30 '09 at 14:14

Kent Boogaart

175,602
35
392
393

2

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 – MrEdmundo Mar 30 '09 at 14:23
7

Depends on your scenario I think. You can also "derive" a style from the ToolBar Button style by using the Style.BasedOn property. – Kent Boogaart Mar 30 '09 at 15:11
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. – BP. Nov 01 '12 at 20:13
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 Dec 28 '13 at 14:59
3

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.) – O. R. Mapper Dec 28 '13 at 15:10

score 25 · Answer 2 · answered Oct 05 '12 at 10:19

25

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.

answered Oct 05 '12 at 10:19

PhonicUK

13,486
4
43
62

Setting Button FlatStyle in WPF

2 Answers2

Linked

Related