本文檔解釋如何使用 DevExpress 模板庫構(gòu)建 Windows Modern UI 應(yīng)用程序。

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

1. 在Visual Studio中，單擊“File | New | Project” (or press CTRL+SHIFT+N)來創(chuàng)建一個新項目，選擇“DevExpress Template Gallery”然后單擊OK。

 2. 模板庫提供了三個模板來創(chuàng)建Windows Modern-inspired應(yīng)用程序，位于“WINFORMS WINDOWS UI APPLICATIONS”部分。

• Blank Application - 帶有空白磁貼容器的基于 WindowsUI 視圖的應(yīng)用程序，選擇此模板可跳過初始表單設(shè)置并直接繼續(xù)構(gòu)建應(yīng)用程序。
• Tile Application - 從數(shù)據(jù)源填充的復(fù)雜且基于 WindowsUI 視圖的應(yīng)用程序，接下來的教程將使用這個模板。
• Wizard Application - 模擬安裝向?qū)У幕?WindowsUI 視圖的應(yīng)用程序。四個用戶控件被包裝到相應(yīng)的文檔中(“Start”, “Options”、“Install” 和 “Finish”)，并放置在帶有隱藏頁眉的頁面組容器中。導(dǎo)航按鈕（“Next”、“Back”和“Exit”）是在 WindowsUIView.QueryDocumentActions 事件上動態(tài)創(chuàng)建的，當(dāng)前顯示的向?qū)ы撁娴念愋妥鳛閰?shù)傳遞給 NavigatedTo 事件。

在本教程中，選擇“Tile Application”模板并單擊“Create Project”。

3. 運行應(yīng)用程序。

啟動中心頁面是一個帶有六個TileGroup的Tile Container，填充有靜態(tài)Tile對象。

單擊磁貼來顯示項目詳細(xì)信息頁面，單擊右上角的頁面可查看磁貼組內(nèi)其他項目的詳細(xì)信息。

中心頁面上的圓形按鈕導(dǎo)航到組詳細(xì)信息頁面，該頁面顯示組信息以及其中每個項目的概述，單擊項目圖像來導(dǎo)航到項目的詳細(xì)信息頁面。

要導(dǎo)航到上一頁，請按 ESC 或右鍵單擊容器，來調(diào)用帶有嵌入式“Back”按鈕的導(dǎo)航欄。由于應(yīng)用程序作為無邊框全屏窗口運行，“Exit”按鈕也將會自動出現(xiàn)。

4. 查看并修改自動生成的代碼。

此應(yīng)用程序中顯示的項目是 SampleDataItem 類的對象，/Data/SampleData 解決方案文件包含此類的定義，以及 SampleDataSource 類，其實例用作應(yīng)用程序的數(shù)據(jù)源。

C#

dataSource = new SampleDataSource();

VB.NET

dataSource = New SampleDataSource()

組詳細(xì)信息頁面是通過調(diào)用 CreateGroupItemDetailPage 方法創(chuàng)建的。

C#

PageGroup CreateGroupItemDetailPage(SampleDataGroup group, PageGroup child) {
GroupDetailPage page = new GroupDetailPage(group, child);
PageGroup pageGroup = page.PageGroup;
BaseDocument document = windowsUIView.AddDocument(page);
pageGroup.Parent = tileContainer;
pageGroup.Properties.ShowPageHeaders = DevExpress.Utils.DefaultBoolean.False;
pageGroup.Items.Add(document as Document);
windowsUIView.ContentContainers.Add(pageGroup);
windowsUIView.ActivateContainer(pageGroup);
return pageGroup;
}

VB.NET

Private Function CreateGroupItemDetailPage(ByVal group As SampleDataGroup, ByVal child As PageGroup) As PageGroup
Dim page As New GroupDetailPage(group, child)
Dim pageGroup As PageGroup = page.PageGroup
Dim document As BaseDocument = windowsUIView.AddDocument(page)
pageGroup.Parent = tileContainer
pageGroup.Properties.ShowPageHeaders = DevExpress.Utils.DefaultBoolean.False
pageGroup.Items.Add(TryCast(document, Document))
windowsUIView.ContentContainers.Add(pageGroup)
windowsUIView.ActivateContainer(pageGroup)
Return pageGroup
End Function

這些詳細(xì)信息頁面是頁面組內(nèi)容容器，這些容器的標(biāo)簽標(biāo)題是隱藏的，因為它們中的每一個都托管一個文檔，該文檔用組信息封裝了GroupDetailPage 用戶控件。簡要項目信息塊是 GroupItemDetailPage 用戶控件，歸 GroupDetailPage 用戶控件所有，下圖說明了這種結(jié)構(gòu)。

