blavince's BLOG

Giving is a reward in itself.

0%

Winform UI 客製化(二) - 分頁

Posted on Edited on In
設計 UI 時, 將功能分門別類擺在不同分頁, 利用 panel + UserControl 的方式來達成這個目的.

前言

延續 Winform UI 客製化(一) - 窗體

本文

  1. 善用 panel 控件做排版
  2. panel 容器內新增 UserControl
  3. 切換分頁功能.

1. 善用 panel 控件做排版

  1. 修改 Form1 (窗體) :

    • BackColor: 41, 53, 65
    • FormBorderStyle: None
    • Size: 500, 300

  2. 新增 panel1 (上方標題欄) :

    • BackColor: 41, 44, 50
    • FormBorderStyle: None
    • Dock: Top
    • Location: 0, 0
    • Size: 500, 30
    • 新增 Label1、Label2 : blavince’s BLOG、X

  3. 新增 panel2 (左側按鈕區) :

    • BackColor: 41, 53, 65
    • Dock: Left
    • Location: 0, 30
    • Size: 130, 270
    • 新增 button1、button2 : button1、button2

  4. 新增 panel3 (右側內容顯示) :

    • BackColor: Gainsboro
    • Dock: Right
    • Location: 130, 30
    • Size: 370, 270

  5. 新增 panel4、panel5 (左側 button1 與 光條) :

    • BackColor: 47, 152, 226

  6. 新增 panel6、panel7 (左側 button2 與 光條) :

    • BackColor: 47, 152, 226

做專案時, 控件名稱要做有意義的命名喔!

2. panel 容器內新增 UserControl

對解決方案點擊滑鼠右鍵: 加入(D) → 新增項目(W)

→ 使用者控制項 → 新增(A), 新增 UserControl1.cs

重複上述動作再新增 UserControl2.cs, 並調整參數如下:

  1. 修改 UserControl1.cs:
    • BackColor: Gainsboro
    • Size: 370, 270
    • 新增 Label1: Hello World!
  2. 修改 UserControl2.cs:
    • BackColor: Gainsboro
    • Size: 370, 270
    • 新增 Label1: WOW

3. 切換分頁功能

最後回到 Form1.cs:

  • 宣告 UserControl1、UserControl2 的實例:
    1
    2
    WindowsFormsApp1.UserControl1 U1 = new WindowsFormsApp1.UserControl1();
    WindowsFormsApp1.UserControl2 U2 = new WindowsFormsApp1.UserControl2();
  • button1 按下時顯示 UserControl1:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    private void button1_Click(object sender, EventArgs e)
    {            
        panel5.Visible = true;
        panel7.Visible = false;

        if (!panel2.Controls.Contains(U1))
        {
            panel2.Controls.Add(U1);
            U1.Dock = DockStyle.Fill;
            U1.BringToFront();
        }
        else
        {
            U1.BringToFront();
        }            
    }
    U1
  • button2 按下時顯示 UserControl2:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    private void button1_Click(object sender, EventArgs e)
    {            
        panel5.Visible = false;
        panel7.Visible = true;

        if (!panel2.Controls.Contains(U2))
        {
            panel2.Controls.Add(U2);
            U2.Dock = DockStyle.Fill;
            U2.BringToFront();
        }
        else
        {
            U2.BringToFront();
        }            
    }
    U2