Create flat button in WPF

Question

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

Harm

See also: #697881 especially if you like one-liners. – Spare

Does this answer your question? Setting Button FlatStyle in WPF – Repose

Answer 1

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

Aegrotat

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. – Juliannejuliano

@Juliannejuliano see my answer below – Nullipore

Answer 2

More simple solution here using already defined ToolBar button style :

<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
        Content="You know I'm flat..." />

Danu

Best answer for <Button/> wished it worked for <RepeatButton/>. – Hipolitohipp

Works for ToggleButton when using ToggleButtonStyleKey – Repose

Answer 3

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>

Nullipore

Another improvement I would add is to set SnapsToDevicePixels="True" for <Border>. This would eliminate any blurry border lines in case the user sets BorderThickness to a non-zero value. – Erato

Answer 4

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

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

Superstructure

Adds a toolbar chrome: yes; Does not solve the problem: subjective – Superstructure

Answer 5

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

bb.Background = new SolidColorBrush(Colors.White);
bb.BorderBrush = new SolidColorBrush(Colors.White);

Obit

its wont make button invisible you need to set Colors.Transparent to make it Transparent – Humorist

Answer 6

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.

Repose