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

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

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

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

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

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

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

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

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

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

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

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

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

imageButton.xaml

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

imageButton.xaml.cs

using System;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace NingTao
{
  /// <summary>
  /// imageButton.xaml 的交互逻辑
  /// </summary>
  public partial class imageButton : UserControl
  {
    // 设置按钮使能状态
    private bool isEnable = true;
    // 按钮的4种状态图片
    private ImageSource imageUp = null;
    private ImageSource imageHover = null;
    private ImageSource imageDown = null;
    private ImageSource imageDisable = null;
    // 按钮的文本属性
    private string text = "";
    private FontFamily textFamily;
    private double textSize;
    private Brush textColor;
    // 是否在当前按钮中按下
    private bool isClicking = false;
    // 点击事件
    public event EventHandler click;

    public imageButton()
    {
      InitializeComponent();
    }

    #region 属性赋值
    // 按钮可用
    public bool IsEnable
    {
      get { return isEnable; }
      set
      {
        isEnable = value;
        imageBtn.Source = isEnable ? imageUp : imageDisable;
      }
    }
    // 按钮弹起图片
    public ImageSource ImageUp
    {
      get { return imageUp; }
      set
      {
        imageUp = value;
        imageBtn.Source = imageUp;
      }
    }
    // 按钮划过图片
    public ImageSource ImageHover
    {
      get { return imageHover; }
      set { imageHover = value; }
    }
    // 按钮按下图片
    public ImageSource ImageDown
    {
      get { return imageDown; }
      set { imageDown = value; }
    }
    // 按钮禁用图片
    public ImageSource ImageDisable
    {
      get { return imageDisable; }
      set { imageDisable = value; }
    }
    // 按钮文本
    public string Text
    {
      get { return text; }
      set
      {
        text = value;
        labelBtn.Content = text;
      }
    }
    // 按钮字体
    public FontFamily TextFamily
    {
      get { return textFamily; }
      set
      {
        textFamily = value;
        labelBtn.FontFamily = textFamily;
      }
    }
    // 按钮字号
    public double TextSize
    {
      get { return textSize; }
      set
      {
        textSize = value;
        labelBtn.FontSize = textSize;
      }
    }
    // 文字颜色
    public Brush TextColor
    {
      get { return textColor; }
      set
      {
        textColor = value;
        labelBtn.Foreground = textColor;
      }
    }
    #endregion

    #region 按钮事件
    // 进入
    private void imageBtn_MouseEnter(object sender, MouseEventArgs e)
    {
      if (isEnable)
      {
        if (null != imageHover)
        {
          imageBtn.Source = imageHover;
        }
      }
    }
    // 按下
    private void imageBtn_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
      if (isEnable)
      {
        isClicking = true;
        if (null != imageDown)
        {
          imageBtn.Source = imageDown;
        }
      }
    }
    // 弹起
    private void imageBtn_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
      if (isEnable)
      {
        // 完成在控件上点击
        if (isClicking)
        {
          isClicking = false;
          imageBtn.Source = imageUp;
          // 触发点击事件
          if (null != click) click(this, null);
        }
      }
    }
    // 离开
    private void imageBtn_MouseLeave(object sender, MouseEventArgs e)
    {
      if (isEnable)
      {
        isClicking = false;
        imageBtn.Source = imageUp;
      }
    }
    #endregion
  }
}

使用方法：

<Window x:Class="WpfTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:imageBotton ="clr-namespace:NingTao"
    Title="图片按钮演示" Height="300" Width="300">
    <Grid Loaded="Grid_Loaded">
    <imageBotton:imageButton x:Name="imgButtonA" Margin="12,12,0,0" Width="100" Height="100" HorizontalAlignment="Left" VerticalAlignment="Top"></imageBotton:imageButton>
    <imageBotton:imageButton x:Name="imgButtonV" Margin="0,12,12,0" Width="100" Height="100" HorizontalAlignment="Right" VerticalAlignment="Top"></imageBotton:imageButton>

  </Grid>
</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;
    }
  }
}

下载地址