WPF: template or UserControl with 2 (or more!) ContentPresenters to present content in 'slots'

wpf user-controls contentpresenter
Tomáš Kafka picture Tomáš Kafka · Jun 23, 2009 · Viewed 26.4k times · Source

I am developing LOB application, where I will need multiple dialog windows (and displaying everything in one window is not an option/makes no sense).

I would like to have a user control for my window that would define some styling, etc., and would have several slots where content could be inserted - for example, a modal dialog window's template would have a slot for content, and for buttons (so that user can then provide a content and set of buttons with bound ICommands).

I would like to have something like this (but this doesn't work):

UserControl xaml:

<UserControl x:Class="TkMVVMContainersSample.Services.Common.GUI.DialogControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
    >
    <DockPanel>
        <DockPanel 
            LastChildFill="False" 
            HorizontalAlignment="Stretch" 
            DockPanel.Dock="Bottom">
            <ContentPresenter ContentSource="{Binding Buttons}"/>
        </DockPanel>
        <Border 
            Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
            Padding="8"
            >
            <ContentPresenter ContentSource="{Binding Controls}"/>
        </Border>
    </DockPanel>
</UserControl>

Is something like this possible? How should I tell VS that my control exposes two content placeholders so that I can use it like this?

<Window ... DataContext="MyViewModel">

    <gui:DialogControl>
        <gui:DialogControl.Controls>
            <!-- My dialog content - grid with textboxes etc... 
            inherits the Window's DC - DialogControl just passes it through -->
        </gui:DialogControl.Controls>
        <gui:DialogControl.Buttons>
            <!-- My dialog's buttons with wiring, like 
            <Button Command="{Binding HelpCommand}">Help</Button>
            <Button Command="{Binding CancelCommand}">Cancel</Button>
            <Button Command="{Binding OKCommand}">OK</Button>
             - they inherit DC from the Window, so the OKCommand binds to MyViewModel.OKCommand
             -->
        </gui:DialogControl.Buttons>
    </gui:DialogControl>

</Window>

Or maybe I could use a ControlTemplate for a window like here, but then again: Window has only one content slot, therefore its template will be able to have only one presenter, but I need two (and if in this case it would po maybe possible to go with one, there are other use cases where several content slots would come hand, just think about a template for article - control's user would supply a title, (structured) content, author name, image...).

Thank you!

PS: If I wanted to just have buttons side by side, how can I put multiple controls (buttons) to StackPanel? ListBox has ItemsSource, but StackPanel has not, and it's Children property is read-only - so this doesn't work (inside the usercontrol):

<StackPanel 
    Orientation="Horizontal"
    Children="{Binding Buttons}"/>

EDIT: I don't want to use binding, as I want to assign a DataContext (ViewModel) to a whole window (which equals View), and then bind to it's commands from buttons inserted into control 'slots' - so any use of binding in the hierarchy would break inheritance of View's DC.

As for the idea of inheriting from HeaderedContentControl - yes, in this case it would work, but what if I want three replacable parts? How do I make my own "HeaderedAndFooteredContentControl" (or, how would I implement HeaderedContentControl if I didn't have one)?

EDIT2: OK, so my two solutions doen't work - this is why: The ContentPresenter gets it's content from the DataContext, but I need the bindings on contained elements to link to original windows' (UserControl's parent in logical tree) DataContext - because this way, when I embed textbox bound to ViewModel's property, it is not bound, as the inheritance chain has been broken inside the control!

It seems that I would need to save parent's DataContext, and restore it to the children of all control's containers, but I don't get any event that DataContext up in the logical tree has changed.

EDIT3: I have a solution!, deleted my previous aswers. See my response.

Answer

Tom&#225;š Kafka picture Tomáš Kafka · Nov 2, 2009

OK, my solution was totally unnecessary, here are the only tutorials you will ever need for creating any user control:

In short:

Subclass some suitable class (or UIElement if none suits you) - the file is just plain *.cs, as we are only defining the behaviour, not the looks of the control.

public class EnhancedItemsControl : ItemsControl

Add dependency property for your 'slots' (normal property is not good enough as it has only limited support for binding). Cool trick: in VS, write propdp and press tab to expand the snippet :):

public object AlternativeContent
{
    get { return (object)GetValue(AlternativeContentProperty); }
    set { SetValue(AlternativeContentProperty, value); }
}

// Using a DependencyProperty as the backing store for AlternativeContent.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty AlternativeContentProperty =
    DependencyProperty.Register("AlternativeContent" /*name of property*/, typeof(object) /*type of property*/, typeof(EnhancedItemsControl) /*type of 'owner' - our control's class*/, new UIPropertyMetadata(null) /*default value for property*/);

Add an attribute for a designer (because you are creating so-called lookless control), this way we say that we need to have a ContentPresenter called PART_AlternativeContentPresenter in our template

[TemplatePart(Name = "PART_AlternativeContentPresenter", Type = typeof(ContentPresenter))]
public class EnhancedItemsControl : ItemsControl

Provide a static constructor that will tell to WPF styling system about our class (without it, the styles/templates that target our new type would not be applied):

static EnhancedItemsControl()
{
    DefaultStyleKeyProperty.OverrideMetadata(
        typeof(EnhancedItemsControl),
        new FrameworkPropertyMetadata(typeof(EnhancedItemsControl)));
}

If you want to do something with the ContentPresenter from the template, you do it by overriding the OnApplyTemplate method:

//remember that this may be called multiple times if user switches themes/templates!
public override void OnApplyTemplate()
{
    base.OnApplyTemplate(); //always do this

    //Obtain the content presenter:
    contentPresenter = base.GetTemplateChild("PART_AlternativeContentPresenter") as ContentPresenter;
    if (contentPresenter != null)
    {
        // now we know that we are lucky - designer didn't forget to put a ContentPresenter called PART_AlternativeContentPresenter into the template
        // do stuff here...
    }
}

Provide a default template: always in ProjectFolder/Themes/Generic.xaml (I have my standalone project with all custom universally usable wpf controls, which is then referenced from other solutions). This is only place where system will look for templates for your controls, so put default templates for all controls in a project here: In this snippet I defined a new ContentPresenter that displays a value of our AlternativeContent attached property. Note the syntax - I could use either Content="{Binding AlternativeContent, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type WPFControls:EnhancedItemsControl}}}" or Content="{TemplateBinding AlternativeContent}", but the former will work if you define a template inside your template (necessary for styling for example ItemPresenters).

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

    <!--EnhancedItemsControl-->
    <Style TargetType="{x:Type WPFControls:EnhancedItemsControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type WPFControls:EnhancedItemsControl}">
                    <ContentPresenter 
                        Name="PART_AlternativeContentPresenter"
                        Content="{Binding AlternativeContent, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type WPFControls:EnhancedItemsControl}}}" 
                        DataContext="{Binding DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type WPFControls:EnhancedItemsControl}}}"
                        />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

Voila, you just made your first lookless UserControl (add more contentpresenters and dependency properties for more 'content slots').

Related questions

How to use a ContentPresenter inside a UserControl

I'd like to create a UserControl (in this case a square-Button with defined Backgroundcolors) which can host it's own content. UserControl: <UserControl x:Class="SGDB.UI.Controls.ModernButton" xmlns:local="clr-namespace:SGDB.UI.Controls" xmlns:converter="clr-namespace:SGDB.UI.…

Read More
How do I load a UserControl into a ContentPresenter within a (WPF) Window?

I have a window that contains a Viewbox. In that Viewbox, I would like to have one of several views which I have already created as UserControls. I am using the MVVM (Model View View-Model) design pattern. I have searched …

Read More
Add a user control to a wpf window

I have a user control that I've created, however when I go to add it to the XAML in the window, Intellisense doesn't pick it up, and I can't figure out how to add it to the window.

Read More