从灰色按钮上的图像时，元素被禁用（简单而美丽的方式） [英] Grey out image on button when element is disabled (simple and beautiful way)
本文介绍了从灰色按钮上的图像时，元素被禁用（简单而美丽的方式）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我要灰我的图片（按钮），当按钮被禁用。当我对按钮文本（无图像），文本是灰色的（带图像，按钮内容他们不变灰）。有没有什么简单而美丽的方式来做到这一点？
这是我的XAML文件：
＆LT;窗口x：类=WpfApplication2.MainWindow
的xmlns =http://schemas.microsoft.com/winfx/2006/xaml/$p$psentation
的xmlns：X =http://schemas.microsoft.com/winfx/2006/xaml
标题=主窗口HEIGHT =350WIDTH =525＆GT;
＆LT;网格和GT;
＆LT; Grid.RowDefinitions＆GT;
＆LT; RowDefinition高度=自动/＆GT;
＆LT; RowDefinition高度=*/＆GT;
＆LT; /Grid.RowDefinitions>
＆LT; ToolBarTray VerticalAlignment =评出的背景={DynamicResource {X：静态SystemColors.ControlBrushKey}}IsLocked =真Grid.Row =0＆GT;
＆LT;工具栏背景={DynamicResource {X：静态SystemColors.ControlBrushKey}}带=1BandIndex =1＆GT;
＆LT;按钮命令={结合Button1的}RenderOptions.BitmapScalingMode =最近邻＆GT;
＆LT; Button.Content＆GT;
＆lt;图像源=open.ico＆GT;＆LT; /图像＆GT;
＆LT; /Button.Content>
＆LT; /按钮＆GT;
＆LT;按钮命令={结合的Button2}RenderOptions.BitmapScalingMode =最近邻＆GT;
＆LT; Button.Content＆GT;
＆lt;图像源=open.ico＆GT;＆LT; /图像＆GT;
＆LT; /Button.Content>
＆LT; /按钮＆GT;
＆LT; /工具栏＆GT;
＆LT; / ToolBarTray＆GT;
＆LT; /网格和GT;
＆LT; /窗GT;
这是隐藏文件我的code：
公共部分类主窗口：窗口
{
私人RelayCommand _button1;
私人RelayCommand _button2; 公共主窗口（）
{
的InitializeComponent（）;
的DataContext =这一点;
} 公众的ICommand Button1的
{
得到
{
如果（_button1 == NULL）
{
_button1 =新RelayCommand（Button1E，Button1C）;
}
返回_button1;
}
} 公众的ICommand的Button2
{
得到
{
如果（_button2 == NULL）
{
_button2 =新RelayCommand（Button2E，Button2C）;
}
返回_button2;
}
} 公共无效Button1E（对象参数）
{
Trace.WriteLine（按钮1）;
} 公共BOOL Button1C（对象参数）
{
返回true;
} 公共无效Button2E（对象参数）
{
Trace.WriteLine（按钮2）;
} 公共BOOL Button2C（对象参数）
{
返回false;
}
}
解决方案
正如托马斯·勒布伦在他的文章<一说href=\"http://weblogs.asp.net/thomaslebrun/archive/2009/03/03/wpf-how-to-gray-the-icon-of-a-menuitem.aspx\">How以灰色菜单项的图标？的目前最好的办法可能是创建一个小的类，AutoGreyableImage，这让你有一个形象，将变成灰色时自动控制被停用。
下面是如何使用它：
＆LT;菜单项标题=编辑＆GT;
＆LT;菜单项X：NAME =miPaste
标题=粘贴＆GT;
＆LT; MenuItem.Icon＆GT;
＆lt;局部：AutoGreyableImage源=包：//应用：,,, /图片/ Paste.png
/＆GT;
＆LT; /MenuItem.Icon>
＆LT; /菜单项＆GT;
＆LT; /菜单项＆GT; 这里是实现：
///＆LT;总结＆gt;
///曾经有一个形象，能够没有启用控件时是灰色的类。
///作者：Thomas LEBRUN（http://blogs.developpeur.org/tom）
///＆LT; /总结＆gt;
公共类AutoGreyableImage：图片
{
///＆LT;总结＆gt;
///初始化℃的新的实例;参见CREF =AutoGreyableImage/＆GT;类。
///＆LT; /总结＆gt;
静态AutoGreyableImage（）
{
//覆盖的IsEnabled属性的元数据。
IsEnabledProperty.OverrideMetadata（typeof运算（AutoGreyableImage），新FrameworkPropertyMetadata（真，新PropertyChangedCallback（OnAutoGreyScaleImageIsEnabledPropertyChanged）））;
}
///＆LT;总结＆gt;
///时调用[自动灰度图像enabled属性改变。
///＆LT; /总结＆gt;
///＆LT; PARAM NAME =源＆gt;在源＆LT; /参数＆GT;
///＆LT; PARAM NAME =ARGS＆GT;的＆lt;见CREF =System.Windows.DependencyPropertyChangedEventArgs/＆GT; 。例如包含事件数据＆LT; /参数＆GT;
私有静态无效OnAutoGreyScaleImageIsEnabledPropertyChanged（DependencyObject的源代码，DependencyPropertyChangedEventArgs参数）
{
VAR autoGreyScaleImg =源作为AutoGreyableImage;
VAR isEnable = Convert.ToBoolean（args.NewValue）;
如果（autoGreyScaleImg！= NULL）
{
如果（！isEnable）
{
//获取源位图
VAR的BitmapImage =新的BitmapImage（新的URI（autoGreyScaleImg.Source.ToString（）））;
//将它转换到格雷
autoGreyScaleImg.Source =新FormatConvertedBitmap（的BitmapImage，PixelFormats.Gray32Float，NULL，0）;
//创建作为FormatConvertedBitmap不保留透明度信息灰度图像不透明蒙
autoGreyScaleImg.OpacityMask =新的ImageBrush（BitmapImage的）;
}
其他
{
//设置Source属性为初始值。
autoGreyScaleImg.Source =（（FormatConvertedBitmap）autoGreyScaleImg.Source）.Source;
//重置Opcity面膜
autoGreyScaleImg.OpacityMask = NULL;
}
}
}
} 下面是结果：
<一个href=\"http://weblogs.asp.net/thomaslebrun/archive/2009/03/03/wpf-how-to-gray-the-icon-of-a-menuitem.aspx\">Sources
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:
这篇关于从灰色按钮上的图像时，元素被禁用（简单而美丽的方式）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
