手把手教你創建一個Windows風格的應用程序界面(Part 2)

本文主要介紹如何手動創建Windows Modern UI 應用程序,要使用 DevExpress 模板庫創建應用程序。

獲取工具下載 - DevExpress WinForm v21.1

DevExpress技術交流羣4:715863792      歡迎一起進羣討論

1. 在 Visual Studio 中,單擊 “File | New | Project”(或按CTRL+SHIFT+N)創建一個新的項目。選擇 “DevExpress Template Gallery” 然後單擊OK。

創建現代Windows風格的應用界面 - 圖集1

2. 選擇“Blank Application”模板並點擊“Create Project”。

創建現代Windows風格的應用界面 - 圖集2

3. 調用智能標籤並單擊“Convert To Skinnable Form”將常規表單更改爲 XtraForm。

創建現代Windows風格的應用界面 - 圖集3

4. 在同一個智能標籤面板中,單擊“Select Skin…”來添加DefaultLookAndFeel組件並選擇所需的 DevExpress 皮膚。 對於 Windows Modern UI,請選擇外觀輕巧且邊框細或無邊框的扁平皮膚(例如,Office 2013、Office 2016、Metropolis 等)。

創建現代Windows風格的應用界面 - 圖集4

5. 將表單的FormBorderStyle屬性設置爲None,將 WindowState 屬性設置爲 Maximized。

6. 單擊表單上的“Instant Layout Assistant”鏈接來啓動表單嚮導,將鼠標懸停在所有側面區域上,然後單擊“Remove Area”。在剩餘的空白區域中,單擊“Add Control”並選擇“App UI Manager | Windows UI”,接下來單擊應用按鈕來添加應用了WindowsUIView  DocumentManager組件。

創建現代Windows風格的應用界面 - 圖集5

7. 右鍵單擊Solution Explorer窗口中的項目,然後選擇“Add DevExpress Item | User Control…”。

創建現代Windows風格的應用界面 - 圖集6

8. 添加更多用戶控件並填充它們,這些用戶控件將作爲單獨的應用程序屏幕呈現。

創建現代Windows風格的應用界面 - 圖集7

9. 返回主應用程序表單,調用 DocumentManager 組件的智能標記,然後單擊 “Run Designer”,切換到設計器的 “Elements | Documents”選項卡並單擊“Populate”。

創建現代Windows風格的應用界面 - 圖集8

單擊 “Populate”後,文檔管理器將生成以下內容:

C#

 

void windowsUIView1_QueryControl(object sender, DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs e) {
if (e.Document == ucSample1Document)
e.Control = new WinModernUI.ucSample1();
if (e.Document == ucSample2Document)
e.Control = new WinModernUI.ucSample2();
// . . .
if (e.Control == null)
e.Control = new System.Windows.Forms.Control();
}

 

VB.NET

 

Private Sub windowsUIView1_QueryControl(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs)
If e.Document = ucSample1Document Then
e.Control = New WinModernUI.ucSample1()
End If
If e.Document = ucSample2Document Then
e.Control = New WinModernUI.ucSample2()
End If
' . . .
If e.Control Is Nothing Then
e.Control = New System.Windows.Forms.Control()
End If
End Sub

 

10. 運行並檢查您的應用程序。在應用程序啓動時,會顯示一個填充有磁貼的自動生成的磁貼控件,按 Esc 或右鍵單擊空白表單空間來調用帶有嵌入式“Exit”按鈕的導航欄。

創建現代Windows風格的應用界面 - 圖集9

Tiles 利用Tile.Document 屬性鏈接到相應的文檔。 單擊磁貼時,動態生成的頁面容器會顯示帶有嵌入式”Back”按鈕的文檔,導航欄中顯示相同的按鈕。

創建現代Windows風格的應用界面 - 圖集10

11. 關閉應用程序對其進行更改。首先使用WindowsUIView.CaptionBaseContentContainer.Caption  BaseContentContainer.Subtitle屬性添加應用程序標題字符串,此外使用 BaseDocument.Caption屬性來修改自動生成的文檔標題。

注意:最初您不會看到WindowsUIView.Caption字符串,因爲磁貼容器標題將與它重疊。 但是此標題在內容容器標頭中可見,將在本教程後面創建。

創建現代Windows風格的應用界面 - 圖集11

12. 跳轉到設計器的“Elements”頁面並選擇“Content Containers” 選項卡,單擊“Add New Container”並從下拉菜單中選擇Page Group

創建現代Windows風格的應用界面 - 圖集12

13. 切換到設計器的“Layout | Navigation Tree”選項卡並將文檔拖到頁面組的“Items”集合中。

創建現代Windows風格的應用界面 - 圖集13

DevExpress WinForm | 下載試用

DevExpress WinForm擁有180+組件和UI庫,能爲Windows Forms平臺創建具有影響力的業務解決方案。DevExpress WinForms能完美構建流暢、美觀且易於使用的應用程序,無論是Office風格的界面,還是分析處理大批量的業務數據,它都能輕鬆勝任!

更多DevExpress線上公開課、中文教程資訊請上中文網獲取

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章