使用ContentPresenter和ItemsPresenter进行自定义控件

Question

I have built a custom control that has two regions for content, looking like this:

+-------------+
| L |         |
| o |  Main   |
| g | Content |
| o |         |
+---+---------+
| Interaction |
+-------------+

I did this by inheriting from Control and adding two dependency properties MainContent and UserInteractions . When using the control, I do something like this:

<controls:ScreenControl>
    <controls:ScreenControl.MainContent>
        <TextBlock>Some content goes here</TextBlock>
    </controls:ScreenControl.MainContent>
    <controls:ScreenControl.UserInteractions>
        <Button>Do something</Button>
    </controls:ScreenControl.UserInteractions>
</controls:InstallerScreenControl>

The corresponding control template looks, slightly simplified, like this:

<Style TargetType="{x:Type controls:ScreenControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:ScreenControl}">
                <DockPanel Width="530">
                    <DockPanel DockPanel.Dock="Top">
                        <!-- Some static content -->
                        <ContentPresenter Content="{Binding MainContent, RelativeSource={...}}"
                                          DataContext="{Binding DataContext, RelativeSource={...}}"/>
                    </DockPanel>
                    <DockPanel DockPanel.Dock="Bottom" Background="LightGray" Height="50">
                        <StackPanel DockPanel.Dock="Right" Orientation="Horizontal" HorizontalAlignment="Right">
                            <ContentPresenter Content="{Binding UserInteractions, RelativeSource={...}}" 
                                              DataContext="{Binding DataContext, RelativeSource={...}}" />
                        </StackPanel>
                    </DockPanel>
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now, I want to allow several elements in the UserInteractions region. However, ContentPresenter only allows a single element. From reading, it seems I need to use ItemsPresenter , but that this only works if I inherit from ItemsControl ?

I tried setting the type of the UserInteractions dependency property to ObservableCollection<UIElement> (most articles I found just set it to object , so that was what I had), and this works in-so-far that there is no compilation error with several children, but on rendering it only displays (Collection) , not the actual buttons.

What am I missing?

Answer 1

Provided that UserInteractions is a collection of UI elements, this should work out of the box:

<ItemsControl ItemsSource="{Binding UserInteractions, RelativeSource={...}}"/>

If the UserInteraction objects are pure data object, you would also have to define the ItemTemplate :

<ItemsControl ItemsSource="{Binding UserInteractions, RelativeSource={...}}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>