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

---

立即下載DevExpress WinForms

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

 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ī)表單更改為。

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

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

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

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

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

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

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

• 通過和屬性引用用戶控件的文檔對象。
• 用于生成文檔的中等大小的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.運行并審查您的應(yīng)用程序。應(yīng)用程序啟動時，會顯示一個自動生成的、填充有圖塊的圖塊控件。按Esc或右鍵單擊空白表單空間可調(diào)用帶有嵌入式“Exit”按鈕的導(dǎo)航欄。

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

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

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

 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é)點將頁面組分配給平鋪容器的財產(chǎn)，注意當(dāng)單擊容器中的tile時，頁面組將被激活。

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

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

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

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

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

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

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

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

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

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

22.通過以下細(xì)微修改完成應(yīng)用程序。

• 向?qū)Ш綑诤吞砑痈喟粹o。
• 添加——Windows 現(xiàn)代風(fēng)格的消息和對話框。
• 自定義通過CTRL+F快捷鍵調(diào)用的內(nèi)置。