WPF利用Image实现图片按钮

  之前有一篇文章也是采用了Image实现的图片按钮，不过时间太久远了，忘记了地址。好吧，这里我进行了进一步的改进，原来的文章中需要设置4张图片，分别为可用时，鼠标悬浮时，按钮按下时，按钮不可用时的图片，这里我只用了一张图片，利用C#的图片灰度处理自动获得不可用时的图片，利用图片的间距实现悬浮及按下效果。先上效果：（正常 悬浮 按下 不可用）

　　代码其实比较简单，唯一的难点就是把图片转换成ImageSource，在网上找了很久终于找到了一个,转换代码如下：

         ///<summary>
         ///设置正常及不可用时的背景图片
         ///</summary>
         ///<param name="i">背景图片</param>
        private void getBackImageSource(BitmapSource i)
        {
            if (i == null) {
                EnablebackImage = null;
                unEnablebackImage = null;
                return;
            }
            FormatConvertedBitmap b = new FormatConvertedBitmap();
            b.BeginInit();
            b.Source = i;
            b.DestinationFormat = PixelFormats.Gray8;
            b.EndInit();
             FormatConvertedBitmap b1 = new FormatConvertedBitmap();
            b1.BeginInit();
            b1.Source = i;
            b1.EndInit();
            EnablebackImage = b1;
            unEnablebackImage = b;
        }

前端采用Image作为主体部分，利用Border模仿按钮的边框，TextBlock作为文本显示。注意：代码主体部分利用ViewBox保证控件大小变化时不发生变形。代码如下：

<UserControl x:Class="BaseModel.ImageButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="74" d:DesignWidth="60" Width="66" Height="76" MouseLeftButtonDown="UserControl_MouseLeftButtonDown" MouseLeftButtonUp="UserControl_MouseLeftButtonUp" MouseEnter="UserControl_MouseEnter" MouseLeave="UserControl_MouseLeave">
    <Viewbox>
    <Grid>
            <Border Name ="MainBorder" Width="66" Height="76" BorderBrush="White" BorderThickness="2" Background="White" Opacity="0.5" Visibility="Hidden"/>
            <Image Name="btnImage" Width="48" Height="48" Stretch="Fill" Margin="9,2,9,24"/>
        <TextBlock Name="btnText" Text="" FontSize="10" Width="66" IsHitTestVisible="False" TextAlignment="Center" TextWrapping="Wrap" Margin="0,52,0,2"/>
    </Grid>
    </Viewbox>
</UserControl>

