How to prevent the Content of a UserControl from being overridden?

Question

I'm new to Windows 10 app development. I'm trying to embed my custom UserControl in a page in my application. For some reason, the content is being completely replaced by whatever I put inside it in the XAML page. To give a better explanation, here is the code:

AppView.xaml (the control)

<UserControl
    x:Class="Sirloin.AppView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Sirloin"
    xmlns:h="using:Sirloin.Helpers">

    <SplitView x:Name="splitView" DisplayMode="CompactOverlay">
        <SplitView.Pane>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <!--The hamburger-->
                <Button Click="OnHamburgerClicked" Grid.Row="0" Style="{StaticResource MenuButtonStyle}">
                    <Button.DataContext>
                        <local:MenuItem Symbol="&#xE700;"/>
                    </Button.DataContext>
                </Button>

                <!--Buttons just below the hamburger-->
                <ListView x:Name="topView" 
                          Grid.Row="1"
                          ItemTemplate="{StaticResource ListViewItemTemplate}"/>

                <!--Buttons toward the bottom of the menu-->
                <ListView x:Name="bottomView" 
                          Grid.Row="3"
                          ItemTemplate="{StaticResource ListViewItemTemplate}"/>
            </Grid>
        </SplitView.Pane>

        <SplitView.Content>
            <!--Where I'd like the content specified in MainPage to appear-->
            <Frame x:Name="frame" Background="White"/>
        </SplitView.Content>
    </SplitView>
</UserControl>

MainPage.xaml

<Page
    x:Class="Sirloin.Example.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="using:Sirloin"
    xmlns:local="using:Sirloin.Example">

    <s:AppView>
        <Grid Background="White">
            <TextBlock HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       Text="Hello, world!"/>
        </Grid>
    </s:AppView>
</Page>

When MainPage renders in the VS designer, it's as if the contents of my user control have been completely gutted out and replaced with whatever is specified in the main page. To give you an idea, here is a screenshot of the designer:

As you can see, there is no menu or SplitView or whatever I've put in my custom control; the only thing that's present is the TextBlock I've specified in the XAML for MainPage.

Anyway, why does this happen and what can I do to fix it?

---

EDIT: Found the solution I was looking for here, but Peter Duniho's answer has been accepted as it provides a better explanation of what's going on.

Answer 1

UserControl is a subclass of Control (which is similar to WPF's ContentControl). It can have only one child. So you are explicitly overriding the content yourself. By specifying a child element for your AppView in the Page XAML, you are setting the content of the control. This takes precedence over whatever content was specified in the UserControl's own XAML.

Unfortunately, it's not very clear what it is you expected to happen. Maybe you want to provide a property for additional content, which the AppView class can use to add to its own content. Or maybe you should be allowing the client code to provide a DataTemplate and some kind of data item object (e.g. model class), which is used in a ContentPresenter or similar in the AppView XAML.

But whatever you're trying to do, you'll have to do it without using, and overriding the current value of, the implicit Content property of the UserControl in the Page XAML.