How to use ContentPresenter properly in custom WPF UserControl - wpf

Question

I want do have a custom UserControl in WPF that basically only puts a caption TextBlock over the actual content (I call it 'AttributePanelItem' here.
However, in my current approach the TextBlock is not shown when I direclty assign the Content of the user control.
This is my current XAML for the custom UserControl:
<UserControl x:Class="Common.Controls.AttributePanelItem"
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"
mc:Ignorable="d"
Name="MyAttributePanelItem"
d:DesignHeight="100" d:DesignWidth="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Caption, ElementName=MyAttributePanelItem}"/>
<ContentPresenter Grid.Row="1" Content="{Binding InputMask, ElementName=MyAttributePanelItem}" />
</Grid>
</UserControl>
Here the code behind:
public AttributePanelItem()
{
InitializeComponent();
}
public static readonly DependencyProperty CaptionProperty = DependencyProperty.Register("Caption", typeof(string), typeof(AttributePanelItem), new PropertyMetadata(string.Empty));
public string Caption
{
get { return (string)GetValue(CaptionProperty); }
set { SetValue(CaptionProperty, value); }
}
public static readonly DependencyProperty InputMaskProperty = DependencyProperty.Register("InputMask", typeof(object), typeof(AttributePanelItem), new PropertyMetadata(null));
public object InputMask
{
get { return (object)GetValue(InputMaskProperty); }
set { SetValue(InputMaskProperty, value); }
}
This is my current XAML to use the custom UserControl:
<controls:AttributePanel>
<controls:AttributePanelItem Caption="This caption is shown">
<controls:AttributePanelItem.InputMask>
<TextBox Text="This is my input 1" />
</controls:AttributePanelItem.InputMask>
</controls:AttributePanelItem>
<controls:AttributePanelItem Caption="This caption is not shown">
<TextBox Text="This is my input 2" />
</controls:AttributePanelItem>
</controls:AttributePanel>
In my implementation I use the AttributePanelItem two times.
1. The first usage is working as expected however this is not my favorite.
2. The second usage is how I would like to have it. Unfortunately in this case the caption-TextBlock is not shown.
Would it be possible to make the second case work (with showing the caption TextBlock, but without having to use the )?
I assume I am using the ContentPresenter wrong. However I do not know what I need to change.
Could you please help?

Answer 1

Your use of ContentPresenter is correct, but it should be inside a ContentTemplate. You need to change the UserControl.ContentTemplate to do what you want:
<UserControl
x:Class="WpfApp1.AttributePanelItem"
x:Name="MyAttributePanelItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<UserControl.Style>
<Style TargetType="UserControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="UserControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Caption, ElementName=MyAttributePanelItem}" />
<ContentPresenter Grid.Row="1" Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Style>
</UserControl>
Now you'll be able to use your second usage. In fact, you can completely remove InputMask from your UserControl (unless you're using it for something else).