如何：手動創建Windows現代界面的應用程序

---

立即下載DevExpress WinForms

本文檔介紹了如何手動構建 Windows Modern UI 應用程序。

 1.在 Visual Studio 中，單擊“File | New | Project”（或按CTRL+SHIFT+N）創建一個新項目。選擇 “DevExpress Template Gallery”并單擊OK。

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

3.調用并單擊“Convert To Skinnable Form”并將常規表單更改為。

 4.在同一個智能標簽表單中，單擊“Select Skin…”來添加并選擇所需的。對于Windows Modern UI，請選擇外觀輕薄且沒有邊框的平面皮膚（例如Office 2013、Office 2016、Metropolis等）。

 5.將表單的FormBorderStyle屬性設置為None，將WindowState屬性設置為maximization。

 6.單擊表單上的 “Instant Layout Assistant” 鏈接以啟動。將鼠標懸停在所有側面區域上，然后單擊“Remove Area”，在剩下的空白區域，點擊“Add Control”，選擇“App UI Manager | Windows UI”。接下來，單擊apply按鈕來添加應用了WindowsUIView的組件。

 7.右鍵單擊解決方案資源管理器窗口中的項目，選擇“Add DevExpress Item | User Control…”

8.添加更多的用戶控件并填充它們，這些用戶控件將作為單獨的應用程序屏幕顯示。

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

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

• 通過和屬性引用用戶控件的文檔對象。
• 用于生成文檔的中等大小的Tile (Tile對象)。
• 用于存儲和顯示瓦片的容器。
• 事件處理程序，用于初始化文檔。

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

 tile使用屬性鏈接到相應的文檔，當單擊tile時，動態生成的Page容器將顯示帶有嵌入式“Back”按鈕的文檔，在導航欄中顯示相同的按鈕。

 11.關閉應用程序并修改它。首先，使用WindowsUIView.Caption, BaseContentContainer.Caption和BaseContentContainer.Subtitle屬性來添加應用程序標題字符串。另外，使用BaseDocument.Caption屬性修改自動生成的文檔標題。

提示：最初，是不會看到字符串的，因為圖塊容器標題將與其重疊。但是，該標題將在內容容器標頭中可見，您將在本教程后面創建該標頭。

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

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

 14.在相同的“Layout | Navigation Tree”設計器選項卡中，將頁面組拖動到平鋪容器的“ActivationTarget”節點，該節點將頁面組分配給平鋪容器的財產，注意當單擊容器中的tile時，頁面組將被激活。

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

 要替換標頭字符串，請指定頁組容器的BaseContentContainer.Caption屬性，您還可以設置屬性來修改頁眉中的文本。

 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.需要另一個內容容器來存儲新文檔。添加Slide Group容器并填充項目，如步驟12和13中所述。(在“Content Containers”選項卡中，選擇“SlideGroup”而不是“PageGroup”。)

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

 20.運行應用程序來測試當前的導航層次結構。注意，沒有為自動生成文檔的tile指定Tile.ActivationTarget屬性，因此parent tile container(頁面組)被激活,附加的磁貼也將應用它們自己的激活目標，它們將導航到幻燈片組。

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

 21.根據需要可以自定義啟動圖塊容器及其圖塊，Tile 容器基于單獨的Tile Control，并且繼承了其基本自定義概念。

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

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

22.通過以下細微修改完成應用程序。

• 向導航欄和添加更多按鈕。
• 添加——Windows 現代風格的消息和對話框。
• 自定義通過CTRL+F快捷鍵調用的內置。