wpf平面按钮答案

【问题标题】：wpf flat buttonwpf平面按钮
【发布时间】：2010-01-14 13:04:06
【问题描述】：

如何在 wpf 中制作按钮平面样式？我已经尝试过 BasedOn 属性，但它不起作用。

【问题讨论】：

另请参阅：stackoverflow.com/questions/697381/…，尤其是如果您喜欢单线。
这能回答你的问题吗？ Setting Button FlatStyle in WPF

【解决方案1】：

这里使用已经定义的工具栏按钮样式更简单的解决方案：

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

【讨论】：

<Button/> 的最佳答案希望它适用于 <RepeatButton/>。
在使用 ToggleButtonStyleKey 时适用于 ToggleButton

【解决方案2】：

只是为了让您入门：

<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 以完成重新定义按钮

【讨论】：

不能让它工作。您的示例样式不会删除按钮的边框或背景。此示例中唯一有效的是按钮文本在悬停时变为粗体。
@Johncl 在下面看到我的答案

【解决方案3】：

添加到 Eduardo 的答案中，如果厚度设置为 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>

【讨论】：

我要添加的另一个改进是将SnapsToDevicePixels="True" 设置为<Border>。如果用户将BorderThickness 设置为非零值，这将消除任何模糊的边界线。

【解决方案4】：

快速解决方案：将按钮嵌入<ToolBar/>

免责声明：将添加工具栏镶边，在某些情况下可能会出现问题。（感谢 Indeera）

【讨论】：

添加工具栏镶边：是的；不能解决问题：主观

【解决方案5】：

如果您只需要使按钮“不可见”但可突出显示：

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

【讨论】：

它不会使按钮不可见，您需要设置 Colors.Transparent 使其透明

【解决方案6】：

此来源描述了一些获取平面按钮的方法：http://thehunk.blogspot.com/2012/01/wpf-flat-button-for-real.html 此处的任何其他答案似乎都没有提到其中之一 - 使用透明度。

要获得这些平面按钮，您只需设置背景将标准按钮的 BorderBrush 属性和 BorderBrush 属性设置为透明。这些按钮还原生显示淡入和淡出效果，当他们获得焦点或被指向。
<Button Background="Transparent" BorderBrush="Transparent" />

但是请注意警告：

...当 Windows 使用 Classic 时，这些平面按钮会失效主题或高对比度主题（您可以从视频中看到）。

我已经使用ToggleButton 进行了尝试，效果很好。因此，如果它适合您的主题是一种快速简单的方法。

【讨论】：