wpf - wpf flat button

Question

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

score 40 · Accepted Answer

More simple solution here using already defined ToolBar button style :

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

score 25 · Accepted Answer

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

score 8 · Accepted Answer

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>

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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.

wpf - wpf flat button

6 に答える 6

Related

Reference