How do you allow multiple children in a UserControl?

Question

I have the following user control:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
<Label Grid.Row="0" Content="USER CONTROL" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" Name="label1" 
       VerticalAlignment="Top" FontSize="26" Padding="0"/>        
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
    <Border BorderBrush="Black" BorderThickness="1">
        <DockPanel x:Name="dPanel" Background="White">            
        </DockPanel>
    </Border>
</ScrollViewer>        
</Grid>

When I use the following XAML in my MainWindow.xaml:

<local:UserDockPanel>
    <Label ...>
    <Label ...>
</local:UserDockPanel>

It says I can't have more than one child.

My first question is: Should I be using a UserControl or should I use a Custom Control? I thought UserControl would be best for my situation where I have a label, and Border and Scrollviewer over my DockPanel.

Also, From my understanding a Panel can't be templated. It is look-less and therefore has no style.

Second Question: If I should be using a UserControl, how can I make it so more than one child is allowed to be added into the dock panel?

Answer 1

You can do that with an ItemsControl, no need to subclass anything or create your own:

<Window x:Class="WpfApplication4.Window16"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window16" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="ItemsControl" x:Key="UserDockPanelStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ItemsControl">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Label Grid.Row="0" Content="USER CONTROL" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" Name="label1" 
                                                VerticalAlignment="Top" FontSize="26" Padding="0"/>
                            <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                                <Border BorderBrush="Black" BorderThickness="1">
                                    <ItemsPresenter/>
                                </Border>
                            </ScrollViewer>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <DockPanel IsItemsHost="True" Background="White"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <ItemsControl Style="{StaticResource UserDockPanelStyle}">
        <Label DockPanel.Dock="Bottom" Content="Bottom"/>
        <Label DockPanel.Dock="Top" Content="Top"/>
        <Border Background="Blue"/>
    </ItemsControl>
</Window>