UWP inherit from my Usercontrol

Question

I am trying to create a ModalPage class, it run's well but I want to create 4 subclass to specialize my ModalPage.

My ModalPage inherit from UserControl (XAML + C#). On my sub-classes which inherit from my ModalPage, I must parameterize a specific contents and titles.

I suppose, the best way is to do like the ContentDialog class, have a c# class whith ContentDialog1 : ContentDialog and a XAML page with:

<ContentDialog>
    <Grid>
    </Grid>
</ContentDialog>

But I can't inherit from my UserControl, because it uses XAML. Should I create a custom control (inherit from Control) instead of a UserControl?

Answer 1

If I expose dependency property to set the value of content in my userControl, the content can be another UserControl?

Yeah, we can use ContentPresenter to implement this. Following is a simple sample:

In XAML:

<UserControl x:Class="UWP.ModalPage"
             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:local="using:UWP"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             d:DesignHeight="300"
             d:DesignWidth="400"
             mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ContentPresenter x:Name="Title"
                          HorizontalAlignment="Center"
                          HorizontalContentAlignment="Center"
                          Content="{x:Bind ModalTitle}" />
        <ContentPresenter x:Name="Content" Grid.Row="1" Content="{x:Bind ModalContent}" />
    </Grid>
</UserControl>

In code-behind:

public sealed partial class ModalPage : UserControl
{
    public ModalPage()
    {
        this.InitializeComponent();
    }

    public static readonly DependencyProperty ModalTitleProperty = DependencyProperty.Register("ModalTitle", typeof(object), typeof(ModalPage), new PropertyMetadata(null));

    public object ModalTitle
    {
        get { return GetValue(ModalTitleProperty); }
        set { SetValue(ModalTitleProperty, value); }
    }

    public static readonly DependencyProperty ModalContentProperty = DependencyProperty.Register("ModalContent", typeof(object), typeof(ModalPage), new PropertyMetadata(null));

    public object ModalContent
    {
        get { return GetValue(ModalContentProperty); }
        set { SetValue(ModalContentProperty, value); }
    }
}

Then we can use this ModalPage in pages like:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <local:ModalPage ModalTitle="TITLE">
        <local:ModalPage.ModalContent>
            <local:MyUserControl />
        </local:ModalPage.ModalContent>
    </local:ModalPage>
</Grid>