如何：手动创建Windows现代界面的应用程序

---

立即下载DevExpress WinForms

本文档介绍了如何手动构建 Windows Modern UI 应用程序。

1.在 Visual Studio 中，单击“File | New | Project”（或按CTRL+SHIFT+N）创建一个新项目。选择 “DevExpress Template Gallery”并单击OK。

2.选择“Blank Application”模板，点击“Create Project”。

3.调用并单击“Convert To Skinnable Form”并将常规表单更改为。

4.在同一个智能标签表单中，单击“Select Skin…”来添加并选择所需的。对于Windows Modern UI，请选择外观轻薄且没有边框的平面皮肤（例如Office 2013、Office 2016、Metropolis等）。

5.将表单的FormBorderStyle属性设置为None，将WindowState属性设置为maximization。

6.单击表单上的 “Instant Layout Assistant” 链接以启动。将鼠标悬停在所有侧面区域上，然后单击“Remove Area”，在剩下的空白区域，点击“Add Control”，选择“App UI Manager | Windows UI”。接下来，单击apply按钮来添加应用了WindowsUIView的组件。

7.右键单击解决方案资源管理器窗口中的项目，选择“Add DevExpress Item | User Control…”

8.添加更多的用户控件并填充它们，这些用户控件将作为单独的应用程序屏幕显示。

9.返回到主应用程序表单，调用DocumentManager组件的智能标记，然后单击“Run Designer”。切换到设计器的“Elements | Documents”选项卡，点击“Populate”。

单击“Populate”后，文档管理器将生成以下内容：

