Displaying other views in MainWindow using RegionManager

1. On this page, I will add codes to the DataBinding project to display other views in the MainWindow with the click of a button. (In the repository, the modified project is named UserControlView.)

In preparation for the following steps, create a project with the same configuration as the DataBinding project. The project name is UserControlView.

2. Right-click the Views folder of the created project and add a new item.

3. Under Add New Item, select Prism UserControl (WPF). The name of the item to be added is HugeLabelView. Click Add on this screen.

4. Views/HugeLabelView.xaml and ViewModels/HugeLabelViewModel.cs will be added to the UserControlView project.

5. Add a Label to be displayed in Views/HugeLabelView.xaml as follows. This View displays large gray text, “HugeLabel” with a font size of 50.

<UserControl x:Class="UserControlView.Views.HugeLabelView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:prism="http://prismlibrary.com/"             
             prism:ViewModelLocator.AutoWireViewModel="True">
    <Grid>
        <Label Content="HugeLabel" FontSize="50" Foreground="Gray"/>
    </Grid>
</UserControl>

6. Add a button to Views/MainWindow.xaml to display the HugeLabelView as shown below. I will proceed with the implementation so that when this button is clicked, the HugeLabelView created earlier will be displayed.

<metro:MetroWindow x:Class="UserControlView.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:metro="http://metro.mahapps.com/winfx/xaml/controls"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525" >
    <Grid>
        <StackPanel>
            <Label FontSize="16" Content="{Binding DateTimeLabel}" />
            <Button Content="Update Time" Command="{Binding DateTimeUpdateButton}"/>
            <Button Content="Show Huge Label View" Command="{Binding ShowHugeLabelButton}"/>
            <ContentControl prism:RegionManager.RegionName="ContentRegion" />
        </StackPanel>
    </Grid>
</metro:MetroWindow>

7. Change ViewModels/MainWindowViewModel.cs as follows. The highlighted lines are changed or added.

using Prism.Commands;
using Prism.Mvvm;
using Prism.Regions;
using UserControlView.Views;

namespace UserControlView.ViewModels
{
    public class MainWindowViewModel : BindableBase
    {
        private readonly IRegionManager _regionManager;

        private string _title = "Prism UserControlView";
        public string Title
        {
            get { return _title; }
            set { SetProperty(ref _title, value); }
        }

        private string _dateTimeLabel = System.DateTime.Now.ToString();
        public string DateTimeLabel
        {
            get { return _dateTimeLabel; }
            set { SetProperty(ref _dateTimeLabel, value); }
        }

        public DelegateCommand DateTimeUpdateButton { get; }
        public DelegateCommand ShowHugeLabelButton { get; }

        public MainWindowViewModel(IRegionManager regionManager)
        {
            DateTimeUpdateButton = new DelegateCommand(DateTimeUpdateButtonExecute);
            ShowHugeLabelButton = new DelegateCommand(ShowHugeLabelButtonExecute);
            _regionManager = regionManager;
        }

        private void DateTimeUpdateButtonExecute()
        {
            DateTimeLabel = System.DateTime.Now.ToString();
        }

        private void ShowHugeLabelButtonExecute()
        {
            _regionManager.RequestNavigate("ContentRegion", nameof(HugeLabelView));
        }
    }
}

In line 12, the title of the MainWindow to be displayed is set to “Prism UserControlView”.

Line 27 declares a ShowHugeLabelButton to be bound to the Command of the Button added in MainWindow.xaml.
In line 32, a method ShowHugeLabelButtonExecute is passed as an argument to the constructor to create a ShowHugeLabelButton object. When the button is clicked, the method ShowHugeLabelButtonExecute will be executed.

Lines 41-44 are the method ShowHugeLabelButtonExecute that displays the HugeLabelView. This method displays the HugeLabelView in the MainWindow’s ContentControl at line 43.

The _regionManager referenced in line 43 is an object of type IRegionManager that is received in the constructor when the MainWindowViewModel is created, as in line 29. In Prism, an object of this type can be received by writing an argument of type IRegionManager in the constructor of the ViewModel. regionManager is set to the member variable _regionManager on line 33.

8. Add the following statement to line 19 of App.xaml.cs.

using Prism.Ioc;
using System.Windows;
using UserControlView.Views;

namespace UserControlView
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App
    {
        protected override Window CreateShell()
        {
            return Container.Resolve<MainWindow>();
        }

        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
            containerRegistry.RegisterForNavigation<HugeLabelView>();
        }
    }
}

By adding this line, when _regionManager.RequestNavigate(“ContentRegion”, nameof(HugeLabelView)) is executed in MainWindowViewModel.cs, MainWindow’s HugeLabelView will be displayed in the ContentControl.

9. Select the UserControlView project, right-click, and select Build to build the project.

10. Select UserControlView as the project to execute as shown in the blue box. Click on the button in the green box to start the project UserControlView.

11. A window shown in the figure will appear.

12. Clicking on the Show Huge Label View button displays a View containing the large text HugeLabel in the area below the button.