WPF 带 ICON 的 button 状态切换 （Enable/Disable）

问题的引出

在WPF中，如果一个button只有文字，没有图标，当disable的时候，文字就会变成灰色。如果这个button的内容中有图片，disable的时候，不会发生任何变化。那么，问题来了，如何使得图片在显示的时候也可以变成灰色，或者使得它变得不一样呢？

解决方案

两种方案，一种是图片变成灰色，另一种是变成半透明。对于方案一，当图片是彩色的时候，效果很好，但是如果图片本身是灰色的，则效果较差。第二种方案则相反。

图片变成灰色

如果想要使得图片变成灰色，那么需要用到类FormatConvertedBitmap。图片的显示方式，彩色或者灰色，是通过DestinationFormat 来控制的。参考WPF 将图片进行灰度处理
如果想要在C#代码中使用这个类，那么必须：

         FormatConvertedBitmap newFormatConvertedBitmap = new FormatConvertedBitmap();
         newFormatConvertedBitmap.BeginInit();
         newFormatConvertedBitmap.Source = oldFormatConvertedBitmap.Source;
         newFormatConvertedBitmap.DestinationFormat = PixelFormats.Gray8;
         newFormatConvertedBitmap.EndInit();

如果想要在xaml里面使用这个类：

         <!-- Normal button with icon gray & text is disabled -->
         <Button x:Name="IconGrayButton" Width="180" Height="32" IsEnabled="False" Margin="10">
            <StackPanel Orientation="Horizontal">
               <Image x:Name="IconGrayButtonImage">
                  <Image.Source>
                     <FormatConvertedBitmap Source="{StaticResource ButtonIcon}" DestinationFormat="Gray8">
                     </FormatConvertedBitmap>
                  </Image.Source>
               </Image>
               <Label Content="Gray Button"></Label>
            </StackPanel>
         </Button>

图片变成半透明

半透明则相对比较简单，通过属性Opacity即可控制。

         <!-- Normal button with icon & text is disabled -->
         <Button x:Name="NormalButton" Width="180" Height="32" IsEnabled="False" Margin="10">
            <StackPanel Orientation="Horizontal">
               <Image x:Name="NormalButtonImage" Source="{StaticResource ButtonIcon}" Opacity="0.5"></Image>
               <Label Content="Normal Button"></Label>
            </StackPanel>
         </Button>

完整代码

实现三个按钮，第一个按钮用来控制其他两个按钮的 disable 和 enable 状态。
MainWindow.xaml.cs

using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace DisableIcon
{
   /// <summary>
   /// Interaction logic for MainWindow.xaml
   /// </summary>
   public partial class MainWindow : Window
   {
      public MainWindow()
      {
         InitializeComponent();
      }

      private void ToggleButton_Click(object sender, RoutedEventArgs e)
      {
         NormalButton.IsEnabled = !NormalButton.IsEnabled;
         NormalButtonImage.Opacity = NormalButton.IsEnabled ? 1.0 : 0.5;
         FormatConvertedBitmap oldFormatConvertedBitmap = IconGrayButtonImage.Source as FormatConvertedBitmap;
         FormatConvertedBitmap newFormatConvertedBitmap = new FormatConvertedBitmap();
         newFormatConvertedBitmap.BeginInit();
         newFormatConvertedBitmap.Source = oldFormatConvertedBitmap.Source;
         newFormatConvertedBitmap.DestinationFormat = NormalButton.IsEnabled ? PixelFormats.Default : PixelFormats.Gray8; // 注意：无法仅仅改变 DestinationFormat 而不重新 initialize，具体原因未知。
         newFormatConvertedBitmap.EndInit();
         IconGrayButtonImage.Source = newFormatConvertedBitmap;
         IconGrayButton.IsEnabled = NormalButton.IsEnabled;
      }
   }
}

MainWindow.xaml

<Window x:Class="DisableIcon.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DisableIcon"
        mc:Ignorable="d"
        Title="MainWindow" Height="240" Width="240">
   <Window.Resources>
      <BitmapImage x:Key="ButtonIcon" UriSource="icon.jpg" />
   </Window.Resources>
    <Grid>
      <StackPanel VerticalAlignment="Center">
         <!-- Normal button with icon -->
         <Button x:Name="ToggleButton" Width="180" Height="32" Margin="10" Click="ToggleButton_Click">
            <StackPanel Orientation="Horizontal">
               <Image Source="{StaticResource ButtonIcon}"></Image>
               <Label Content="Toggle Button"></Label>
            </StackPanel>
         </Button>
         <!-- Normal button with icon & text is disabled -->
         <Button x:Name="NormalButton" Width="180" Height="32" IsEnabled="False" Margin="10">
            <StackPanel Orientation="Horizontal">
               <Image x:Name="NormalButtonImage" Source="{StaticResource ButtonIcon}" Opacity="0.5"></Image>
               <Label Content="Normal Button"></Label>
            </StackPanel>
         </Button>
         <!-- Normal button with icon gray & text is disabled -->
         <Button x:Name="IconGrayButton" Width="180" Height="32" IsEnabled="False" Margin="10">
            <StackPanel Orientation="Horizontal">
               <Image x:Name="IconGrayButtonImage">
                  <Image.Source>
                     <FormatConvertedBitmap Source="{StaticResource ButtonIcon}" DestinationFormat="Gray8">
                     </FormatConvertedBitmap>
                  </Image.Source>
               </Image>
               <Label Content="Gray Button"></Label>
            </StackPanel>
         </Button>
      </StackPanel>
   </Grid>
</Window>

效果

Diable的效果

Enable的效果