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

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

14. 在同一個“Layout | Navigation Tree”設計器選項卡中，將頁面組拖到磁貼容器的“ActivationTarget”節點，該節點將頁面組分配給磁貼容器的屬性。請注意，單擊容器內的圖塊時會激活頁面組。

15. 運行應用程序來查看發生了什么變化。現在單擊磁貼會將您帶到頁面組，此外頁面組會自動激活與點擊磁貼相關的文檔，因此無需為每個單獨的磁貼明確設置激活目標。頁面組標題顯示視圖標題（屬性）并顯示嵌入的“Back” 按鈕 - 現在最終用戶可以導航回啟動頁面而無需調用導航欄，運行應用程序來查看更改。單擊磁貼時，您會導航到頁面組，這會自動激活磁貼的相應文檔——因此無需為每個磁貼明確設置激活目標。 頁面組標題顯示視圖標題（屬性）和嵌入的”Back” 按鈕 - 供最終用戶在沒有導航欄的情況下導航回啟動頁面。

要替換表頭字符串，請為頁面組容器指定 屬性，還可以設置文檔 屬性來修改頁眉內的文本。

16. 所有申請文件都是自動生成的，接下來在設計器的”Elements | Documents”選項卡中單擊 ”Add New Document”來手動添加文檔，與文檔對應的磁貼會自動添加。

17. 由于附加文檔沒有內容，因此嘗試顯示這些文檔將引發異常。事件使用延遲加載功能動態填充空文檔，這可以顯著提高應用程序性能。QueryControl 事件已在第 9 步處理，因此您只需要再添加幾行代碼即可。

C#

void windowsUIView1_QueryControl(object sender, DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs e) {
//. . .
if (e.Document == document1)
e.Control = CreateSampleContent("Manually Created Doc 1", Color.FromArgb(0, 99, 177));
if (e.Document == document2)
e.Control = CreateSampleContent("Manually Created Doc 2", Color.FromArgb(231, 72, 86));
}

public LabelControl CreateSampleContent(string text, Color backcolor) {
Font sampleFont = new Font(new FontFamily("Segoe UI Semibold"), 42f);

LabelControl lc = new LabelControl() {
AutoSizeMode = LabelAutoSizeMode.None,
Dock = DockStyle.Fill,
BackColor = backcolor,
ForeColor = Color.FromArgb(40, 40, 40),
Text = text,
Font = sampleFont,
};
lc.Appearance.TextOptions.HAlignment = DevExpress.Utils.HorzAlignment.Center;
lc.Appearance.TextOptions.VAlignment = DevExpress.Utils.VertAlignment.Center;
return lc;
}

VB.NET

Private Sub windowsUIView1_QueryControl(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs)
'. . .
If e.Document = document1 Then
e.Control = CreateSampleContent("Manually Created Doc 1", Color.FromArgb(0, 99, 177))
End If
If e.Document = document2 Then
e.Control = CreateSampleContent("Manually Created Doc 2", Color.FromArgb(231, 72, 86))
End If
End Sub

Public Function CreateSampleContent(ByVal text As String, ByVal backcolor As Color) As LabelControl
Dim sampleFont As New Font(New FontFamily("Segoe UI Semibold"), 42F)

Dim lc As New LabelControl() With {
.AutoSizeMode = LabelAutoSizeMode.None,
.Dock = DockStyle.Fill,
.BackColor = backcolor,
.ForeColor = Color.FromArgb(40, 40, 40),
.Text = text,
.Font = sampleFont}
lc.Appearance.TextOptions.HAlignment = DevExpress.Utils.HorzAlignment.Center
lc.Appearance.TextOptions.VAlignment = DevExpress.Utils.VertAlignment.Center
Return lc
End Function

18. 需要另一個內容容器來存儲新文檔，添加一個容器并用項目來填充它，如步驟 12 和 13 中所述。（在“Content Containers”選項卡中，選擇“SlideGroup”替代 “PageGroup”。）

19. 在設計器的“Layout | Navigation Tree”選項卡中，將slide group拖到每個新磁貼的“Activation Target”節點中，導航層次結構應如下所示：

20. 運行應用程序來測試當前的導航層次結構，請注意沒有為具有具有自動生成文檔的磁貼指定 屬性，因此會激活父圖塊容器（頁面組）。額外的磁貼也將應用它們自己的激活目標，導航到slide group。

單擊文檔標題（屬性）來在單獨的、動態生成的頁面容器中查看文檔。

21. 根據需要自定義啟動磁貼容器及其磁貼。 Tile容器基于一個單獨的，它繼承了它的基本自定義概念。

• 指定 屬性以對磁貼進行分類，將 屬性設置為 DefaultBoolean.True，以顯示磁貼組的標題。
• 修改 屬性值以增加或減少磁貼大小。
• 更改單個磁貼的 ItemSize 屬性以更改大小和形狀。
• 使用 對象填充靜態磁貼來用內容填充這些圖塊。
• 將對象添加到應設置動畫的磁貼（“激活”磁貼），然后為每一幀設置內容。

下面的動畫展示了一個帶有示例磁貼的自定義磁貼容器，其中填充了模板。

22. 通過以下小的修改完成應用程序。

• 向導航欄和內容容器添加更多按鈕。
• 添加Flyouts - Windows現代風格的消息和對話框。
• 自定義由 CTRL+F 快捷鍵調用的內置搜索面板。

此時您的 Windows Modern UI 應用程序已完成。

DevExpress WinForm | 下載試用

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

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