如何：手動創(chuàng)建Windows現(xiàn)代界面的應用程序

---

立即下載DevExpress WinForms

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

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

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

3.調(diào)用智能標簽并單擊“Convert To Skinnable Form”并將常規(guī)表單更改為XtraForm。

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

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

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

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

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

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

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

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

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或右鍵單擊空白表單空間可調(diào)用帶有嵌入式“Exit”按鈕的導航欄。

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

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

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

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

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

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

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

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

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

17.由于附加文檔沒有內(nèi)容，因此嘗試顯示其中一個文檔將會拋出異常。BaseView.QueryControl事件使用延遲加載功能動態(tài)填充空文檔，這可以提高應用程序性能。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)容容器來存儲新文檔。添加Slide Group容器并填充項目，如步驟12和13中所述。(在“Content Containers”選項卡中，選擇“SlideGroup”而不是“PageGroup”。)

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

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

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

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

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

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

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

• 向?qū)Ш綑诤?a target="_blank">內(nèi)容容器添加更多按鈕。
• 添加彈出窗口——Windows 現(xiàn)代風格的消息和對話框。
• 自定義通過CTRL+F快捷鍵調(diào)用的內(nèi)置搜索面板。