后台主要实现了鼠标悬浮和按下时的效果，以及按钮是否可用切换时图片的选择，代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace BaseModel
{
    /// <summary>
    /// ImageButton.xaml 的交互逻辑
    /// </summary>
    public partial class ImageButton : UserControl
    {
        #region 属性

        //按钮是否可用
        private bool isEnable = true;
        //按钮文本
        private string text = "";
        //按钮文本字体
        private FontFamily textFamily = new FontFamily("宋体");
        //按钮文本字体大小
        private double textSize = 10;
        //按钮文本字体颜色
        private Brush textColor = Brushes.Black;
        //正在被按下状态
        private bool isClicking = false;
        //背景图片
        private BitmapSource backImage;
        //正常背景资源
        private ImageSource EnablebackImage;
        //不可用背景资源
        private ImageSource unEnablebackImage;
        //按下事件
        public event EventHandler click;
        /// <summary>
        /// 设置或获取控件可用状态
        /// </summary>
        [System.ComponentModel.Browsable(true), System.ComponentModel.Category("Appearance"),System.ComponentModel.Description("设置或获取控件可用状态")]
        public bool IsEnable {
            get {
                return isEnable;
            }
            set {
                this.btnText.IsEnabled = value;
                this.btnImage.IsEnabled = value;
                isEnable = value;
                if (isEnable)
                {
                    btnImage.Source = EnablebackImage;
                }
                else
                {
                    btnImage.Source = unEnablebackImage;
                }
            }
        }
        /// <summary>
        /// 设置或获取控件文本
        /// </summary>
        [System.ComponentModel.Browsable(true), System.ComponentModel.Category("Appearance"), System.ComponentModel.Description("设置或获取控件文本")]
        public string Text {
            get {
                return text;
            }
            set {
                this.btnText.Text = value;
                text = value;
            }
        }
        /// <summary>
        /// 设置或获取控件文本字体
        /// </summary>
        [System.ComponentModel.Browsable(true), System.ComponentModel.Category("Appearance"), System.ComponentModel.Description("设置或获取控件文本字体")]
        public FontFamily TextFamily
        {
            get
            {
                return textFamily;
            }
            set
            {
                this.btnText.FontFamily = value;
                textFamily = value;
            }
        }
        /// <summary>
        /// 设置或获取控件文本字体大小
        /// </summary>
        [System.ComponentModel.Browsable(true), System.ComponentModel.Category("Appearance"), System.ComponentModel.Description("设置或获取控件文本字体大小")]
        public double TextSize
        {
            get
            {
                return textSize;
            }
            set
            {
                this.btnText.FontSize = value;
                textSize = value;
            }
        }
        /// <summary>
        /// 设置或获取控件文本字体颜色
        /// </summary>
         [System.ComponentModel.Browsable(true), System.ComponentModel.Category("Appearance"), System.ComponentModel.Description("设置或获取控件文本字体颜色")]
        public Brush TextColor
        {
            get
            {
                return textColor;
            }
            set
            {
                this.btnText.Foreground = value;
                textColor = value;
            }
        }
        /// <summary>
        /// 设置或获取控件背景图片
        /// </summary>
         [System.ComponentModel.Browsable(true), System.ComponentModel.Category("Appearance"), System.ComponentModel.Description("设置或获取控件背景图片")]
         public BitmapSource BackImage
         {
             get
             {
                 return backImage;
             }
             set
             {
                 backImage = value;
                 getBackImageSource(value);
                 if (isEnable)
                 {
                     btnImage.Source = EnablebackImage;
                 }
                 else
                 {
                     btnImage.Source =unEnablebackImage;
                 }
             }
         }

        #endregion

        public ImageButton()
        {
            InitializeComponent();
        }

        #region 方法

         ///<summary>
         ///设置正常及不可用时的背景图片
         ///</summary>
         ///<param name="i">背景图片</param>
        private void getBackImageSource(BitmapSource i)
        {
            if (i == null) {
                EnablebackImage = null;
                unEnablebackImage = null;
                return;
            }
            FormatConvertedBitmap b = new FormatConvertedBitmap();
            b.BeginInit();
            b.Source = i;
            b.DestinationFormat = PixelFormats.Gray8;
            b.EndInit();
             FormatConvertedBitmap b1 = new FormatConvertedBitmap();
            b1.BeginInit();
            b1.Source = i;
            b1.EndInit();
            EnablebackImage = b1;
            unEnablebackImage = b;
        }

        #endregion

        #region 事件

        private void UserControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (isEnable) {
                isClicking = true;
                btnImage.Margin = new Thickness(13, 6, 13, 28);
            }
        }

        private void UserControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (isEnable) {
                if (isClicking)
                {
                    isClicking = false;
                    if (click != null)
                    {
                        click(this, null);
                    }
                    btnImage.Margin = new Thickness(9, 2, 9, 24);
                }
            }
        }

        private void UserControl_MouseEnter(object sender, MouseEventArgs e)
        {
            if (isEnable) {
                btnImage.Margin = new Thickness(9, 2, 9, 24);
            }
            MainBorder.Visibility = System.Windows.Visibility.Visible;
        }

        private void UserControl_MouseLeave(object sender, MouseEventArgs e)
        {
            if (isEnable)
            {
                if (isClicking) {
                    isClicking = false;
                }
                btnImage.Margin = new Thickness(9, 2, 9, 24);
            }
            MainBorder.Visibility = System.Windows.Visibility.Hidden;
        }

        #endregion
    }
}

好了，有兴趣的同学可以研究一下，蛮简单的。