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="" d:DesignWidth="" Width="" Height="" MouseLeftButtonDown="UserControl_MouseLeftButtonDown" MouseLeftButtonUp="UserControl_MouseLeftButtonUp" MouseEnter="UserControl_MouseEnter" MouseLeave="UserControl_MouseLeave">
     <Viewbox>
     <Grid>
             <Border Name ="MainBorder" Width="" Height="" BorderBrush="White" BorderThickness="" Background="White" Opacity="0.5" Visibility="Hidden"/>
             <Image Name="btnImage" Width="" Height="" Stretch="Fill" Margin="9,2,9,24"/>
         <TextBlock Name="btnText" Text="" FontSize="" Width="" 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 = ;
         //按钮文本字体颜色
         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(, , , );
             }
         }

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

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

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

         #endregion
     }
 }

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