• 通过和属性引用用户控件的文档对象。
• 用于生成文档的中等大小的Tile (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.运行并审查您的应用程序。应用程序启动时，会显示一个自动生成的、填充有图块的图块控件。按Esc或右键单击空白表单空间可调用带有嵌入式“Exit”按钮的导航栏。

tile使用属性链接到相应的文档，当单击tile时，动态生成的Page容器将显示带有嵌入式“Back”按钮的文档，在导航栏中显示相同的按钮。

11.关闭应用程序并修改它。首先，使用WindowsUIView.Caption, BaseContentContainer.Caption和BaseContentContainer.Subtitle属性来添加应用程序标题字符串。另外，使用BaseDocument.Caption属性修改自动生成的文档标题。

提示：最初，是不会看到字符串的，因为图块容器标题将与其重叠。但是，该标题将在内容容器标头中可见，您将在本教程后面创建该标头。

12.转到设计器的“Elements”页面，选择“Content Containers” 选项卡，单击“Add New Container” ，在下拉菜单中选择Page Group。

13.切换到设计器的“Layout | Navigation Tree”选项卡，并将文档拖到页面组的“Items”集合中。

14.在相同的“Layout | Navigation Tree”设计器选项卡中，将页面组拖动到平铺容器的“ActivationTarget”节点，该节点将页面组分配给平铺容器的财产，注意当单击容器中的tile时，页面组将被激活。

15.运行应用程序并查看发生了什么变化，单击图块会将您引导至页面组。此外，页面组会自动激活与单击的图块相关的文档，因此无需为每个单独的图块显式设置激活目标，页面组标题显示视图标题（WindowsUIView.Caption属性）并显示嵌入的“Back”按钮 。现在最终用户可以导航回启动页面，而无需调用导航栏，运行应用程序可以查看更改。单击某个图块时，您将导航到页面组，该页面组会自动激活图块的相应文档，因此无需为每个图块显式设置激活目标。页组标题显示视图标题（WindowsUIView.Caption属性）和嵌入的“Back”按钮 ， 供最终用户在没有导航栏的情况下导航回启动页面。

要替换标头字符串，请指定页组容器的BaseContentContainer.Caption属性，您还可以设置属性来修改页眉中的文本。

 16.所有申请文件都是自动生成的。接下来，在设计器的“Elements | Documents”选项卡中，单击“Add New Document”来手动添加文档，此时将自动添加与文档对应的图块。

17.由于附加文档没有内容，因此尝试显示其中一个文档将会抛出异常。事件使用延迟加载功能动态填充空文档，这可以提高应用程序性能。QueryControl 事件已在步骤 9中处理，因此您只需添加几行代码即可。

C#：

void windowsUIView1_QueryControl(object sender, DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs e) {
//. . .
if (e.Document == document1)
e.Control = CreateSampleContent("Manually Created Doc 1", Color.FromArgb(0, 99, 177));
if (e.Document == document2)
e.Control = CreateSampleContent("Manually Created Doc 2", Color.FromArgb(231, 72, 86));
}

public LabelControl CreateSampleContent(string text, Color backcolor) {
Font sampleFont = new Font(new FontFamily("Segoe UI Semibold"), 42f);

LabelControl lc = new LabelControl() {
AutoSizeMode = LabelAutoSizeMode.None,
Dock = DockStyle.Fill,
BackColor = backcolor,
ForeColor = Color.FromArgb(40, 40, 40),
Text = text,
Font = sampleFont,
};
lc.Appearance.TextOptions.HAlignment = DevExpress.Utils.HorzAlignment.Center;
lc.Appearance.TextOptions.VAlignment = DevExpress.Utils.VertAlignment.Center;
return lc;
}

VB.NET：

Private Sub windowsUIView1_QueryControl(ByVal sender As Object, ByVal e As DevExpress.XtraBars.Docking2010.Views.QueryControlEventArgs)
'. . .
If e.Document = document1 Then
e.Control = CreateSampleContent("Manually Created Doc 1", Color.FromArgb(0, 99, 177))
End If
If e.Document = document2 Then
e.Control = CreateSampleContent("Manually Created Doc 2", Color.FromArgb(231, 72, 86))
End If
End Sub

Public Function CreateSampleContent(ByVal text As String, ByVal backcolor As Color) As LabelControl
Dim sampleFont As New Font(New FontFamily("Segoe UI Semibold"), 42F)

Dim lc As New LabelControl() With {
.AutoSizeMode = LabelAutoSizeMode.None,
.Dock = DockStyle.Fill,
.BackColor = backcolor,
.ForeColor = Color.FromArgb(40, 40, 40),
.Text = text,
.Font = sampleFont}
lc.Appearance.TextOptions.HAlignment = DevExpress.Utils.HorzAlignment.Center
lc.Appearance.TextOptions.VAlignment = DevExpress.Utils.VertAlignment.Center
Return lc
End Function

18.需要另一个内容容器来存储新文档。添加Slide Group容器并填充项目，如步骤12和13中所述。(在“Content Containers”选项卡中，选择“SlideGroup”而不是“PageGroup”。)

19.在设计器的“Layout | Navigation Tree”选项卡中，将幻灯片组拖动到每个新贴片的“Activation Target”节点中。导航层次结构应该如下所示：

20.运行应用程序来测试当前的导航层次结构。注意，没有为自动生成文档的tile指定Tile.ActivationTarget属性，因此parent tile container(页面组)被激活,附加的磁贴也将应用它们自己的激活目标，它们将导航到幻灯片组。

单击文档标题（BaseDocument.Header属性）可在单独的动态生成页面容器中查看文档。

21.根据需要可以自定义启动图块容器及其图块，Tile 容器基于单独的Tile Control，并且继承了其基本自定义概念。

• 指定BaseTile.Group属性对图块进行分类。将属性设置为DefaultBoolean.True，以显示图块组的标题。
• 修改ITileContainerDefaultProperties.ItemSize属性值来增大或减小图块大小。
• 更改各个图块的ItemSize属性来更改大小和形状。
• 使用TileItemElement对象填充静态图块，用内容来填充这些图块。
• 将对象添加到应进行动画处理的图块（“live” tiles），然后设置每个帧的内容。

下面的动画演示了一个带有示例图块的自定义图块容器，其中填充了模板。

22.通过以下细微修改完成应用程序。

• 向导航栏和添加更多按钮。
• 添加——Windows 现代风格的消息和对话框。
• 自定义通过CTRL+F快捷键调用的内置。