WPF程序员自定义控库系列（一）——图片按钮

一般漂亮点的软件界面都不会使用系统默认的按钮样式，其中异形的图片按钮使用频率比较高。

本猿不想每次需要的时候再重新写一遍或者大段的复制粘贴代码，所以做了一个自定义的图片按钮控件。

扩充一下自己的控件库，方便以后使用。

 

做之前也查了不少资料，发现写XAML样式和触发器可以实现很多很炫的动画效果。

用express工具也可以做出很炫的水晶按钮。

可惜本猿是从C++到C#再转到WPF的，所以上面2样都不是很熟。

没有用样式和触发器，直接用C#方式来实现的。

按钮最多包括4态的图片。弹起、经过、按下、禁用，其中弹起和按下时必须的。

初始化图片按钮控件的时候指定2到4张图片的路径，动态载入指定图片。

将来实现实时换肤的功能时也比较简单。

控件捕获其内部image控件的鼠标事件，改变image的显示图片。

鼠标在控件内按下然后弹起，则认为是点击事件，触发该控件的自定义点击事件。

 

imageButton.xaml

1 <UserControl x:Class="NingTao.imageButton"
2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
4   <Grid>
5     <Image Margin="0" Name="imageBtn" Stretch="Fill" MouseLeftButtonDown="imageBtn_MouseLeftButtonDown" MouseLeftButtonUp="imageBtn_MouseLeftButtonUp" MouseLeave="imageBtn_MouseLeave" MouseEnter="imageBtn_MouseEnter" />
6     <Label Margin="0" Name="labelBtn" HorizontalAlignment="Center" VerticalAlignment="Center" IsHitTestVisible="False"></Label>
7   </Grid>
8 </UserControl>

 

imageButton.xaml.cs

  1 using System;
  2 using System.Windows.Controls;
  3 using System.Windows.Input;
  4 using System.Windows.Media;
  5 
  6 namespace NingTao
  7 {
  8   /// <summary>
  9   /// imageButton.xaml 的交互逻辑
 10   /// </summary>
 11   public partial class imageButton : UserControl
 12   {
 13     // 设置按钮使能状态
 14     private bool isEnable = true;
 15     // 按钮的4种状态图片
 16     private ImageSource imageUp = null;
 17     private ImageSource imageHover = null;
 18     private ImageSource imageDown = null;
 19     private ImageSource imageDisable = null;
 20     // 按钮的文本属性
 21     private string text = "";
 22     private FontFamily textFamily;
 23     private double textSize;
 24     private Brush textColor;
 25     // 是否在当前按钮中按下
 26     private bool isClicking = false;
 27     // 点击事件
 28     public event EventHandler click;
 29 
 30     public imageButton()
 31     {
 32       InitializeComponent();
 33     }
 34 
 35     #region 属性赋值
 36     // 按钮可用
 37     public bool IsEnable
 38     {
 39       get { return isEnable; }
 40       set
 41       {
 42         isEnable = value;
 43         imageBtn.Source = isEnable ? imageUp : imageDisable;
 44       }
 45     }
 46     // 按钮弹起图片
 47     public ImageSource ImageUp
 48     {
 49       get { return imageUp; }
 50       set
 51       {
 52         imageUp = value;
 53         imageBtn.Source = imageUp;
 54       }
 55     }
 56     // 按钮划过图片
 57     public ImageSource ImageHover
 58     {
 59       get { return imageHover; }
 60       set { imageHover = value; }
 61     }
 62     // 按钮按下图片
 63     public ImageSource ImageDown
 64     {
 65       get { return imageDown; }
 66       set { imageDown = value; }
 67     }
 68     // 按钮禁用图片
 69     public ImageSource ImageDisable
 70     {
 71       get { return imageDisable; }
 72       set { imageDisable = value; }
 73     }
 74     // 按钮文本
 75     public string Text
 76     {
 77       get { return text; }
 78       set
 79       {
 80         text = value;
 81         labelBtn.Content = text;
 82       }
 83     }
 84     // 按钮字体
 85     public FontFamily TextFamily
 86     {
 87       get { return textFamily; }
 88       set
 89       {
 90         textFamily = value;
 91         labelBtn.FontFamily = textFamily;
 92       }
 93     }
 94     // 按钮字号
 95     public double TextSize
 96     {
 97       get { return textSize; }
 98       set
 99       {
100         textSize = value;
101         labelBtn.FontSize = textSize;
102       }
103     }
104     // 文字颜色
105     public Brush TextColor
106     {
107       get { return textColor; }
108       set
109       {
110         textColor = value;
111         labelBtn.Foreground = textColor;
112       }
113     }
114     #endregion
115 
116     #region 按钮事件
117     // 进入
118     private void imageBtn_MouseEnter(object sender, MouseEventArgs e)
119     {
120       if (isEnable)
121       {
122         if (null != imageHover)
123         {
124           imageBtn.Source = imageHover;
125         }
126       }
127     }
128     // 按下
129     private void imageBtn_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
130     {
131       if (isEnable)
132       {
133         isClicking = true;
134         if (null != imageDown)
135         {
136           imageBtn.Source = imageDown;
137         }
138       }
139     }
140     // 弹起
141     private void imageBtn_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
142     {
143       if (isEnable)
144       {
145         // 完成在控件上点击
146         if (isClicking)
147         {
148           isClicking = false;
149           imageBtn.Source = imageUp;
150           // 触发点击事件
151           if (null != click) click(this, null);
152         }
153       }
154     }
155     // 离开
156     private void imageBtn_MouseLeave(object sender, MouseEventArgs e)
157     {
158       if (isEnable)
159       {
160         isClicking = false;
161         imageBtn.Source = imageUp;
162       }
163     }
164     #endregion
165   }
166 }

 

