26

How to make a button flat style in wpf? I've tried BasedOn property but it does not work.

ASh
  • 34,632
  • 9
  • 60
  • 82
niao
  • 4,972
  • 19
  • 66
  • 114
  • 8
    See also: http://stackoverflow.com/questions/697381/setting-button-flatstyle-in-wpf especially if you like one-liners. – greenoldman Apr 24 '11 at 11:07
  • Does this answer your question? [Setting Button FlatStyle in WPF](https://stackoverflow.com/questions/697381/setting-button-flatstyle-in-wpf) – StayOnTarget Jul 15 '21 at 14:27

6 Answers6

45

More simple solution here using already defined ToolBar button style :

<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
        Content="You know I'm flat..." />
G. Ghez
  • 3,429
  • 2
  • 21
  • 18
26

Just to get you started:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <Style x:Key="Flat">
        <Setter Property="Control.Background" Value="{x:Null}" />
        <Setter Property="Control.BorderBrush" Value="{x:Null}" />
        <Style.Triggers>
            <Trigger Property="Control.IsMouseOver" Value="True">
                <Setter Property="Control.Background" Value="{x:Null}" />
                <Setter Property="Control.BorderBrush" Value="{x:Null}" />
                <Setter Property="Control.FontWeight" Value="Bold" />
            </Trigger>
            <Trigger Property="Control.IsFocused" Value="True">
                <Setter Property="Control.FontWeight" Value="Bold" />
            </Trigger>
        </Style.Triggers>
    </Style>
  </Page.Resources>
  <StackPanel>  
    <Button Style="{StaticResource Flat}">Hello</Button>
  </StackPanel>
</Page>

Then you have one millon other ways to do it, even changing the ControlTemplate to complete redefine the Button

Eduardo Molteni
  • 38,786
  • 23
  • 141
  • 206
  • 3
    Cant get this to work. Your example style does not remove the border or background of a Button. The only thing that works from this example is that the button text becomes bold on hover. – Johncl Nov 28 '11 at 15:25
  • @Johncl see my answer below – David Sherret Jan 20 '13 at 05:15
8

To add to Eduardo's answer, this solution gets rid of any extra styling such as the border around the button if the thickness is set to 0.

You can add extra styling as needed:

<Style x:Key="Flat" TargetType="Button">
    <Setter Property="Background" Value="{x:Null}" />
    <Setter Property="BorderBrush" Value="{x:Null}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsKeyboardFocused" Value="true">
                    </Trigger>
                    <Trigger Property="IsDefaulted" Value="true">
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                    </Trigger>
                    <Trigger Property="ToggleButton.IsChecked" Value="true">
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="{x:Null}" />
            <Setter Property="BorderBrush" Value="{x:Null}" />
            <Setter Property="FontWeight" Value="Normal" />
        </Trigger>
        <Trigger Property="IsFocused" Value="True">
            <Setter Property="FontWeight" Value="Normal" />
        </Trigger>
    </Style.Triggers>
</Style>
David Sherret
  • 101,669
  • 28
  • 188
  • 178
  • 1
    Another improvement I would add is to set `SnapsToDevicePixels="True"` for ``. This would eliminate any blurry border lines in case the user sets `BorderThickness` to a non-zero value. – DaveS Mar 08 '18 at 01:40
1

Quick solution: Embed the button in a <ToolBar/>

Disclaimer: Will add a toolbar chrome, may be an issue in some cases. (Thanks Indeera)

Vijay Vepakomma
  • 733
  • 6
  • 9
0

If you just need to make the button "invisible" but highlightable:

bb.Background = new SolidColorBrush(Colors.White);
bb.BorderBrush = new SolidColorBrush(Colors.White);
StayOnTarget
  • 11,743
  • 10
  • 52
  • 81
Mario
  • 1
0

This source describes a few approaches to getting flat buttons: http://thehunk.blogspot.com/2012/01/wpf-flat-button-for-real.html one of which doesn't seem to be mentioned in any of the other answers here - using transparency.

To get these flat buttons, all you have to do is set both Background and BorderBrush properties of a standard button to Transparent. These buttons also show natively the fade-in and fade-out effects when they gain focus or are pointed to.

<Button Background="Transparent" BorderBrush="Transparent" />

Note the warning however:

... these flat buttons fail when Windows is using the Classic theme or a High Contrast theme (as you can see from the video).

I've tried this using a ToggleButton and it works fine. So if it suits your theme is a quick & simple method.

StayOnTarget
  • 11,743
  • 10
  • 52
  • 81