手把手教你建立一個Windows風格的應用程式介面（Part 2）

語言: CN / TW / HK

時間 2021-07-29 10:01:23 FILA6666

AI開發究竟在開發什麼？10分鐘瞭解它的基本過程>>>

本文主要介紹如何手動建立Windows Modern UI 應用程式，要使用 DevExpress 模板庫建立應用程式。

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

DevExpress技術交流群4：715863792 歡迎一起進群討論

1. 在 Visual Studio 中，單擊 “File | New | Project”（或按CTRL+SHIFT+N）建立一個新的專案。選擇 “DevExpress Template Gallery” 然後單擊OK。

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

3. 呼叫智慧標籤並單擊“Convert To Skinnable Form”將常規表單更改為 XtraForm。

4. 在同一個智慧標籤面板中，單擊“Select Skin…”來新增DefaultLookAndFeel元件並選擇所需的 DevExpress 面板。對於 Windows Modern UI，請選擇外觀輕巧且邊框細或無邊框的扁平面板（例如，Office 2013、Office 2016、Metropolis 等）。

5. 將表單的FormBorderStyle屬性設定為None，將 WindowState 屬性設定為 Maximized。

6. 單擊表單上的“Instant Layout Assistant”連結來啟動表單嚮導，將滑鼠懸停在所有側面區域上，然後單擊“Remove Area”。在剩餘的空白區域中，單擊“Add Control”並選擇“App UI Manager | Windows UI”，接下來單擊應用按鈕來新增應用了WindowsUIView 的 DocumentManager元件。

7. 右鍵單擊Solution Explorer視窗中的專案，然後選擇“Add DevExpress Item | User Control…”。

8. 新增更多使用者控制元件並填充它們，這些使用者控制元件將作為單獨的應用程式螢幕呈現。

9. 返回主應用程式表單，呼叫 DocumentManager 元件的智慧標記，然後單擊 “Run Designer”，切換到設計器的 “Elements | Documents”選項卡並單擊“Populate”。

單擊 “Populate”後，文件管理器將生成以下內容：

通過 BaseDocument.ControlName 和 BaseDocument.ControlTypeName 屬性引用使用者控制元件的Document 物件；
用於生成文件的中等大小的圖塊（Tile物件）；
用於儲存和顯示tiles的Tile容器；
BaseView.QueryControl 事件處理程式，用於初始化文件。

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”按鈕的導航欄。

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

11. 關閉應用程式對其進行更改。首先使用WindowsUIView.Caption、BaseContentContainer.Caption 和 BaseContentContainer.Subtitle屬性新增應用程式標題字串，此外使用 BaseDocument.Caption屬性來修改自動生成的文件標題。

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