winform專案——仿QQ即時通訊程式03：搭建登入介面
上兩篇文章已經對CIM仿QQ即時通訊專案進行了需求分析和資料庫設計。
winform專案——仿QQ即時通訊程式01：原理及專案分析
winform專案——仿QQ即時通訊程式02：資料庫分析設計
今天這篇文章本來打算介紹CIM所有的介面設計，CIM的介面總共有7個，分別是登入介面、主介面、聊天介面、搜尋好友介面、新增好友介面、個人資料介面、驗證訊息介面。為了照顧新手，我將對登入介面的搭建進行非常詳細的講解，其餘的窗體將不再具體到每一步該怎麼點選。希望讀者朋友們踴躍留言反饋。文末會貼出最後做出來的效果。
首先放一個QQ的登入介面，我們就照著它的樣子做，本教程目的是為了讓新手學習winform如何快速佈局，而且CIM仿QQ即時通訊程式主要是實現核心的聊天功能，一些介面的小細節就不做了。像中間的圓形頭像、右下角的二維碼、右上角的設定按鈕就不做了。
登入介面的詳細搭建步驟如下。
軟體環境：Visual Studio 2015
程式語言：C#
建立Windows窗體專案
第一步就是建立CIM窗體專案
建立CIM即時通訊軟體windows窗體專案。
1。開啟Visual Studio2015（2005以上版本都可以）
2。點選“檔案”選單，指向“新建”，然後單擊“專案”開啟“新建專案”對話方塊
3。從Visual C#專案列表中選擇“Windows窗體應用程式”，在“名稱”框中鍵入“CIM即時通訊程式”，然後單擊“確定”。
4。在解決方案資源管理器中，右鍵單擊“Form1。cs”，然後單擊“重新命名”。將檔名更改為Login。cs。當系統詢問是否對此專案中對程式碼元素“From1”的所有引用執行重新命名操作時，單擊“是”。
設計控制元件佈局
Login登入介面包含多個Windows窗體控制元件。在此過程中，將使用Windows窗體設計器的一些快速應用程式開發（RAD）功能排列控制元件。
設計Login登入介面的佈局
1。在Windows窗體設計器中，右鍵單擊窗體，在彈出的選單中選擇“屬性”。
2。在屬性視窗中，將（Name）屬性改為Login。將BackColor屬性改為White，即白色背景色。將FormBorderStyle屬性改為None，窗體將變成無任何邊框的樣式。將Size屬性中的寬度設定為570，高度設定為412。將StartPosition屬性改為CenterScreen，窗體啟動後將顯示在螢幕中心位置。
3。在工具箱中，單擊“容器”節點以開啟該節點。選擇SplitContainer控制元件並將該控制元件拖動到設計器上。
注意：SplitContainer控制元件會調整自身大小以適應Login窗體的大小。本質上是因為該控制元件的Dock屬性為Fill。
4。單擊SplitContainer控制元件右上角的智慧標記符號（右上角的三角符號）。單擊“水平拆分方向”，控制元件將分成上下兩個面板。
5。在窗體設計器上，單擊右鍵，單擊選擇splitContainer1，按F4開啟splitContainer1屬性視窗。
注意，當有多個控制元件覆蓋時，無法直接選擇某個控制元件，可以透過右鍵選單選擇具體的某個控制元件，然後用快捷鍵F4開啟屬性。
6。在屬性視窗中，將IsSplitterFixed改為True，上下面板將無法手動調整佔比大小。將SplitterDistance屬性改為155，上下面板佔比將改變。這就是Login介面的上下兩塊區域。
7。在工具箱的“容器”節點中，將TableLayoutPanel控制元件拖入SplitContainer控制元件的下面板。
TableLayoutPanel 控制元件顯示在設計器圖面上，並且該控制元件的智慧標記面板開啟。TableLayoutPanel 控制元件在一個網格內
排列其子控制元件。
8。單擊智慧標記面板上的“編輯行和列”。
“列和行樣式”對話方塊開啟。
9。單擊三次“新增”按鈕，將顯示5列。選擇全部五列，然後單擊“大小型別”框中的“百分比”選項按鈕。將“百分比”值設定為 20。此操作將每一列設定為同一寬度。
10。在“顯示”下拉框中單擊“行”。
11。單擊三次“新增”按鈕，將顯示5行。從上至下，將每一行的百分比依次設定為30%、23%、14%、23%、10%。此操作將為5行設定不同的高度，符合我們的需求。
12。在TableLayoutPanel屬性視窗中，將Dock屬性的值更改為Fill（選擇中間的方塊就是Fill）。
填充控制元件
至此，我們已經完成了控制元件的佈局，現在可以用其它控制元件來填充Login介面了。
填充Login登入介面
1。在工具箱中，將TextBox控制元件拖入TableLayoutPanel控制元件的第一行第二列中。
2。在textBox1的屬性視窗中，將Anchor屬性改為Bottom， Left， Right，該控制元件將處於單元格的下方。將ColumnSpan屬性改為3，控制元件將佔用三列位置。展開“Font”屬性節點，將Size設定為16，Bold設定為True。
3。在工具箱中，將TextBox控制元件拖入TableLayoutPanel控制元件的第二行第二列中。
4。在textBox2的屬性視窗中，將Anchor屬性改為Left，Right。將ColumnSpan屬性改為3，控制元件將佔用三列位置。展開“Font”屬性節點，將Size設定為16，Bold設定為True。將PasswordChar屬性設定為“●”，用於代替密碼符號。
5。在工具箱中，將CheckBox控制元件拖入TableLayoutPanel控制元件的第三行第二列中。
6。在CheckBox1屬性視窗中，將Anchor屬性改為None，控制元件將在單元格中居中。將ForeColor屬性改為DarkGray。將Text屬性改為“記住密碼”。
7。在工具箱中，將Label控制元件拖入TableLayoutPanel控制元件的第三行第四列中。
8。在label1的屬性視窗中，將Anchor屬性改為None。將ForeColor屬性改為DarkGray。將Text屬性改為“找回密碼”。
9。在工具箱中，將Button控制元件拖入TabelLayoutPanel控制元件的第四行第二列中。
10。在button1的屬性視窗中，將BackColor屬性改為DeepSkyBlue。將ColumnSpan屬性改為3。將Dock屬性改為Fill。將FlatStyle屬性改為Flat。展開“Font”屬性節點，將Name改為“微軟雅黑Light”，Size改為12，Bold改為True。將ForeColor屬性改為White。將Text屬性改為登入。
11。選中label1控制元件，ctrl C，ctrl V，將複製一個label2到第一行第一列單元格，拖動label2到第五行第一列單元格。
12。在label2屬性視窗中，將Text屬性改為註冊賬號。
至此，介面的下部分控制元件已經填充完成。
13。單擊上部分割槽域，將選中splitContainer1控制元件的Panel1子控制元件。
14。在splitContainer1。Panel1的屬性視窗中，單擊BackgroundImage屬性右側的方塊，將彈出選擇資源視窗。
15。選擇專案資原始檔選項，單擊“匯入”按鈕，從彈出的檔案選擇對話方塊中，選擇一張電腦上準備好的背景圖片，單擊“確定”。此操作為splitContainer1。Panel1設定背景圖片。
16。在工具箱中，將Label控制元件拖入splitContainer1。Panel1中。連續拖入兩個Label控制元件。
17。同時選擇這兩個Label控制元件，按F4開啟屬性視窗中，將AutoSize改為False。將BackColor屬性設定為Transparent，Label控制元件將會背景透明。展開“Font”屬性節點，將Size改為14，Bold改為True。將ForeColor屬性改為White。將Size改為40，40。將TextAlign改為MiddleCenter。
18。將label3的Text屬性改為一個符號橫：？，Location改為490，0。直接複製我這裡的字元就行了。
19。將label4的Text屬性改為符號錯：×，Location改為530，0。直接複製我這裡的字元就行了。
20。在工具箱中，將Label控制元件拖入splitContainer1。Panel1中。
22。在label5的屬性視窗中，將BackColor屬性設定為Transparent。展開“Font”屬性節點，將Size改為18。將ForeColor屬性改為White。將Location改為3，9。將Text屬性改為§CIM，作為登入介面的logo。
至此，已經完成了登入介面Login窗體的首頁設計。
因為還有一個註冊頁面也要在Login窗體中做，不過它是點選“使用者註冊”才出現的。因為篇幅的關係，本篇文章就介紹到這裡，根據這些步驟，就能夠非常完整的搭建一個login登入介面的。下一篇文章將繼續未完成的註冊介面。
本文系小部落格網站原創，轉載請註明文章連結地址