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

下载地址