WPF程序員自定義控庫系列（一）——圖片按鈕

本文轉載自查看原文 2013-05-09 18:02 10401 圖片按鈕/ 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;
    }
  }
}

下載地址

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 WPF程序員自定義控庫系列（二）——旋轉按鈕自定義注解！絕對是程序員裝逼的利器！！ wpf 自定義Button按鈕一個自定義的WPF滑塊按鈕 [WPF 自定義控件]自定義控件庫系列文章程序員過關斬將--自定義線程池來實現文檔轉碼 WPF自定義圓形按鈕樣式資源文件 WPF 自定義窗口關閉按鈕 WPF 如何創建自己的WPF自定義控件庫 [WPF 自定義控件]開始一個自定義控件庫項目