Welcome to the DevExpress Learn Now series.
Quick tutorials to help you get started using DevExpress controls.
In this video we'll see how the DocumentManager's MetroUI View helps you to create great-looking
streamlined Windows 8 inspired applications from scratch.
So let's get started.
Let's start Visual Studio and create new Windows Forms application.
The MetroUI View for the DocumentManager is generally designed to run in the full-screen
mode, so set the form's 'FormBorderStyle' property to 'None' and the 'WindowState' property
to 'Maximized'.
Next, Add the DocumentManager to the form.
Open its smart tag.
Click Convert to Metro-UIview, and run the document manager designer.
Switch to the 'Documents' section and add three new Documents.
These are main non-visual objects capable of displaying application content.
Now we'll go to the 'Tiles' section.
As you can see, three Tiles are automatically generated - one per each created Document.
Let's switch to the 'Content Containers' section.
The TileContainer that hosts Tiles is also created automatically.
If we run the application now, we'll see three Tiles inside of the TileContainer.
Clicking each Tile will display a related Document.
OK.
So lets get familiar with Content Containers available in the MetroUIView.
Delete the automatically created TileContainer and click the 'Add New Container' button.
Select the 'PageGroup' container.
A PageGroup contains multiple Documents and displays only one at a time.
Let's populate the PageGroup with Documents in the 'Navigation Tree' section.
Drag-n-drop Documents from corresponding panel to the PageGroup.
Now, our PageGroup contains all three Documents.
However, all the Documents created are empty which means the application won't start because
content for the documents is required.
Let's Go to the 'Views' section and open the MetroUIView's events list in the properties
grid.
We will handle the 'QueryControl' event to pass a content to a Document when it needs
to be displayed.
In this example let's fill the documents with a new RichEditControl for their content.
Now, Let's run the application.
We now see a PageGroup container and three document shortcuts at the top-right corner
allowing you to navigate through the Documents.
This same pattern can be used to create other Content Containers.
For instance, a slideGroup.
A container that displays all Documents at the same time and arranges them in a single
column or row.
A scroll bar is available for scrolling through the Documents and
on the Navigation Bars you can see three actions,each for a corresponding Document, plus the 'Overview'
action which displays the Overview Screen where all the Documents are presented as Tabs.
Next,SplitGroups.
Much like SlideGroups, thes arrange Documents in a single column or row but display all
Documents inside one screen.
Users can resise Documents by dragging split bars that detach neighboring Documents.
Note that the navigation Bar actions function the same way as SlideGroups.
And finally, a Page.
A content container capable of displaying only one Document.
Now let's see how to mix multiple Content Containers and build multi-level application
hierarchy.
We'll create three new Documents.Note.
Do not delete the automatically created TileContainer.
Let's Add one more container, for example a PageGroup and go to the 'Navigation Tree'
section and populate the PageGroup with documents.
Now, drag-and-drop the PageGroup to the TileContainer's 'ActivationTarget' item.
The activation target points to a container or a document that will be displayed when
the current object gets activated.
In our case, clicking any tile within the TileContainer will display the corresponding
Document within a PageGroup that contains all Documents.
Finally, let's run the application and see the results.
For more information, see our getting started topics in the documentation.
Thanks for watching, let's see what develops.