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

這一篇講的是如何制作美化的checkbox控件!

跟我學做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控件制作完成。

下一篇就會開始先制作窗體部分。。。敬請期待！

posted @ 2010-04-15 12:58 qianlifeng 閱讀(10789) 評論(8) 收藏舉報

刷新頁面返回頂部

qianlifeng

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

公告