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

---

立即下載DevExpress WinForms

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

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

 2.選擇“Blank Application”模板，點(diǎn)擊“Create Project”。

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

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

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

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

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

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

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

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

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

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ùn)行并審查您的應(yīng)用程序。應(yīng)用程序啟動(dòng)時(shí)，會(huì)顯示一個(gè)自動(dòng)生成的、填充有圖塊的圖塊控件。按Esc或右鍵單擊空白表單空間可調(diào)用帶有嵌入式“Exit”按鈕的導(dǎo)航欄。

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

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

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

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

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

 14.在相同的“Layout | Navigation Tree”設(shè)計(jì)器選項(xiàng)卡中，將頁(yè)面組拖動(dòng)到平鋪容器的“ActivationTarget”節(jié)點(diǎn)，該節(jié)點(diǎn)將頁(yè)面組分配給平鋪容器的財(cái)產(chǎn)，注意當(dāng)單擊容器中的tile時(shí)，頁(yè)面組將被激活。

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

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

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

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

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

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

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

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

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

下面的動(dòng)畫(huà)演示了一個(gè)帶有示例圖塊的自定義圖塊容器，其中填充了模板。

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

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