本文主要介紹如何手動創(chuàng)建Windows Modern UI 應(yīng)用程序，要使用 DevExpress 模板庫創(chuàng)建應(yīng)用程序。

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

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

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

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

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

17. 由于附加文檔沒有內(nèi)容，因此嘗試顯示這些文檔將引發(fā)異常。事件使用延遲加載功能動態(tài)填充空文檔，這可以顯著提高應(yīng)用程序性能。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. 需要另一個內(nèi)容容器來存儲新文檔，添加一個容器并用項目來填充它，如步驟 12 和 13 中所述。（在“Content Containers”選項卡中，選擇“SlideGroup”替代 “PageGroup”。）

19. 在設(shè)計器的“Layout | Navigation Tree”選項卡中，將slide group拖到每個新磁貼的“Activation Target”節(jié)點(diǎn)中，導(dǎo)航層次結(jié)構(gòu)應(yīng)如下所示：

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

單擊文檔標(biāo)題（屬性）來在單獨(dú)的、動態(tài)生成的頁面容器中查看文檔。

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

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

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

22. 通過以下小的修改完成應(yīng)用程序。

• 向?qū)Ш綑诤蛢?nèi)容容器添加更多按鈕。
• 添加Flyouts - Windows現(xiàn)代風(fēng)格的消息和對話框。
• 自定義由 CTRL+F 快捷鍵調(diào)用的內(nèi)置搜索面板。

此時您的 Windows Modern UI 應(yīng)用程序已完成。

DevExpress WinForm | 下載試用

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

DevExpress技術(shù)交流群4：715863792      歡迎一起進(jìn)群討論