本篇c#皮膚美化教程將對checkbox控件進行美化,最終制作出一個具有纖細藍邊的質感CheckBox,看效果圖:
或許大家已經猜出來我這個checkbox是怎麼實現的吧?不錯,就是前面的框是一個圖片,後面的文字是label。經過前面button的講解我想有能力的人完全可以單獨製作出來。還不熟悉的現在就開始跟我一步一步的來吧!GO。。。
打開上次的項目QLFUI,新建一個名爲CheckBox的用戶控件。如圖
同樣的,我們先設置一下,使其看起來像一個checkbox。具體設置如下:
CheckBox控件
Size:70,13
MinimumSize:70,13
BackColor:Transparent
然後拖一個picturebox並設置以下屬性:
Size:13,13
Location:0,0,
BackgroundImageLayout:Stretch
再拖一個label上來設置以下屬性:
AutoSize:falseLocation:15,0
Size:50:13
最終應該是這個樣子:
好了,樣子有了接下來就是編碼了!還是一樣,先貼代碼,然後我一句一句解釋:
using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; using System.Data; using System.Linq; using System.Text; using System.Windows.Forms; using System.Reflection; using System.Drawing.Imaging; namespace QLFUI { public partial class CheckBox : UserControl { #region 變量 Image _normal; Image _normalmove; Image _checkedmove; Image _checked; bool check; #endregion #region 屬性 [Category("QLFSkinDll")] [Description("控件是否被選中")] public bool Checked { get { return check; } set { if (value == true) { pictureBox1.Image = _checked; } else { pictureBox1.Image = _normal; } check = value; } } [Category("QLFSkinDll")] [Description("顯示的文字")] public string CheckBoxText { get { return this.label1.Text; } set { this.label1.Text = value; } } #endregion #region 構造函數 public CheckBox() { this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer, true); Bitmap nl = new Bitmap(Image.FromStream(Assembly.GetExecutingAssembly().GetManifestResourceStream(@"QLFUI.Res.checkbox.check.bmp"))); _normal = nl.Clone(new Rectangle(0, 0, 13, 13), PixelFormat.Format64bppPArgb); _normalmove = nl.Clone(new Rectangle(13, 0, 13, 13), PixelFormat.Format64bppPArgb); Bitmap n2 = new Bitmap(Image.FromStream(Assembly.GetExecutingAssembly().GetManifestResourceStream(@"QLFUI.Res.checkbox.check2.bmp"))); _checked = n2.Clone(new Rectangle(0, 0, 13, 13), PixelFormat.Format64bppPArgb); _checkedmove = n2.Clone(new Rectangle(13, 0, 13, 13), PixelFormat.Format64bppPArgb); InitializeComponent(); pictureBox1.Image = _normal; } #endregion #region 事件 private void pictureBox1_MouseEnter(object sender, EventArgs e) { if (check == true) { pictureBox1.Image = _checkedmove; } else { pictureBox1.Image = _normalmove; } } private void pictureBox1_MouseLeave(object sender, EventArgs e) { if (check == true) { pictureBox1.Image = _checked; } else { pictureBox1.Image = _normal; } } private void pictureBox1_MouseDown(object sender, MouseEventArgs e) { if (check == false) { pictureBox1.Image = _checkedmove; check = true; } else { pictureBox1.Image = _normalmove; check = false; } } private void label1_TextChanged(object sender, EventArgs e) { label1.Width = label1.Text.Length *((int)this.Font.Size+5); this.Width = label1.Width + 20; } private void CheckBox_SizeChanged(object sender, EventArgs e) { label1.Width = this.Width - 15; } #endregion } }
變量:
CheckBox類的開頭我定義了四個image的變量用來分別表示選中和未選中狀態下鼠標的移進移出的圖像!接下來的bool check變量就是代表該控件是否已經被選中(checkbox最重要的屬性就是這個了吧?!)。
屬性:
接下來,就是2個屬性了,我代碼裏面也註釋的很清楚。這裏只有兩個地方需要解釋一下:1, [Description("顯示的文字")]是幹什麼的?看圖你就明白了,
這下明白了吧?對,就是用來解釋你這個屬性的(別人用你的控件都不知道什麼意思,我們當然要適當的註釋一下啦)!第二點要注意的就是,在設置Checked這個屬性的時候要注意更換圖片,選中和不選中的時候的圖片不同!其他的屬性我想大家經過button控件的講解已經能很容易看明白裏面的內容了。這裏就不再羅嗦了。
接下來看構造函數。第一句this.SetStyle我就不說了,不懂可以看button裏面的講解。接下來的六句話就是得到四種狀態下的圖片了,不過得到的好像不是很簡單!這是因爲我們的原始圖片是這樣的
看見沒有,圖片是畫在一張圖片中的,所以我們需要使用bitmap的clone函數將不同矩形區域下的圖片給截取出來。這樣解釋大家應該明白了Clone的意思了吧。剩下的兩句不羅嗦了,和button裏面的一樣。
接下來該做什麼呢,根據製作button控件的經驗,我們就該開始編寫鼠標的各種事件了,並在這些事件中處理不同的背景。開始。。。
事件裏面我們一共寫了三個事件,與button不同的是這裏並沒有MouseUp事件,爲什麼呢?因爲不需要,哈哈!開個玩笑,因爲背景對於mouseup事件並不需要改變!不過如果你高興當然可以加上去。事件裏面的內容也很簡單,就是根據當前check的狀態,然後依據鼠標的狀態更換picturebox的背景。很簡單,我就不多說了。另外要注意的就是把label的對應的事件也與生成的鼠標事件關聯起來(怎麼關聯?直接在label的屬性的對應事件裏面選擇那些個已經存在的事件就行了)
好了,來運行一下看看效果吧!
運行的好像還不錯呢,我們設置的屬性都能成功應用。不過,如果我們在其他項目中引用這個控件並將CheckBoxText屬性設置的稍微長一些,我們就會發現有一部分文字顯示不出來了。這是因爲我們的控件的寬度是固定的70個像素,當label的長度更改時超過整個控件長度的部分就會被隱藏。所以我們還需要在label的內容更改時同時改變整個控件的長度以完全顯示文字的內容。
看代碼,我們寫一個label文字更改時的事件label1_TextChanged,當label中的文字改變時就會觸發這個事件。事件裏面的第一句就是根據文字的個數計算label需要顯示的寬度。字體的寬度是用(int)this.Font.Size+ 5來得到的(這個寬度我測試的基本能得到要求),得到了label的寬度我們只要將這個寬度加20(圖片的寬度)就大概得到了整個控件的寬度,這樣文字就能正常顯示了。當然爲了以防萬一我們還要加一個事件(基本用不上,不過保險嘛,呵呵)就是CheckBox SizeChanged事件了(見代碼),當我們手動拉動checkbox時手動改變label的長度,這樣即使上面一個事件打不到要求有些文字沒有顯示出來,我們只要手動拖一下checkbox的長度那文字肯定就能顯示出來了。
OK,checkbox控件製作完成。
原文:http://www.blue1000.com/bkhtml/2010-12/69871p2.htm