How to implement Metro Navigation Style

This example is actually only for versions 12.2 and lower. In 13.1, we introduced the NavigationFrame control, providing a similar functionality out of the box. See How To: Use NavigationButtons to Navigate in WPF WindowsUI Applications for more information.

With version v12.1.5, a new namespace is available in our DevExpress.Xpf.Core.Extensions library. This namespace is DevExpress.Xpf.Core.MvvmSample. Using this namespace it is possible to create the Metro Navigation style. Refer to the DevExpress.Xpf.Core.Extensions library in your project and add the DevExpress.Xpf.Core.MvvmSample namespace (dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvmsample", for xaml) to the using section of necessary files.

The first major step here is to represent a custom UserControl in a format that can be used by our MvvmRoot component. The MvvmRoot component allows you to register custom views and provide metro navigation between them. MvvmRoot is a wrapper around the whole Metro Navigation system. This component needs to be added to the MainWindow, and custom views should be registered in MvvmRoot.

Here are steps required to convert custom UserControls to custom views applicable for MvvmRoot. The main idea is to separate the UserControl data from your UserControl representation:

1. Inherit your custom UserControl from the ModuleView class. The ModuleView class is a UserControl descendant that supports our special IView interface. The ModuleView descendant will be your data representation.

2. Create a Module class descendant. Get data for your custom view in this Module descendant. The Module class instance will serve as DataContext for your custom view. In your custom view xaml, bind to data properties you specify in the Module descendant.

3. Now you have two modules. Register them in our MvvmRoot component. In the MainWindow, the following line is responsible for registration:

[XAML]
<dxmvvm:ModuleDescriptionModuleType="{x:Type viewmodel:Main}"ViewType="{x:Type view:MainView}"/>

Using these three steps, you can convert any number of user controls to custom views.

It is necessary to create the main view (with TileLayoutControl as representation) in a manner similar to the one you use to create your custom views. The only difference is that the main module part should be inherited from the MainModule class, not Module. In the MainModule descendant, declare a command to navigate via custom views. These commands will be available in the MainView representation, and you can assign them to the Tile.Command property:

[XAML]
<dxlc:TileStyle="{StaticResource VerticalTile}"Header="User Management"Background="#FF00ABDC"Command="{Binding ShowFirstViewCommand}">...</dxlc:Tile>

[C#]
publicclassMain:MainModule{#regionCommandsprotectedoverridevoidInitializeCommands(){base.InitializeCommands();ShowMainCommand=newSimpleActionCommand(DoShowModule<MainData>);ShowFirstViewCommand=newSimpleActionCommand(DoShowModule<FirstData>);//....}publicICommandShowMainCommand{get;privateset;}publicICommandShowFirstViewCommand{get;privateset;}//...voidDoShowModule<T>(objectp)whereT:ModuleData,new(){ShowModule<T>(p);}#endregion}

The ViewPresenter class with DoubleAnimation is used to provide smooth replacement of one view with another one.