"Wrapper" control is just rendering its child, not its own content

Our app has a lot of popups. We want to share some logic between each popup (e.g. what should happen when the user clicks the 'Close' button). Also while each popup will have different content, we want each one to have the same general layout.

Our understanding is we should build:

• PopupControl.cs to house the shared logic, which each Popup will subclass
• PopupWrapper.xaml, into which each Popup's content will be inserted

Our first Popup is to display error messages. We're able to get the Popup's content to display, but not the Popup wrapper:

What are we missing? I suspect it's something with ControlTemplate and ContentPresenter. We've looked through oodles of documentation, but haven't found a clear answer.

Here are the relevant files:

// PopupControl.cs
using System;
using System.Windows;
using System.Windows.Controls;

namespace TestApp
{
    public class PopupControl : UserControl
    {
        public void Close_Click(object sender, RoutedEventArgs e)
        {
            Console.WriteLine("Closed!");
        }
    }
}

<!-- PopupWrapper.xaml -->
<local:PopupControl x:Class="TestApp.PopupWrapper"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:TestApp"
    mc:Ignorable="d"
    d:DesignHeight="450" d:DesignWidth="800">
    <ControlTemplate>
        <StackPanel>
            <TextBlock>(Popup wrapper) Alert!</TextBlock>

            <ContentPresenter />

            <Button Click="Close_Click">(Popup wrapper) Close</Button>
        </StackPanel>
    </ControlTemplate>
</local:PopupControl>

// PopupWrapper.xaml.cs
namespace TestApp
{
    public partial class PopupWrapper : PopupControl
    {
        public PopupWrapper()
        {
            InitializeComponent();
        }
    }
}

<!-- ErrorPopup.xaml -->
<local:PopupControl x:Class="TestApp.ErrorPopup"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:TestApp"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
    <local:PopupWrapper>
        <StackPanel>
            <TextBlock>(Popup contents) An error happened!</TextBlock>

            <Button Click="Close_Click">Dismiss</Button>
        </StackPanel>
    </local:PopupWrapper>
</local:PopupControl>

// ErrorPopup.xaml.cs
namespace TestApp
{
    public partial class ErrorPopup : PopupControl
    {
        public ErrorPopup()
        {
            DataContext = this;
            InitializeComponent();
        }
    }
}

<!-- MainWindow.xaml -->
<Window x:Class="TestApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestApp"
        mc:Ignorable="d"
        Title="Test" Height="450" Width="800">
    <StackPanel>
        <TextBlock>(Window) This is my app.</TextBlock>

        <local:ErrorPopup></local:ErrorPopup>
    </StackPanel>
</Window>

Although I am not sure about your intention for nesting, regarding PopupWrapper, you set the ControlTemplate to its Content property and it is overwritten by the StackPanel in ErrorPopup. You need to set the ControlTemplate to its Template property instead.

<local:PopupControl x:Class="WpfApp1.PopupWrapper"
       ...>
    <local:PopupControl.Template>
        <ControlTemplate TargetType="{x:Type local:PopupControl}">
            <StackPanel>
                <TextBlock>(Popup wrapper) Alert!</TextBlock>

                <ContentPresenter />

                <Button Click="Close_Click">(Popup wrapper) Close</Button>
            </StackPanel>
        </ControlTemplate>
    </local:PopupControl.Template>
</local:PopupControl>

If you you want to host dynamic content inside a host that provides specific functionality and layout that is supposed to be shared by the dynamic content, you only need to define a single host that contains a ContentPresenter. The ContentPresenter will render the dynamic content based on a data model that is bound to the content. The layout is defined by an implicit DataTemplate. In case you use explicit DataTemplate definitions you would have to provide a DataTemplateSelector that selects the proper DataTemplate based on the current content model.

In other words, in WPF dynamic content is usually hosted by a ContentControl and rendered by a DataTemplate.

The host can be simply structured into a header (fix content above the dynamic content) a body (the dynamic content area) and a footer (fixed content below the dynamic content). Of course you can add as many dynamic content placeholders into the fixed/shared layout as required.

Each new content must be represented by a dedicated content model (which makes sense as the content requires a data source). Each content model must have a dedicated DataTemplate to actually define the layout of the content.

It's recommended to let your host extend ContentControl.
For your info, the classes Popup and Window also extend ContentControl. Depending on how you actually want to show the dynamic content host (for example as dialog or as a popup that is attached to a particular element) you may choose to extend Window or Popup instead. Other that the base class, the below example does not change (because those types are all extending ContentControl):

PopupControl.cs

public class PopupControl : ContentControl
{
  public string Message
  {
    get => (string)GetValue(MessageProperty);
    set => SetValue(MessageProperty, value);
  }

