[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Expand]Controls and Libraries
 [Collapse]Scaffolding Wizard
   Getting Started
  [Expand]Data Access Layer
   UI Generation
   [Expand]Building Outlook-Inspired and Hybrid UI Applications
   [Collapse]Building Office-Inspired Applications
     Lesson 1 - Scaffolding
     Lesson 2 - Creating a Table View
     Lesson 3 - Creating a Card View
     Lesson 4 - Creating a Main View
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 4 - Creating a Main View

Expanded Step 1 - Creating a new View and adding a RibbonControl

Right-click your project in the Solution Explorer and select Add DevExpress Item | New Item… to invoke the DevExpress Template Gallery, and select the View & View Model template. Specify the name of the View as "MainView” and click Add Item.

Check to make sure that two items have been added to the project: MainView and MainViewModel. The View and ViewModel are linked to each other, so there is no need to set the DataContext property for the created View.

Next, perform the same operations as you did in the previous lessons. Place the RibbonControl on the form and add the following three items: Exit, Table and Cards. The Exit item is a BarButtonItem - an end-user will be able to close the application by clicking this item. The Table and Cards items are related BarCheckItems. By default, this application will show a regular GridControl with records (ContactCollectionTableView); if the user wishes to switch to another View, he or she can click the Cards BarCheckItem, and the CardView will be displayed (ContactCollectionCardView).

Next, you will add the capability to switch the theme (i.e., the look and feel) of the application. As you may have noticed, there is an empty RibbonPageGroup – Themes. Add the RibbonGalleryBarItem to this group and attach the RibbonGalleryThemeSelectorBehavior to it. The RibbonGalleryThemeSelectorBehavior allows you to enable theme switching behavior for any appropriate BarItem. Like any MVVM components, you can define this behavior using a smart tag menu.

Next, you will customize the main RibbonControl. Previously, two RibbonControls were added to the ContactCollectionTable - Card Views will be merged with this main RibbonControl. So, as a final touch, you will also hide the quick access toolbar and application button.

The generated code is shown below.

Expanded Step 3 - Adding child Views to the MainView

Next, place ContactCollectionTableView and ContactCollectionCardView in the MainView.

The Visibility of these child Views should be bound to the corresponding check items.

Since the BarCheckItem.IsChecked property is a Boolean and the Visibility property is an Enum, a value converter is used. Remember to add it to the app resources.

Add the MainView to the MainWindow to see the results.

As you can see, there are two RibbonControls in the personal organizer. To show only one main RibbonControl, you need to merge child RibbonControls with the main one. The RibbonMergingHelper class has the MergeWith attached property. If you set this property for ContactCollectionTableView and ContactCollectionCardView, their RibbonControls will automatically be merged.

By default, the RibbonControl from the two child Views will always be merged with the main RibbonControl. You will now change this behavior. The child RibbonControl should only be merged with the main RibbonControl when a corresponding child View becomes visible. To do this, set the MDIMergeStyle property to WhenChildActivated for each child RibbonControl.

Run the application.

In the above picture, the bar items highlighted in red belong to the child ContactCollectionTableView. This is an example of how Ribbon merging works.

The Exit BarItem appears on the left side of the Common group. We need to show it on the right. To control bar item order when merging, use the BarItem.MergeOrder property. Open the MainView and set this property.

Expanded Step 3 - Implementing Interaction

The Exit BarButtonItem is not bound to any command. When an end-user clicks this item, the application should close. Use the Service mechanism to accomplish this task.

Open the MainView designer and define CurrentWindowService at the UserControl level.

Now create a command that closes the application.

Bind the Exit BarButtonItem to ExitCommand.

All that is left to do is test the application and fix the issue.

If you run the application to modify a cell, and then switch the View, you will notice that the modifications are not saved and the other View shows previous data. This occurs because when you switch views, one of the cells is still in an editing state. To fix this issue, handle the IsVisibleChanged event for each child view. In the event handler, you will call two methods: View.Commands.EndEditFocusedRow (to finish the editing process) and ContactCollectionViewModel.Save (to save changes to the database). To accomplish this task in the MVVM pattern, use EventToCommand.

Note that EventToCommands should be defined in the Grid panel. If they are defined at the UserControl level, then you will not be able to bind the EventToCommand.Command property using the ElementName binding. This is a limitation of the WPF platform.

Expanded See Also

Is this topic helpful?​​​​​​​