WPF 禁用按钮的背景

Posted 2023-02-19

【中文标题】WPF 禁用按钮的背景

【英文标题】：WPF Disabled button's background

【发布时间】：2014-10-13 22:31:26

【问题描述】：

我尝试在Button被禁用时更改其样式：

    <Style TargetType="Button" x:Key="MyButton2">
        <Setter Property="Background" Value="MediumAquamarine" />
        <Setter Property="Foreground" Value="MediumBlue" />
        
        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Background" Value="Green"/>
                <Setter Property="Foreground" Value="DeepPink"/>
            </Trigger>
        </Style.Triggers>

    </Style>

还有我的按钮：

<Button Style="StaticResource MyButton2" Content="My text" Width="100" Height="30" IsEnabled="False" />    

但由于某种原因，此样式不适用于按钮：

如何将此样式应用于我的按钮？我可以在不使用样式覆盖按钮模板的情况下做到这一点吗？

【问题讨论】：

请同时添加按钮的模板。

我的按钮有默认模板。我没有覆盖它

好吧，看来您一开始就没有将IsEnabled 设置为false

按钮的 xaml 显示在问题的末尾。如您所见，IsEnabled 属性设置为 false

您正在创建什么操作系统/应用程序类型？该按钮看起来不像默认的 WPF 按钮。

【参考方案1】：

添加BasedOn 工具栏按钮样式。这个解决方案对我有用：

BasedOn="​StaticResource ​x:Static ToolBar.ButtonStyleKey​​"

【参考方案2】：

可能会迟到，但 WPF 提供了一个内置属性：

IsHitTestVisible="False"

在控件上使用上述任何类型的鼠标移动都无法检测到，因此在不改变其实际外观的情况下禁用控件。

【讨论】：

这个答案与问题无关。这实际上与人们想要的相反

【参考方案3】：

我的解决方案更简单一些，但它不允许为禁用按钮使用Transparent 背景颜色，并且您也无法更改BorderBrush。 我所做的是使用TextBlock 作为按钮的内容，并在禁用时更改此TextBlock 背景的颜色。

我的按钮是这样写的：

<Button>
    <TextBlock Text="Click me!" Style="StaticResource MyButtonContentStyle" />
</Button>

而MyButtonContentStyle是这样写的：

<Style x:Key="MyButtonContentStyle" TargetType="TextBlock">
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" Value="White" />
        </Trigger>
    </Style.Triggers>
</Style>

它对我们来说就像一个魅力。

【参考方案4】：

似乎唯一的方法是从按钮中删除 chrome 主题。 请注意，如果您正在为此构建，这将删除悬停/单击动画以及 Windows 7 上的按钮渐变。

不幸的是，Microsoft 决定使用disabling a button should give the background a hardcoded value from a private property in the chrome theme's code-behind，这意味着您无法通过 XAML 更改它。该链接描述了问题：

Button 的控制模板使用ButtonChrome，它有一个名为ButtonOverlay 的私有属性，当Button 将IsEnabled 设置为False 时，将Background 设置为@987654329 @（或 RGB 244,244,244），也就是你看到的灰色。这是你无法改变的。

您可以为按钮创建一个新的控件模板 (yay)，将 Themes:ButtonChrome 元素替换为 Border 元素，您可以更改 Background of。

它在设计视图中可能看起来不起作用，但在您运行它时会起作用。

因此，例如，对于您来说，它可能看起来像：

<!-- Default button focus visual -->
<Style x:Key="ButtonFocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="DynamicResource x:Static SystemColors.ControlTextBrushKey" StrokeThickness="1" StrokeDashArray="1 2"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style x:Key="ButtonStyle1" TargetType="x:Type Button">
    <Setter Property="FocusVisualStyle" Value="StaticResource ButtonFocusVisual"/>
    <Setter Property="Background" Value="MediumAquamarine"/>
    <Setter Property="Foreground" Value="MediumBlue"/>
    <Setter Property="BorderBrush" Value="Blue"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="x:Type Button">
                <Grid>
                    <Border x:Name="Border" Background="TemplateBinding Background" 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>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="DeepPink"/>
                        <Setter Property="Background" Value="Green"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【参考方案5】：

