WPF按钮启用/禁用状态下图片外观自动调整方案咨询

嘿，针对你在WPF里遇到的按钮禁用时图片变浅的需求，我给你两种靠谱的解决方案，你可以根据自己的需求选择：

方法一：无需额外图片，用WPF视觉效果自动处理 #

这种方法不用在Inkscape里做两张图，靠WPF的ShaderEffect或者Opacity就能实现禁用状态的浅色调/灰度效果，维护起来更省心。

方案1.1：自定义灰度Shader效果（推荐，视觉效果更专业） #

首先你需要实现一个简单的灰度着色器效果，然后在按钮的Style Trigger里绑定到IsEnabled状态：

第一步：添加灰度Shader类（C#代码）

using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Effects;

namespace Axon.Oscillographic.Viewer.Effects // 替换成你的项目命名空间
{
    public class GrayscaleEffect : ShaderEffect
    {
        private static readonly PixelShader _pixelShader = new PixelShader()
        {
            UriSource = new Uri("pack://application:,,,/Axon.Oscillographic.Viewer;component/Effects/Grayscale.ps")
        };

        public GrayscaleEffect()
        {
            PixelShader = _pixelShader;
            UpdateShaderValue(InputProperty);
        }

        public static readonly DependencyProperty InputProperty =
            ShaderEffect.RegisterPixelShaderSamplerProperty(
                nameof(Input), typeof(GrayscaleEffect), 0);

        public Brush Input
        {
            get => (Brush)GetValue(InputProperty);
            set => SetValue(InputProperty, value);
        }
    }
}

第二步：添加HLSL着色器文件（Grayscale.ps）

在项目里新建一个文本文件，命名为Grayscale.ps，内容如下：

sampler2D inputSampler : register(s0);

float4 main(float2 uv : TEXCOORD) : COLOR
{
    float4 color = tex2D(inputSampler, uv);
    float gray = dot(color.rgb, float3(0.299, 0.587, 0.114)); // 标准灰度计算公式
    return float4(gray, gray, gray, color.a);
}

记得把这个文件的生成操作设置为Resource。

第三步：修改你的按钮XAML代码

<!-- 先引入你刚才写的Effect命名空间 -->
<UserControl xmlns:effects="clr-namespace:Axon.Oscillographic.Viewer.Effects">

<Button Visibility="{Binding SettingsButtonIsEnabled}" 
        Command="{Binding OnSaveProject}" 
        VerticalAlignment="Top" 
        ToolTip="{DynamicResource SaveProject}">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <Image x:Name="IconImage" 
                                   RenderOptions.BitmapScalingMode="HighQuality" 
                                   Source="/Axon.Oscillographic.Viewer;component/Icons/save.png"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <!-- 当按钮禁用时，给图片添加灰度效果 -->
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="IconImage" Property="Effect">
                                    <Setter.Value>
                                        <effects:GrayscaleEffect/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

</UserControl>

方案1.2：简单设置Opacity（快速实现） #

如果不想写Shader，也可以直接在Trigger里把图片的透明度调低，实现“变浅”的效果：

<Button Visibility="{Binding SettingsButtonIsEnabled}" 
        Command="{Binding OnSaveProject}" 
        VerticalAlignment="Top" 
        ToolTip="{DynamicResource SaveProject}">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <Image x:Name="IconImage" 
                                   RenderOptions.BitmapScalingMode="HighQuality" 
                                   Source="/Axon.Oscillographic.Viewer;component/Icons/save.png"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="IconImage" Property="Opacity" Value="0.5"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

这种方法代码最少，但效果是整体变透明，不是严格的灰度，适合快速验证需求。

方法二：用两张独立图片（自定义浅色调） #

如果你想要完全自定义禁用状态的图片样式（比如不是灰度，而是特定的浅色调），那就在Inkscape里编辑出一张浅色版本的图片，然后通过Style的Trigger或者ViewModel来切换Source：

方案2.1：用XAML Trigger直接切换（无需修改ViewModel） #

<Button Visibility="{Binding SettingsButtonIsEnabled}" 
        Command="{Binding OnSaveProject}" 
        VerticalAlignment="Top" 
        ToolTip="{DynamicResource SaveProject}">
    <Image RenderOptions.BitmapScalingMode="HighQuality">
        <Image.Style>
            <Style TargetType="Image">
                <!-- 默认启用状态的全色图片 -->
                <Setter Property="Source" Value="/Axon.Oscillographic.Viewer;component/Icons/save.png"/>
                <Style.Triggers>
                    <!-- 绑定按钮的IsEnabled状态，禁用时切换到浅色图片 -->
                    <DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource AncestorType=Button}}" Value="False">
                        <Setter Property="Source" Value="/Axon.Oscillographic.Viewer;component/Icons/save_disabled.png"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>
</Button>

方案2.2：在ViewModel中控制Source #

如果你的按钮状态已经由ViewModel管理，也可以在ViewModel里加一个IconSource属性，根据按钮的启用状态切换图片路径：

ViewModel代码示例：

private bool _isSaveButtonEnabled;
public bool IsSaveButtonEnabled
{
    get => _isSaveButtonEnabled;
    set
    {
        _isSaveButtonEnabled = value;
        OnPropertyChanged(nameof(IsSaveButtonEnabled));
        OnPropertyChanged(nameof(SaveIconSource));
    }
}

public string SaveIconSource => IsSaveButtonEnabled 
    ? "/Axon.Oscillographic.Viewer;component/Icons/save.png" 
    : "/Axon.Oscillographic.Viewer;component/Icons/save_disabled.png";

XAML代码：

<Button Visibility="{Binding SettingsButtonIsEnabled}" 
        Command="{Binding OnSaveProject}" 
        VerticalAlignment="Top" 
        ToolTip="{DynamicResource SaveProject}"
        IsEnabled="{Binding IsSaveButtonEnabled}">
    <Image RenderOptions.BitmapScalingMode="HighQuality" 
           Source="{Binding SaveIconSource}"/>
</Button>

总结 #

• 如果你想快速实现、减少资源文件，选方法一的灰度/Opacity方案；
• 如果你需要精确控制禁用状态的视觉效果，选方法二的双图片方案。

内容的提问来源于stack exchange，提问作者Hugo Gonzalez