跟我學做c#皮膚美化（三）

跟我學做c#皮膚美化（三）

                                                                   --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控制項製作完成。

下一篇就會開始先製作表單部分。。。敬請期待！