WPF 实现不规则的ImageButton及当Disable自动变灰

最新推荐文章于 2019-10-22 09:41:45 发布

原创最新推荐文章于 2019-10-22 09:41:45 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#button style #ImageButton #Disable 变灰 #wpf

WPF 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在WPF中创建一个可以设置任意图片的ImageButton，并在按钮禁用（IsEnabled=False）时自动将图片变为灰色。通过新建类并提供XAML代码来实现这一功能。

实现一个可任意设置图片的Image Button, 当状态为disable时（IsEnabled=False），图片变灰。

１.首先新建一个类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Controls;
using System.Windows.Data;
using System.Globalization;
using System.Windows.Media.Imaging;

namespace WpfAppImageButton.Control
{
	class ImageButton : Button
	{
		private string m_imagepath;

		public string ImgPath
		{
			get { return m_imagepath; }
			set { m_imagepath = value; }
		}
	}

	public class Path2UriSource : IValueConverter
	{
		public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
		{
			string relativePath = value as string;
			if (string.IsNullOrEmpty(relativePath))
				return null;
			relativePath = "pack://application:,,,/" + relativePath;
			Uri uri = new Uri(relativePath, UriKind.RelativeOrAbsolute);

			FormatConvertedBitmap bitmap = new FormatConvertedBitmap();
			bitmap.BeginInit();
			bitmap.Source = new BitmapImage(uri);
			bitmap.DestinationFormat = System.Windows.Media.PixelFormats.Gray32Float;
			bitmap.EndInit();
			return bitmap;
		}

		public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
		{
			return value;
		}
	}

	public class Path2ImageBrush : IValueConverter
	{
		public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
		{
			string relativePath = value as string;
			if (string.IsNullOrEmpty(relativePath))
				return null;
			relativePath = "pack://application:,,,/" + relativePath;
			Uri uri = new Uri(relativePath, UriKind.RelativeOrAbsolute);
			BitmapImage source = new BitmapImage(uri);
			System.Windows.Media.ImageBrush imgBursh = new System.Windows.Media.ImageBrush(source);
			return imgBursh;
		}

		public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
		{
			return value;
		}
	}
}

2. XAML 设置模板：

	
        <ControlTemplate x:Key="ImageButtonTemplate" TargetType="{x:Type lControl:ImageButton}">
            <Grid>
                <Rectangle x:Name="bgrect" Fill="Transparent" Opacity="0.5"/>
                <Image x:Name="img" HorizontalAlignment="Stretch"  Source="{Binding ImgPath, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform" />
            </Grid>
  
            <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="img" Property="Source" Value="{Binding ImgPath, RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource Path2UriSource}}"/>
                    <Setter TargetName="img" Property="OpacityMask" Value="{Binding ImgPath, RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource Path2ImageBrush}}"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="bgrect" Property="Fill" Value="#FFC800"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="bgrect" Property="Fill" Value="#22EF1F"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

３.　效果图：

４.　ＸＡＭＬ全部代码

<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna"
	x:Class="WpfAppImageButton.MainWindow"
	x:Name="Window"
	Title="MainWindow"
    xmlns:lControl="clr-namespace:WpfAppImageButton.Control"  
    xmlns:ef="http://schemas.microsoft.com/expression/2010/effects" 
	Width="510" Height="281" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow" Background="#FF339A14">

	<Window.Resources>
        <lControl:Path2UriSource x:Key="Path2UriSource"/>
        <lControl:Path2ImageBrush x:Key="Path2ImageBrush"/>
	
        <ControlTemplate x:Key="ImageButtonTemplate" TargetType="{x:Type lControl:ImageButton}">
            <Grid>
                <Rectangle x:Name="bgrect" Fill="Transparent" Opacity="0.5"/>
                <Image x:Name="img" HorizontalAlignment="Stretch"  Source="{Binding ImgPath, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform" />
            </Grid>
  
            <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="img" Property="Source" Value="{Binding ImgPath, RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource Path2UriSource}}"/>
                    <Setter TargetName="img" Property="OpacityMask" Value="{Binding ImgPath, RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource Path2ImageBrush}}"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="bgrect" Property="Fill" Value="#FFC800"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="bgrect" Property="Fill" Value="#22EF1F"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>

	<Grid x:Name="LayoutRoot">
          
        <Button Content="Disable all button" Height="47" HorizontalAlignment="Left" Margin="327,12,0,0" Name="button1" VerticalAlignment="Top" Width="135" Click="button1_Click" />
        <lControl:ImageButton Content="Button" Height="64" Focusable="False" HorizontalAlignment="Left" Margin="20,12,0,0" x:Name="button2" VerticalAlignment="Top" Width="202" 
                           ImgPath="../Images/colorButton.png" Template="{StaticResource ImageButtonTemplate}"/>
        <lControl:ImageButton Content="Button" Height="47" Focusable="False" HorizontalAlignment="Left" Margin="20,95,0,0" x:Name="button3" VerticalAlignment="Top" Width="151" 
                ImgPath="../Images/OK.png" Template="{StaticResource ImageButtonTemplate}"/>
        <lControl:ImageButton Content="Button" Focusable="False"  Height="130" HorizontalAlignment="Left" Margin="211,86,0,0" x:Name="button4" VerticalAlignment="Top" Width="144" 
                ImgPath="../Images/select.png" Template="{StaticResource ImageButtonTemplate}"/>
    </Grid>
</Window>