禁用元素时按钮上的图像变灰(简单而美观的方式) [英] Grey out image on button when element is disabled (simple and beautiful way)

问题描述

当按钮被禁用时，我想使我的图像(在按钮上)变灰.当我在按钮上有文本(无图像)时，文本显示为灰色(图像作为按钮内容，它们不会显示为灰色).有没有简单又漂亮的方法呢?

这是我的 xaml 文件:

<网格><Grid.RowDefinitions><行定义高度=自动"/><行定义高度="*"/></Grid.RowDefinitions><ToolBarTray VerticalAlignment="Top" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" IsLocked="true" Grid.Row="0"><ToolBar Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Band="1" BandIndex="1"><Button Command="{Binding Button1}" RenderOptions.BitmapScalingMode="NearestNeighbor"><按钮.内容><图片来源="open.ico"></图片></Button.Content></按钮><Button Command="{Binding Button2}" RenderOptions.BitmapScalingMode="NearestNeighbor"><按钮.内容><图片来源="open.ico"></图片></Button.Content></按钮></工具栏></工具栏托盘></网格></窗口>

这是我的代码隐藏文件:

公共部分类 MainWindow : Window{私人中继命令_button1；私人中继命令_button2；公共主窗口(){初始化组件()；数据上下文 = 这个；}公共 ICommand Button1{得到{如果(_button1 == null){_button1 = new RelayCommand(Button1E, Button1C);}返回_button1；}}公共 ICommand Button2{得到{如果(_button2 == null){_button2 = new RelayCommand(Button2E, Button2C);}返回_button2；}}公共无效Button1E(对象参数){Trace.WriteLine("按钮 1");}public bool Button1C(对象参数){返回真；}公共无效Button2E(对象参数){Trace.WriteLine("按钮 2");}public bool Button2C(对象参数){返回假；}}

解决方案

正如 Thomas Lebrun 在他的帖子中所说的

I want to grey out my images (on the buttons) when the buttons are disabled. When I have text (no images) on the button, the text is greyed out (With Images as Button Content they are not grey out). Is there any simple and beautiful way to do that?

This is my xaml file:

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <ToolBarTray VerticalAlignment="Top" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" IsLocked="true" Grid.Row="0">
            <ToolBar Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Band="1" BandIndex="1">
                <Button Command="{Binding Button1}" RenderOptions.BitmapScalingMode="NearestNeighbor">
                    <Button.Content>
                        <Image Source="open.ico"></Image>
                    </Button.Content>
                </Button>
                <Button Command="{Binding Button2}" RenderOptions.BitmapScalingMode="NearestNeighbor">
                    <Button.Content>
                        <Image Source="open.ico"></Image>
                    </Button.Content>
                </Button>
            </ToolBar>
        </ToolBarTray>
    </Grid>
</Window>

and this is my code behind file:

public partial class MainWindow : Window
{
    private RelayCommand _button1;
    private RelayCommand _button2;

    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
    }

    public ICommand Button1
    {
        get
        {
            if (_button1 == null)
            {
                _button1 = new RelayCommand(Button1E, Button1C);
            }
            return _button1;
        }
    }

    public ICommand Button2
    {
        get
        {
            if (_button2 == null)
            {
                _button2 = new RelayCommand(Button2E, Button2C);
            }
            return _button2;
        }
    }

    public void Button1E(object parameter)
    {
        Trace.WriteLine("Button 1");
    }

    public bool Button1C(object parameter)
    {
        return true;
    }

    public void Button2E(object parameter)
    {
        Trace.WriteLine("Button 2");
    }

    public bool Button2C(object parameter)
    {
        return false;
    }
}

解决方案

As Thomas Lebrun says in his post How to gray the icon of a MenuItem ? the best way at the moment is probably to create a little class, AutoGreyableImage, which allow you to have an image that will be turn in gray automatically when the control is deactivated.

Here is how you can use it:

<MenuItem Header="Edit">
    <MenuItem x:Name="miPaste"
              Header="Paste">
        <MenuItem.Icon>
            <local:AutoGreyableImage Source="pack://application:,,,/Images/Paste.png"
                                                   />
        </MenuItem.Icon>
    </MenuItem>
</MenuItem>
 

And here is the implementation:

/// <summary>
/// Class used to have an image that is able to be gray when the control is not enabled.
/// Author: Thomas LEBRUN (http://blogs.developpeur.org/tom)
/// </summary>
public class AutoGreyableImage : Image
{
    /// <summary>
    /// Initializes a new instance of the <see cref="AutoGreyableImage"/> class.
    /// </summary>
    static AutoGreyableImage()
    {
        // Override the metadata of the IsEnabled property.
        IsEnabledProperty.OverrideMetadata(typeof(AutoGreyableImage), new FrameworkPropertyMetadata(true, new PropertyChangedCallback(OnAutoGreyScaleImageIsEnabledPropertyChanged)));
    }
    /// <summary>
    /// Called when [auto grey scale image is enabled property changed].
    /// </summary>
    /// <param name="source">The source.</param>
    /// <param name="args">The <see cref="System.Windows.DependencyPropertyChangedEventArgs"/> instance containing the event data.</param>
    private static void OnAutoGreyScaleImageIsEnabledPropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs args)
    {
        var autoGreyScaleImg = source as AutoGreyableImage;
        var isEnable = Convert.ToBoolean(args.NewValue);
        if (autoGreyScaleImg != null)
        {
            if (!isEnable)
            {
                // Get the source bitmap
                var bitmapImage = new BitmapImage(new Uri(autoGreyScaleImg.Source.ToString()));
                // Convert it to Gray
                autoGreyScaleImg.Source = new FormatConvertedBitmap(bitmapImage, PixelFormats.Gray32Float, null, 0);
                // Create Opacity Mask for greyscale image as FormatConvertedBitmap does not keep transparency info
                autoGreyScaleImg.OpacityMask = new ImageBrush(bitmapImage);
            }
            else
            {
                // Set the Source property to the original value.
                autoGreyScaleImg.Source = ((FormatConvertedBitmap) autoGreyScaleImg.Source).Source;
                // Reset the Opcity Mask
                autoGreyScaleImg.OpacityMask = null;
            }
        }
    }
}
 

Here is the result:

Sources

这篇关于禁用元素时按钮上的图像变灰(简单而美观的方式)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！