如何：使用模板库创建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