之前有一篇文章也是采用了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
}
}
好了，有兴趣的同学可以研究一下，蛮简单的。