Create flat button in WPF

Viewed 46944

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

6 Answers

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

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

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

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.

Related