摘要：
背景图片<；9unEnablebackImage=空；11} 12FormatConvertedBitmapb=新格式转换位图（）；14b.来源=i；21EnablebackImage=b1；11<；15<；4使用System.Text；5使用System.Windows；
之前有一篇文章也是采用了Image实现的图片按钮，不过时间太久远了，忘记了地址。好吧，这里我进行了进一步的改进，原来的文章中需要设置4张图片，分别为可用时，鼠标悬浮时，按钮按下时，按钮不可用时的图片，这里我只用了一张图片，利用C#的图片灰度处理自动获得不可用时的图片，利用图片的间距实现悬浮及按下效果。先上效果：（正常 悬浮 按下 不可用）
代码其实比较简单，唯一的难点就是把图片转换成ImageSource，在网上找了很久终于找到了一个,转换代码如下：
1 ///<summary> 2 ///设置正常及不可用时的背景图片 3 ///</summary> 4 ///<param name="i">背景图片</param> 5 private void getBackImageSource(BitmapSource i) 6 { 7 if (i == null) { 8 EnablebackImage = null; 9 unEnablebackImage = null; 10 return; 11 } 12 FormatConvertedBitmap b = new FormatConvertedBitmap(); 13 b.BeginInit(); 14 b.Source = i; 15 b.DestinationFormat = PixelFormats.Gray8; 16 b.EndInit(); 17 FormatConvertedBitmap b1 = new FormatConvertedBitmap(); 18 b1.BeginInit(); 19 b1.Source = i; 20 b1.EndInit(); 21 EnablebackImage = b1; 22 unEnablebackImage = b; 23 }
前端采用Image作为主体部分，利用Border模仿按钮的边框，TextBlock作为文本显示。注意：代码主体部分利用ViewBox保证控件大小变化时不发生变形。代码如下：
1 <UserControl x:Class="BaseModel.ImageButton" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 6 mc:Ignorable="d" 7 d:DesignHeight="74" d:DesignWidth="60" Width="66" Height="76" MouseLeftButtonDown="UserControl_MouseLeftButtonDown" MouseLeftButtonUp="UserControl_MouseLeftButtonUp" MouseEnter="UserControl_MouseEnter" MouseLeave="UserControl_MouseLeave"> 8 <Viewbox> 9 <Grid> 10 <Border Name ="MainBorder" Width="66" Height="76" BorderBrush="White" BorderThickness="2" Background="White" Opacity="0.5" Visibility="Hidden"/> 11 <Image Name="btnImage" Width="48" Height="48" Stretch="Fill" Margin="9,2,9,24"/> 12 <TextBlock Name="btnText" Text="" FontSize="10" Width="66" IsHitTestVisible="False" TextAlignment="Center" TextWrapping="Wrap" Margin="0,52,0,2"/> 13 </Grid> 14 </Viewbox> 15 </UserControl>
后台主要实现了鼠标悬浮和按下时的效果，以及按钮是否可用切换时图片的选择，代码如下：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Windows; 6 using System.Windows.Controls; 7 using System.Windows.Data; 8 using System.Windows.Documents; 9 using System.Windows.Input; 10 using System.Windows.Media; 11 using System.Windows.Media.Imaging; 12 using System.Windows.Navigation; 13 using System.Windows.Shapes; 14 15 namespace BaseModel 16 { 17 /// <summary> 18 /// ImageButton.xaml 的交互逻辑 19 /// </summary> 20 public partial class ImageButton : UserControl 21 { 22 #region 属性 23 24 //按钮是否可用 25 private bool isEnable = true; 26 //按钮文本 27 private string text = ""; 28 //按钮文本字体 29 private FontFamily textFamily = new FontFamily("宋体"); 30 //按钮文本字体大小 31 private double textSize = 10; 32 //按钮文本字体颜色 33 private Brush textColor = Brushes.Black; 34 //正在被按下状态 35 private bool isClicking = false; 36 //背景图片 37 private BitmapSource backImage; 38 //正常背景资源 39 private ImageSource EnablebackImage; 40 //不可用背景资源 41 private ImageSource unEnablebackImage; 42 //按下事件 43 public event EventHandler click; 44 /// <summary> 45 /// 设置或获取控件可用状态 46 /// </summary> 47 [System.ComponentModel.Browsable(true), System.ComponentModel.Category("Appearance"),System.ComponentModel.Description("设置或获取控件可用状态")] 48 public bool IsEnable { 49 get { 50 return isEnable; 51 } 52 set { 53 this.btnText.IsEnabled = value; 54 this.btnImage.IsEnabled = value; 55 isEnable = value; 56 if (isEnable) 57 { 58 btnImage.Source = EnablebackImage; 59 } 60 else 61 { 62 btnImage.Source = unEnablebackImage; 63 } 64 } 65 } 66 /// <summary> 67 /// 设置或获取控件文本 68 /// </summary> 69 [System.ComponentModel.Browsable(true), System.ComponentModel.Category("Appearance"), System.ComponentModel.Description("设置或获取控件文本")] 70 public string Text { 71 get { 72 return text; 73 } 74 set { 75 this.btnText.Text = value; 76 text = value; 77 } 78 } 79 /// <summary> 80 /// 设置或获取控件文本字体 81 /// </summary> 82 [System.ComponentModel.Browsable(true), System.ComponentModel.Category("Appearance"), System.ComponentModel.Description("设置或获取控件文本字体")] 83 public FontFamily TextFamily 84 { 85 get 86 { 87 return textFamily; 88 } 89 set 90 { 91 this.btnText.FontFamily = value; 92 textFamily = value; 93 } 94 } 95 /// <summary> 96 /// 设置或获取控件文本字体大小 97 /// </summary> 98 [System.ComponentModel.Browsable(true), System.ComponentModel.Category("Appearance"), System.ComponentModel.Description("设置或获取控件文本字体大小")] 99 public double TextSize 100 { 101 get 102 { 103 return textSize; 104 } 105 set 106 { 107 this.btnText.FontSize = value; 108 textSize = value; 109 } 110 } 111 /// <summary> 112 /// 设置或获取控件文本字体颜色 113 /// </summary> 114 [System.ComponentModel.Browsable(true), System.ComponentModel.Category("Appearance"), System.ComponentModel.Description("设置或获取控件文本字体颜色")] 115 public Brush TextColor 116 { 117 get 118 { 119 return textColor; 120 } 121 set 122 { 123 this.btnText.Foreground = value; 124 textColor = value; 125 } 126 } 127 /// <summary> 128 /// 设置或获取控件背景图片 129 /// </summary> 130 [System.ComponentModel.Browsable(true), System.ComponentModel.Category("Appearance"), System.ComponentModel.Description("设置或获取控件背景图片")] 131 public BitmapSource BackImage 132 { 133 get 134 { 135 return backImage; 136 } 137 set 138 { 139 backImage = value; 140 getBackImageSource(value); 141 if (isEnable) 142 { 143 btnImage.Source = EnablebackImage; 144 } 145 else 146 { 147 btnImage.Source =unEnablebackImage; 148 } 149 } 150 } 151 152 #endregion 153 154 public ImageButton() 155 { 156 InitializeComponent(); 157 } 158 159 #region 方法 160 161 ///<summary> 162 ///设置正常及不可用时的背景图片 163 ///</summary> 164 ///<param name="i">背景图片</param> 165 private void getBackImageSource(BitmapSource i) 166 { 167 if (i == null) { 168 EnablebackImage = null; 169 unEnablebackImage = null; 170 return; 171 } 172 FormatConvertedBitmap b = new FormatConvertedBitmap(); 173 b.BeginInit(); 174 b.Source = i; 175 b.DestinationFormat = PixelFormats.Gray8; 176 b.EndInit(); 177 FormatConvertedBitmap b1 = new FormatConvertedBitmap(); 178 b1.BeginInit(); 179 b1.Source = i; 180 b1.EndInit(); 181 EnablebackImage = b1; 182 unEnablebackImage = b; 183 } 184 185 #endregion 186 187 #region 事件 188 189 private void UserControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 190 { 191 if (isEnable) { 192 isClicking = true; 193 btnImage.Margin = new Thickness(13, 6, 13, 28); 194 } 195 } 196 197 private void UserControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 198 { 199 if (isEnable) { 200 if (isClicking) 201 { 202 isClicking = false; 203 if (click != null) 204 { 205 click(this, null); 206 } 207 btnImage.Margin = new Thickness(9, 2, 9, 24); 208 } 209 } 210 } 211 212 private void UserControl_MouseEnter(object sender, MouseEventArgs e) 213 { 214 if (isEnable) { 215 btnImage.Margin = new Thickness(9, 2, 9, 24); 216 } 217 MainBorder.Visibility = System.Windows.Visibility.Visible; 218 } 219 220 private void UserControl_MouseLeave(object sender, MouseEventArgs e) 221 { 222 if (isEnable) 223 { 224 if (isClicking) { 225 isClicking = false; 226 } 227 btnImage.Margin = new Thickness(9, 2, 9, 24); 228 } 229 MainBorder.Visibility = System.Windows.Visibility.Hidden; 230 } 231 232 #endregion 233 } 234 }
好了，有兴趣的同学可以研究一下，蛮简单的。