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

问题描述

当按钮被禁用时，我想灰化我的图像（在按钮上）。当我在按钮上有文本（没有图像）时，文本是灰色的（将图像作为按钮内容，它们不是灰色的）。有什么简单而美丽的方法吗？

这是我的xaml文件：

 < Window x：Class =WpfApplication2.MainWindow
 xmlns =http://schemas.microsoft.com/winfx/2006/xaml/presentation
 xmlns：x =http://schemas.microsoft.com/winfx/2006/xaml
 Title =MainWindowHeight =350Width =525> 
< Grid> 
< Grid.RowDefinitions> 
< RowDefinition Height =Auto/> 
< RowDefinition Height =*/> 
< /Grid.RowDefinitions> 
< ToolBarTray VerticalAlignment =TopBackground ={DynamicResource {x：Static SystemColors.ControlBrushKey}}IsLocked =trueGrid.Row =0 
< ToolBar Background ={DynamicResource {x：Static SystemColors.ControlBrushKey}}Band =1BandIndex =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> 
  

这是我的代码。

  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; 
} 
} 
  

解决方案

托马斯·莱布伦在他的帖子

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屋！