我可以在不使用样式覆盖按钮模板的情况下做到这一点吗？

我认为不是，因为 Windows 中的控件具有默认的 Styles 和 ControlTemplates，并且 在每个版本的 Windows 中它们是不同的。此外，样式 - 它只是很多设置，通常样式不会更改/添加行为来控制，这负责ControlTemplate。

Note:Style是一组setter，例如：设置背景、大小等。ControlTemplate是form，所有这些设置都会出现在其中。

在这种情况下，我建议大家更改 ControlTemplate，无论系统版本如何，都可能具有相同的行为，即视图。

在这种情况下，试试这个Style：

<Window.Resources>
    <Style TargetType="Button" x:Key="MyButton2">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Background" Value="MediumAquamarine" />
        <Setter Property="Foreground" Value="MediumBlue" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="x:Type Button">
                    <Grid Background="TemplateBinding Background">
                        <ContentPresenter x:Name="MyContentPresenter" 
                                          Content="TemplateBinding Content"
                                          HorizontalAlignment="Center" 
                                          VerticalAlignment="Center" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <Style.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="Green"/>
                <Setter Property="Foreground" Value="DeepPink"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <Button Content="Button" 
            IsEnabled="False"
            HorizontalAlignment="Left" 
            VerticalAlignment="Top" 
            Width="75" 
            Style="StaticResource MyButton2"
            Click="Button_Click"/>
</Grid>

【参考方案6】：

奇怪的是，当我运行它时它“工作”，部分地，这实际上可能是按钮的模板。这是一个按钮的整个模板。

<Style x:Key="FocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="DynamicResource x:Static SystemColors.ControlTextBrushKey" StrokeThickness="1" StrokeDashArray="1 2"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="ButtonStyle1" TargetType="x:Type Button">
    <Setter Property="FocusVisualStyle" Value="StaticResource FocusVisual"/>
    <Setter Property="Background" Value="StaticResource Button.Static.Background"/>
    <Setter Property="BorderBrush" Value="StaticResource Button.Static.Border"/>
    <Setter Property="Foreground" Value="DynamicResource x:Static SystemColors.ControlTextBrushKey"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="x:Type Button">
                <Border x:Name="border" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" Background="TemplateBinding Background" SnapsToDevicePixels="true">
                    <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="TemplateBinding HorizontalContentAlignment" Margin="TemplateBinding Padding" RecognizesAccessKey="True" SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels" VerticalAlignment="TemplateBinding VerticalContentAlignment"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsDefaulted" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="DynamicResource x:Static SystemColors.HighlightBrushKey"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" TargetName="border" Value="StaticResource Button.MouseOver.Background"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="StaticResource Button.MouseOver.Border"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="true">
                        <Setter Property="Background" TargetName="border" Value="StaticResource Button.Pressed.Background"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="StaticResource Button.Pressed.Border"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="border" Value="StaticResource Button.Disabled.Background"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="StaticResource Button.Disabled.Border"/>
                        <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="StaticResource Button.Disabled.Foreground"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如您所见，按钮的控制模板中发生了很多事情。例如，禁用 ctl 时使用以下 SolidColorBrushes。

<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>

您可以更改这些（在您的用户控件、应用程序的范围内），也可以按照 Daniel Ward 的建议重写控件模板。

您可以通过在 UI 编辑器中右键单击任何控件的默认模板，编辑模板 -> 创建副本...通过混合、代码或反汇编 :)

希望对你有帮助！

干杯

斯蒂安

【讨论】：

这应该被标记为答案，因为它不会删除按钮的样式（例如悬停、按下等）

好帖子。我对 disabled trigger <Trigger Property="IsEnabled" Value="false"> 的 建议 是只使用这个设置器：<Setter Property="Opacity" Value="0.5" /> 然后你不需要设置 3 种颜色，尤其是带有 的按钮嵌套内容 更改其视图。 图像和嵌套文本通过降低不透明度看起来像被禁用了。

最有帮助的答案 +1