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

好了，有興趣的同學可以研究一下，蠻簡單的。