如何：使用模板庫(kù)創(chuàng)建Windows現(xiàn)代UI應(yīng)用程序

---

立即下載DevExpress WinForms

本文檔介紹了如何使用DevExpress 模板庫(kù)構(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提供了三個(gè)模板來(lái)創(chuàng)建 Windows Modern 風(fēng)格的應(yīng)用程序，位于“WINFORMS WINDOWS UI APPLICATIONS”部分下。

• 空白申請(qǐng)表

 一個(gè)帶有空白Tile容器的基于WindowsUI視圖的應(yīng)用程序，選擇此模板可以跳過(guò)初始表單設(shè)置，直接構(gòu)建應(yīng)用程序。

• tile的應(yīng)用程序

一個(gè)從數(shù)據(jù)源填充的并基于視圖的復(fù)雜WindowsUI應(yīng)用程序。

• 向?qū)?yīng)用程序

 一個(gè)模擬安裝向?qū)Р⒒赪indows UI視圖的應(yīng)用程序。四個(gè)用戶控件被包裝到相應(yīng)的文檔（“Start”、 “Options”, “Install” 和“Finish”）中，并放置在帶有隱藏頁(yè)眉的頁(yè)面組容器中。導(dǎo)航按鈕（“Next”, “Back” 和“Exit”）是在事件上動(dòng)態(tài)創(chuàng)建的，當(dāng)前顯示的向?qū)ы?yè)面的類型會(huì)作為參數(shù)傳遞到NavigatedTo事件。

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

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

 啟動(dòng) hub page是一個(gè)包含了6個(gè)的Tile Container，其中填充了靜態(tài)Tile對(duì)象。

單擊圖塊可顯示項(xiàng)目詳細(xì)信息頁(yè)面，單擊右上角的頁(yè)面標(biāo)題可查看圖塊組中其他項(xiàng)目的詳細(xì)信息。

 按中心頁(yè)面上的圓形按鈕將導(dǎo)航到組詳細(xì)信息頁(yè)面，該頁(yè)面顯示組信息以及其中每個(gè)項(xiàng)目的概述。單擊商品圖像可導(dǎo)航至商品的詳細(xì)信息頁(yè)面。

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

4.查看并修改自動(dòng)生成的代碼。

此應(yīng)用程序中顯示的項(xiàng)目是SampleDataItem類的對(duì)象。/Data/SampleData解決方案文件包含此類的定義，以及SampleDataSource類，該類的實(shí)例充當(dāng)應(yīng)用程序的數(shù)據(jù)源。

C#：

dataSource = new SampleDataSource();

VB.NET：

dataSource = New SampleDataSource()

通過(guò)調(diào)用CreateGroupItemDetailPage方法創(chuàng)建組詳細(xì)頁(yè)面。

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ì)信息頁(yè)面是頁(yè)面組內(nèi)容容器，這些容器的選項(xiàng)卡標(biāo)題是隱藏的，因?yàn)槊總€(gè)容器都承載著一個(gè)文檔。本文檔將GroupDetailPage用戶控件與組信息包裝在一起，簡(jiǎn)要項(xiàng)目信息塊是GroupItemDetailPage用戶控件，由 GroupDetailPage 用戶控件擁有。下圖說(shuō)明了這種結(jié)構(gòu)。

 項(xiàng)目詳細(xì)信息頁(yè)面也基于頁(yè)面組內(nèi)容容器，但具有可見(jiàn)的選項(xiàng)卡標(biāo)題。選項(xiàng)卡標(biāo)題允許最終用戶在包裝ItemDetailPage用戶控件實(shí)例的子文檔之間進(jìn)行切換。

項(xiàng)目詳細(xì)信息頁(yè)面、其子文檔以及中心頁(yè)面的圖塊是在CreateLayout方法調(diào)用時(shí)生成的。

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

中心頁(yè)面導(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