Question

I am trying to create a “titled block” UserControl in WPF/XAML, with the following behaviour:

• The control itself is a Border containing a DockPanel. The DockPanel contains a top-aligned “title” TextBlock, and the rest of this DockPanel should be the “children widget area”.

The control declaration is like this:

<Border x:Name="LayoutRoot" Background="#4C000000" CornerRadius="10" Padding="10">
    <DockPanel>
        <TextBlock Text="Some Title" DockPanel.Dock="Top" />
    </DockPanel>
</Border>

And the intended usage is like this:

<Grid x:Name="LayoutRoot" Background="White">
    <local:Bloco Height="100" Width="100" Title="Other Title">
        <local:Bloco Title="Yet other title" />
    </local:Bloco>
</Grid>

To render something like this:

The actual current rendering is invalid, though. The problems are:

• I don’t know (and didn’t found it via searching) how to make the control have a “children container” where I could add children via direct nesting in the XAML;
• I don’t know how to bind a different title for each instance of the user control, be it via XAML attributes or bindings (preferrable), be it via code behind. Writing the code as above creates invalid xaml code, which is unsurprising since the “Title” attribute does not exist yet.

Thanks for reading!

Answer 1

Generic usercontrol:

XAML:

<UserControl x:Class="WpfControlLibrary.GenericUserControl"
         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:WpfControlLibrary"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300" x:Name="Control">
<UserControl.Resources>
    <Style TargetType="{x:Type local:GenericUserControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:GenericUserControl}">
                    <Grid Background="{Binding Background, ElementName=Control}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="5"></RowDefinition>
                            <RowDefinition Height="20"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                            <RowDefinition Height="5"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="5"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="5"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Title, ElementName=Control}"/>
                        <ContentPresenter Grid.Column="1" Grid.Row="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

Code behind:

namespace WpfControlLibrary
{
   public partial class GenericUserControl
   {
      public string Title
     {
        get { return (string)GetValue(TitleProperty); }
        set { SetValue(TitleProperty, value); }
     }

     public static readonly DependencyProperty TitleProperty =
      DependencyProperty.Register("Title", typeof(string), typeof(GenericUserControl), new PropertyMetadata(string.Empty));

public GenericUserControl()
     {
        InitializeComponent();
     }
   }
}

And than use the user control like this:

    <wpfControlLibrary:GenericUserControl Title="Other Title" Background="LightGray">
       <wpfControlLibrary:GenericUserControl Title="Yet Another Title" Background="Gray"/>
</wpfControlLibrary:GenericUserControl>