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

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

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)用智能標(biāo)簽并單擊“Convert To Skinnable Form”將常規(guī)表單更改為 XtraForm。

 4. 在同一個(gè)智能標(biāo)簽面板中，單擊“Select Skin…”來(lái)添加組件并選擇所需的 DevExpress 皮膚。 對(duì)于 Windows Modern UI，請(qǐng)選擇外觀輕巧且邊框細(xì)或無(wú)邊框的扁平皮膚（例如，Office 2013、Office 2016、Metropolis 等）。

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

6. 單擊表單上的“Instant Layout Assistant”鏈接來(lái)啟動(dòng)表單向?qū)В瑢⑹髽?biāo)懸停在所有側(cè)面區(qū)域上，然后單擊“Remove Area”。在剩余的空白區(qū)域中，單擊“Add Control”并選擇“App UI Manager | Windows UI”，接下來(lái)單擊應(yīng)用按鈕來(lái)添加應(yīng)用了 的 組件。

7. 右鍵單擊Solution Explorer窗口中的項(xiàng)目，然后選擇“Add DevExpress Item | User Control…”。

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

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

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

• 通過(guò) 和 屬性引用用戶控件的 對(duì)象；
• 用于生成文檔的中等大小的圖塊（對(duì)象）；
• 用于存儲(chǔ)和顯示tiles的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ùn)行并檢查您的應(yīng)用程序。在應(yīng)用程序啟動(dòng)時(shí)，會(huì)顯示一個(gè)填充有磁貼的自動(dòng)生成的磁貼控件,按 Esc 或右鍵單擊空白表單空間來(lái)調(diào)用帶有嵌入式“Exit”按鈕的導(dǎo)航欄。

 Tiles 利用 屬性鏈接到相應(yīng)的文檔。 單擊磁貼時(shí)，動(dòng)態(tài)生成的頁(yè)面容器會(huì)顯示帶有嵌入式”Back”按鈕的文檔，導(dǎo)航欄中顯示相同的按鈕。

11. 關(guān)閉應(yīng)用程序?qū)ζ溥M(jìn)行更改。首先使用、 和 屬性添加應(yīng)用程序標(biāo)題字符串，此外使用 屬性來(lái)修改自動(dòng)生成的文檔標(biāo)題。

注意：最初您不會(huì)看到字符串，因?yàn)榇刨N容器標(biāo)題將與它重疊。 但是此標(biāo)題在內(nèi)容容器標(biāo)頭中可見(jiàn)，將在本教程后面創(chuàng)建。

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

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

DevExpress WinForm | 下載試用

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

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