如何：使用模板庫創建Windows現代UI應用程序

---

立即下載DevExpress WinForms

本文檔介紹了如何使用DevExpress 模板庫構建Windows Modern UI 應用程序。

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

2提供了三個模板來創建 Windows Modern 風格的應用程序，位于“WINFORMS WINDOWS UI APPLICATIONS”部分下。

• 空白申請表

一個帶有空白Tile容器的基于WindowsUI視圖的應用程序，選擇此模板可以跳過初始表單設置，直接構建應用程序。

• tile的應用程序

一個從數據源填充的并基于視圖的復雜WindowsUI應用程序。

• 向導應用程序

一個模擬安裝向導并基于Windows UI視圖的應用程序。四個用戶控件被包裝到相應的文檔（“Start”、 “Options”, “Install” 和“Finish”）中，并放置在帶有隱藏頁眉的頁面組容器中。導航按鈕（“Next”, “Back” 和“Exit”）是在事件上動態創建的，當前顯示的向導頁面的類型會作為參數傳遞到NavigatedTo事件。

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

3.運行應用程序

啟動 hub page是一個包含了6個的Tile Container，其中填充了靜態Tile對象。

單擊圖塊可顯示項目詳細信息頁面，單擊右上角的頁面標題可查看圖塊組中其他項目的詳細信息。

按中心頁面上的圓形按鈕將導航到組詳細信息頁面，該頁面顯示組信息以及其中每個項目的概述。單擊商品圖像可導航至商品的詳細信息頁面。

要導航到上一頁，請按ESC或右鍵單擊容器來調用帶有嵌入式“Back”按鈕的導航欄。由于應用程序作為無邊框全屏窗口運行，因此“Exit” ”按鈕也會自動出現。

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

此應用程序中顯示的項目是SampleDataItem類的對象。/Data/SampleData解決方案文件包含此類的定義，以及SampleDataSource類，該類的實例充當應用程序的數據源。

C#：

dataSource = new SampleDataSource();

VB.NET：

dataSource = New SampleDataSource()

通過調用CreateGroupItemDetailPage方法創建組詳細頁面。

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

這些詳細信息頁面是頁面組內容容器，這些容器的選項卡標題是隱藏的，因為每個容器都承載著一個文檔。本文檔將GroupDetailPage用戶控件與組信息包裝在一起，簡要項目信息塊是GroupItemDetailPage用戶控件，由 GroupDetailPage 用戶控件擁有。下圖說明了這種結構。

項目詳細信息頁面也基于頁面組內容容器，但具有可見的選項卡標題。選項卡標題允許最終用戶在包裝ItemDetailPage用戶控件實例的子文檔之間進行切換。

項目詳細信息頁面、其子文檔以及中心頁面的圖塊是在CreateLayout方法調用時生成的。

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

中心頁面導航是在和事件上執行的。

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