使用方法：

 1 <Window x:Class="WpfTest.Window1"
 2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4     xmlns:imageBotton ="clr-namespace:NingTao"
 5     Title="图片按钮演示" Height="300" Width="300">
 6     <Grid Loaded="Grid_Loaded">
 7     <imageBotton:imageButton x:Name="imgButtonA" Margin="12,12,0,0" Width="100" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top"></imageBotton:imageButton>
 8     <imageBotton:imageButton x:Name="imgButtonV" Margin="0,12,12,0" Width="100" Height="100" HorizontalAlignment="Right" VerticalAlignment="Top"></imageBotton:imageButton>
 9 
10   </Grid>
11 </Window>
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 WpfTest
{
  /// <summary>
  /// Window1.xaml 的交互逻辑
  /// </summary>
  public partial class Window1 : Window
  {
    public Window1()
    {
      InitializeComponent();
    }

    private void Grid_Loaded(object sender, RoutedEventArgs e)
    {
      // 加载按钮图片
      try
      {
        imgButtonA.ImageUp = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "\\skins\\a1.png"));
        imgButtonA.ImageHover = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "\\skins\\a2.png"));
        imgButtonA.ImageDown = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "\\skins\\a3.png"));
        imgButtonA.ImageDisable = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "\\skins\\a4.png"));

        imgButtonV.ImageUp = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "\\skins\\v1.png"));
        imgButtonV.ImageHover = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "\\skins\\v2.png"));
        imgButtonV.ImageDown = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "\\skins\\v3.png"));
        imgButtonV.ImageDisable = new BitmapImage(new Uri(System.Environment.CurrentDirectory + "\\skins\\v4.png"));
      }
      catch
      {
        MessageBox.Show("按钮图片加载出错！");
      }
      // 按钮文字
      imgButtonA.Text = "禁用按钮2";
      imgButtonV.Text = "禁用按钮1";
      // 按钮点击事件
      imgButtonA.click += new EventHandler(imgButtonA_click);
      imgButtonV.click += new EventHandler(imgButtonV_click);
    }

    // 禁用按钮2
    void imgButtonA_click(object sender, EventArgs e)
    {
      imgButtonV.IsEnable = !imgButtonV.IsEnable;
    }

    // 禁用按钮1
    void imgButtonV_click(object sender, EventArgs e)
    {
      imgButtonA.IsEnable = !imgButtonA.IsEnable;
    }
  }
}

 

下载地址

posted @ 2013-05-09 18:02  geeksnail  阅读(11244)  评论(2)  编辑  收藏  举报