WPF利用Image实现图片按钮

  之前有一篇文章也是采用了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 }

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

posted @ 2015-12-25 08:59  我丫的是条鱼  Views(19470)  Comments(0)  Edit  收藏  举报