Content overriding entire user control, rather than ContentPresenter

Question

I'm guessing this is probably an easy mistake I am making somewhere. I have a custom control, stripped down to the basics:

<local:CustomUserControl x:Class="Test.UI.CustomUserControl"
            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:Test.UI"
            mc:Ignorable="d" 
            d:DesignHeight="300" d:DesignWidth="300"
            IsEnabled="True" Loaded="CustomUserControl_Loaded">

    <!-- Main border -->
    <Border BorderBrush="#9B000000" BorderThickness="1" Margin="0,0,0,0" Padding="0">

        <Grid Margin="0" Name="outerGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Grid Margin="0" Grid.Row="0" Grid.Column="0" Name="innerGrid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <!-- Backgound -->
                <Rectangle Fill="#FF5B87B8" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  Name="headerRectangle" PreviewMouseLeftButtonUp ="headerRectangle_MouseLeftButtonUp" />

                <!-- Text -->
                <Label Grid.Row="0" Grid.Column="0" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" Name="HeaderLabel" Content="Hello" Margin="5,0,0,0" Foreground="White" FontSize="18" Background="#FF5B87B8" PreviewMouseLeftButtonUp ="HeaderLabel_MouseLeftButtonUp" />

            </Grid>

            <!-- Content -->
            <ContentPresenter Name="MainContent" Grid.Row="1" Grid.Column="0" Content="{Binding Content}" />

        </Grid>    
    </Border>    
</local:CustomUserControl>

When displaying on the form, like the following, it draws a box, with a shaded top, with white text:

<ui:CustomUserControl Grid.Row="0" Grid.Column="2" Name="borderDiagram" Header="Hello" />

But, if I try and add content to the ContentPresenter:

<ui:CustomUserControl Grid.Row="0" Grid.Column="2" Name="borderDiagram" Header="Hello">
    <Label Content="Um..." />
</ui:CustomUserControl >

It overrides the entire custom control, leaving only the 'Um...' label.

I presume I am managing to override the entire control when I set the content, so how does one ensure that it's the ContentPresenter that takes the content, rather than the parent control?

Answer 1

CustomUserControl has some default Content:

<!-- Main border -->
<Border> ...
</Border>

and that Content is replaced with <Label Content="Um..." />

to make it work as expected (Label displayed in ContentPresenter) you should define default template:

<UserControl.Template>
    <ControlTemplate TargetType="UserControl">
        <Border BorderBrush="#9B000000" BorderThickness="1" Margin="0,0,0,0" Padding="0">
            <Grid Margin="0" Name="outerGrid">
            ...
                <!-- Content -->
                <ContentPresenter Name="MainContent" Grid.Row="1" Grid.Column="0" 
                                  Content="{TemplateBinding Content}" />
            </Grid>
        </Border>
    </ControlTemplate>
</UserControl.Template>

pay attention to one important change:

Content="{TemplateBinding Content}"

ContentPresenter uses template binding to get and display custom content