Make a user control that can contain a child element (like the Border-Element)

Question

in my Silverlight 4 application, I want to create a simple user control, that can - beside other things - contain another control. An example for what I want is the Border-Control. You can put any other control (exactly ONE other control) "in" the Border-Control, so that the Border-Control contains the other user control and displays its content. What do I need to do to create a user control with that capability? The idea is to put the other control in a ContentPresenter in my user control like:

<Grid x:Name="LayoutRoot">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition />
  </Grid.RowDefinitions>

  <TextBlock x:Name="TextBlockHeader" Text="{Binding Title, ElementName=userControl}" HorizontalAlignment="Left" Foreground="White" Margin="5,0"/>
  <ContentPresenter x:Name="ContentPresenterObject" Grid.Row="1" />
</Grid>

Now, what to do to be able to add (in Expression Blend) a child control to my UserControl and how to bind it against the ContentPresenter? Or is this a wrong approach?

Thanks in advance,
Frank

Answer 1

I would recommend creating a custom control that inherits from ContentControl. Here is a nice blog post talking about UserControls and custom controls

You would need to create a "Generic.xaml" that would define your xaml, and a cs class that would define your class.

public class CustomControl: ContentControl
{
    public CustomControl()
    {
        this.DefaultStyleKey = typeof(CustomControl);
    }
}

You xaml class would look something like:

<ResourceDictionary
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MyApp">

<Style TargetType="local:CustomControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:CustomControl">
                <Grid x:Name="LayoutRoot">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock x:Name="TextBlockHeader" Text="{Binding Title,
                               ElementName=userControl}" HorizontalAlignment="Left" 
                               Foreground="White" Margin="5,0"/>
                    <ContentPresenter x:Name="ContentPresenter" Grid.Row="1"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>