windowsforms-116937-build-an-application-choose-application-ui-windows-modern-ui-how-to-create-a-windows-modern-ui-application-using-the-template-gallery.md
In Visual Studio, click “File | New | Project” to create a new project. Select DevExpress v25.2 Template Kit and click Next :
Specify project settings and click Create to run the DevExpress Project Wizard.
Select the WinForms platform. Scroll down to the Navigation and Document Layout group and select Tile Application. Click Create Project.
Run the application to see the result.
The start page is a Tile Container with 6 tile groups (TileGroup):
Click a tile to display its details. Use buttons displayed at the top-right to navigate between detail pages of tiles contained in the group.
See /Views/ItemDetailPage.cs for implementation details.
The start page displays round buttons. Use these buttons to navigate to a group detail page. This page displays information about the group itself and its tiles. Click a tile to navigate to its details page.
See the /Views/GroupDetailPage.cs file for implementation details.
Press Esc or right-click the page area to display the Navigation Bar. The Navigation Bar can display Back , Home , and Exit buttons.
Page navigation is implemented in BaseContentContainer.ButtonClick and BaseTile.Click event handlers:
void tile_Click(object sender, TileClickEventArgs e) {
if ((e.Tile as Tile).ActivationTarget is PageGroup page) {
page.Parent = tileContainer;
page.SetSelected((e.Tile as Tile).Document);
}
}
void buttonClick(object sender, DevExpress.XtraBars.Docking2010.ButtonEventArgs e) {
if (e.Button.Properties.Tag is SampleDataGroup tileGroup) {
windowsUIView.ActivateContainer(groupsItemDetailPage[tileGroup]);
}
}
The project template automatically generates boilerplate code.
The /Data/SampleData.cs file contains the following classes:
SampleDataItemA data item with a title, a subtitle, an image, a description, detailed content, and a group association.SampleDataGroupA group of related items (SampleDataItem).SampleDataModelManages tile groups and items.SampleDataSourceGenerates sample data (five tile groups and a set of related items).
public partial class Form1 : XtraForm {
SampleDataSource dataSource;
public Form1() {
InitializeComponent();
dataSource = new SampleDataSource();
CreateLayout();
}
}
The CreateLayout method creates groups, tiles, and detail pages:
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);
}
See Also