Плоская кнопка wpf

Question

Как сделать кнопку плоского стиля в wpf? Я пробовал свойство BasedOn, но оно не работает.

Answer 1

Просто для начала:

<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>

Тогда у вас есть один миллион других способов сделать это, даже изменив ControlTemplate завершить переопределение кнопки

Answer 2

Здесь более простое решение с использованием уже определенного стиля кнопки панели инструментов:

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

Answer 3

Чтобы добавить ответ Эдуардо, это решение избавляет от любых дополнительных стилей, таких как граница вокруг кнопки, если толщина установлена ​​в 0.

Вы можете добавить дополнительный стиль по мере необходимости:

<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>

Answer 4

Быстрое решение: встроить кнопку в <ToolBar/>

Отказ от ответственности: добавит панель инструментов Chrome, может быть проблемой в некоторых случаях. (Спасибо Индера)

Answer 5

Если вам просто нужно сделать кнопку "невидимой", но выделенной:

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

Answer 6

Этот источник описывает несколько подходов к получению плоских кнопок: http://thehunk.blogspot.com/2012/01/wpf-flat-button-for-real.html , один из которых, кажется, не упоминается ни в одном из другие ответы здесь - с использованием прозрачности.

Чтобы получить эти плоские кнопки, все, что вам нужно сделать, это установить для свойств Background и BorderBrush стандартной кнопки значение Transparent. Эти кнопки также изначально отображают эффекты постепенного появления и исчезновения, когда они получают фокус или на них указывают.

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

Однако обратите внимание на предупреждение:

... эти плоские кнопки не работают, когда Windows использует классическую тему или тему высокой контрастности (как вы можете видеть из видео).

Я пробовал это, используя ToggleButtonи это работает нормально. Так что, если это подходит вашей теме, это быстрый и простой метод.