項目詳細(xì)信息頁面、它們的子文檔和中心頁面的磁貼是在 CreateLayout 方法調(diào)用上生成的。

C#

void CreateLayout() {
foreach (SampleDataGroup group in dataSource.Data.Groups) {
tileContainer.Buttons.Add(new DevExpress.XtraBars.Docking2010.WindowsUIButton(group.Title, null, -1,
DevExpress.XtraBars.Docking2010.ImageLocation.AboveText, DevExpress.XtraBars.Docking2010.ButtonStyle.PushButton,
null, true, -1, true, null, false, false, true, null, group, -1, false, false));
PageGroup pageGroup = new PageGroup();
pageGroup.Parent = tileContainer;
pageGroup.Caption = group.Title;
windowsUIView.ContentContainers.Add(pageGroup);
groupsItemDetailPage.Add(group, CreateGroupItemDetailPage(group, pageGroup));
foreach (SampleDataItem item in group.Items) {
ItemDetailPage itemDetailPage = new ItemDetailPage(item);
itemDetailPage.Dock = System.Windows.Forms.DockStyle.Fill;
BaseDocument document = windowsUIView.AddDocument(itemDetailPage);
document.Caption = item.Title;
pageGroup.Items.Add(document as Document);
CreateTile(document as Document, item).ActivationTarget = pageGroup;
}
}
windowsUIView.ActivateContainer(tileContainer);
tileContainer.ButtonClick += new DevExpress.XtraBars.Docking2010.ButtonEventHandler(buttonClick);
}

VB.NET

Private Sub CreateLayout()
For Each group As SampleDataGroup In dataSource.Data.Groups
tileContainer.Buttons.Add(New DevExpress.XtraBars.Docking2010.WindowsUIButton(group.Title, Nothing, -1, DevExpress.XtraBars.Docking2010.ImageLocation.AboveText, DevExpress.XtraBars.Docking2010.ButtonStyle.PushButton, Nothing, True, -1, True, Nothing, False, False, True, Nothing, group, -1, False, False))
Dim pageGroup As New PageGroup()
pageGroup.Parent = tileContainer
pageGroup.Caption = group.Title
windowsUIView.ContentContainers.Add(pageGroup)
groupsItemDetailPage.Add(group, CreateGroupItemDetailPage(group, pageGroup))
For Each item As SampleDataItem In group.Items
Dim itemDetailPage As New ItemDetailPage(item)
itemDetailPage.Dock = System.Windows.Forms.DockStyle.Fill
Dim document As BaseDocument = windowsUIView.AddDocument(itemDetailPage)
document.Caption = item.Title
pageGroup.Items.Add(TryCast(document, Document))
CreateTile(TryCast(document, Document), item).ActivationTarget = pageGroup
Next item
Next group
windowsUIView.ActivateContainer(tileContainer)
AddHandler tileContainer.ButtonClick, AddressOf buttonClick
End Sub

中心頁面導(dǎo)航是在 和 事件上執(zhí)行的。

C#

void tile_Click(object sender, TileClickEventArgs e) {
PageGroup page = ((e.Tile as Tile).ActivationTarget as PageGroup);
if (page != null) {
page.Parent = tileContainer;
page.SetSelected((e.Tile as Tile).Document);
}
}

void buttonClick(object sender, DevExpress.XtraBars.Docking2010.ButtonEventArgs e) {
SampleDataGroup tileGroup = (e.Button.Properties.Tag as SampleDataGroup);
if (tileGroup != null) {
windowsUIView.ActivateContainer(groupsItemDetailPage[tileGroup]);
}
}

VB.NET

Private Sub tile_Click(ByVal sender As Object, ByVal e As TileClickEventArgs)
Dim page As PageGroup = (TryCast((TryCast(e.Tile, Tile)).ActivationTarget, PageGroup))
If page IsNot Nothing Then
page.Parent = tileContainer
page.SetSelected((TryCast(e.Tile, Tile)).Document)
End If
End Sub

Private Sub buttonClick(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Docking2010.ButtonEventArgs)
Dim tileGroup As SampleDataGroup = (TryCast(e.Button.Properties.Tag, SampleDataGroup))
If tileGroup IsNot Nothing Then
windowsUIView.ActivateContainer(groupsItemDetailPage(tileGroup))
End If
End Sub

DevExpress WinForm | 下載試用

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

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