C# | How to place a Region (ContentControl) inside a dialog screen in WPF Prism

How to display another View in a ContentControl inside a Dialog screen in WPF Prism.

TechPublished 1 min read

In WPF Prism, follow the steps below to display another view in a ContentControl inside a dialog screen.

Create the view for the dialog

  1. Create the view for the dialog. For example, create a view named "MyDialogView".
  2. Create the view model for the dialog. For example, create a view model named "MyDialogViewModel".
  3. Add a ContentControl to the dialog's view.

For example, use the following XAML code to add the ContentControl.

<UserControl x:Class="MyNamespace.MyDialogView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:prism="http://www.codeplex.com/prism"
    prism:ViewModelLocator.AutoWireViewModel="True"
    Width="300"
    Height="300">    
    <ContentControl 
        prism:RegionManager.RegionManager="{Binding MainRegionManager}" 
        prism:RegionManager.RegionName="{Binding ContentRegionName}"/>
</UserControl>

Create the view to display inside part of the dialog

  1. Define the view you want to display inside the dialog's view. For example, use the following XAML code to define the view you want to display.
<UserControl x:Class="MyNamespace.MyContentView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <!-- 表示させたいコンテンツの定義 -->
    </Grid>
</UserControl>

Add processing to the dialog's ViewModel

  1. In the constructor of the dialog's ViewModel, add the processing needed to display the view you want to show.
public MyDialogView(IRegionManager regionManager)
{
    MainRegionManager = regionManager;  
    MainRegionManager.RegisterViewWithRegion(_contentRegionName, nameof(MyContentView));
}

private IRegionManager _mainRegionManager;
public IRegionManager MainRegionManager
{
    get { return _mainRegionManager; }
    set { SetProperty(ref _mainRegionManager, value); }
}

private readonly string _contentRegionName = "dialogRegionName";
public string ContentRegionName
{
    get { return _contentRegionName; }
}

Note that for a dialog, you need to set the injected RegionManager as the dialog's own RegionManager.

By following these steps, you can display another view in a ContentControl inside a dialog screen.
That said, the way a view is displayed and how a view model is created may differ depending on the application, so adjust as needed.