  public static readonly DependencyProperty MessageProperty = DependencyProperty.Register(
    "Message", 
    typeof(string), 
    typeof(PopupControl), 
    new PropertyMetadata(default));

  static PopupControl()
    => DefaultStyleKeyProperty.OverrideMetadata(typeof(PopupControl), new FrameworkPropertyMetadata(typeof(PopupControl)));

  public PopupControl()
  {
    var closeInputGesture = new KeyGesture(Key.Escape);
    var closeInputBinding = new InputBinding(ApplicationCommands.Close, closeInputGesture);
    _ = this.InputBindings.Add(closeInputBinding);

    // Define the command handler for the close button and the key gesture
    // defin ed above
    var closeCommandBinding = new CommandBinding(ApplicationCommands.Close, ExecuteCloseCommand, CanExecuteCloseCommand);
    _ = this.CommandBindings.Add(closeCommandBinding);
  }

  private void CanExecuteCloseCommand(object sender, CanExecuteRoutedEventArgs e) => e.CanExecute = true;
  private void ExecuteCloseCommand(object sender, ExecutedRoutedEventArgs e)
  {
    // TODO::Implement close control logic
    this.Message = "I'm closed!";
  }
}

Generic.xaml
The Generic.xaml file must be located in a directory named "Themes" that must be located at the root of the project's file structure.

<ResourceDictionary>
  <Style TargetType="local:PopupControl">
    <Setter Property="HorizontalContentAlignment"
            Value="Center" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="local:PopupControl">
          <Border>
            <Grid>
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto" /> <!-- Dynamic content header row -->
                <RowDefinition /> <!-- Dynamic content row -->
                <RowDefinition Height="Auto" /> <!-- Dynamic content footer row -->
              </Grid.RowDefinitions>

              <TextBlock Grid.Row="0" 
                         Text="{TemplateBinding Message}"
                         FontSize="22"
                         HorizontalAlignment="Center" />
              <ContentPresenter Grid.Row="1" 
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
              
              <!-- Use a routed command to communicate with the parent. 
                   This button uses a predefined command from the .NET ApplicationCommands class -->
              <Button Grid.Row="2" 
                      Content="Close"
                      Command="{x:Static ApplicationCommands.Close}" />
            </Grid>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>

After defining the framework for your dynamic message box i.e. the reusable part, you have to define the dynamic content.
This example creates to simple contents: a yellow and an orange rectangle with a text overlay.
To accomplish this we have to define two content models and two layouts by defining a DataTemplate for each content model:

OrangeRectangleContentModel.cs

public class OrangeRectangleContentModel : INotifyPropertyChanged
{
  public OrangeRectangleContentModel(string textValue) 
    => this.TextValue = textValue;

  public string TextValue { get; }
  public event PropertyChangedEventHandler? PropertyChanged;
}

YellowRectangleContentModel.cs

public class YellowRectangleContentModel : INotifyPropertyChanged
{
  public YellowRectangleContentModel(string textValue) 
    => this.TextValue = textValue;

  public string TextValue { get; }
  public event PropertyChangedEventHandler? PropertyChanged;
}

MainWindow.xaml
Finally define the individual DataTemplate layout definitions and use the PopupControl.

<Window>
  <Window.Resources>
    <DataTemplate DataType="{x:Type local:OrangeRectangleContentModel}">
      <Grid>
        <Rectangle Fill="Orange"
                   Width="200"
                   Height="200" />
        <TextBlock Text="{Binding TextValue}"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center" />
      </Grid>
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:YellowRectangleContentModel}">
      <Grid>
        <Rectangle Fill="Yellow"
                   Width="200"
                   Height="200" />
        <TextBlock Text="{Binding TextValue}"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center" />
      </Grid>
    </DataTemplate>    
  </Window.Resources>
  
  <local:PopupControl Message="Dynamic content host" 
                      Content="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=PopupContent}" />
<Window>

MainWindow.xaml.cs

partial class MainWindow : Window
{
  public object PopupContent
  {
    get => (object)GetValue(PopupContentProperty);
    set => SetValue(PopupContentProperty, value);
  }

  public static readonly DependencyProperty PopupContentProperty = DependencyProperty.Register(
    "PopupContent", 
    typeof(object), 
    typeof(MainWindow), 
    new PropertyMetadata(default));

  public MainWindow()
  {
    InitializeComponent();
    this.Loaded += OnLoaded;
  }
  
  private void OnLoaded(object sender, RoutedEventArgs e)
  {
    // Create the dynamic content and assign it to the PopupControl 
    // via data binding. In case of a dialog, you would call Window.ShowDialog from here 
    // after assigning the content model to the Window.Content property.
    var dynamicPopupContent = new OrangeRectangleContentModel("I'm an orange rectangle");
    this.PopupContent = dynamicPopupContent;
  }