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

Question

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.

Ploughman

Answer 1

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

• http://www.interact-sw.co.uk/iangblog/2007/02/14/wpfdefaulttemplate
• http://www.codeproject.com/Articles/37326/Lookless-Controls-Themes.aspx
• http://www.codeproject.com/Articles/35444/Defining-the-Default-Style-for-a-Lookless-Control.aspx
• http://blog.pixelingene.com/?p=58

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').

Ploughman

Thank god someone explained this in a simple and easy to understand way! It's hard to find resources about this, or it's just a wpf-beginners fault :p – Dyak

Answer 2

Hasta la victoria siempre!

I have come with working solution (first on the internet, it seems to me :))

The tricky DialogControl.xaml.cs - see comments:

public partial class DialogControl : UserControl
{
    public DialogControl()
    {
        InitializeComponent();

        //The Logical tree detour:
        // - we want grandchildren to inherit DC from this (grandchildren.DC = this.DC),
        // but the children should have different DC (children.DC = this),
        // so that children can bind on this.Properties, but grandchildren bind on this.DataContext
        this.InnerWrapper.DataContext = this;
        this.DataContextChanged += DialogControl_DataContextChanged;
        // need to reinitialize, because otherwise we will get static collection with all buttons from all calls
        this.Buttons = new ObservableCollection<FrameworkElement>();
    }


    void DialogControl_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
        /* //Heading is ours, we want it to inherit this, so no detour
        if ((this.GetValue(HeadingProperty)) != null)
            this.HeadingContainer.DataContext = e.NewValue;
        */

        //pass it on to children of containers: detours
        if ((this.GetValue(ControlProperty)) != null)
            ((FrameworkElement)this.GetValue(ControlProperty)).DataContext = e.NewValue;

        if ((this.GetValue(ButtonProperty)) != null)
        {
            foreach (var control in ((ObservableCollection<FrameworkElement>) this.GetValue(ButtonProperty)))
            {
                control.DataContext = e.NewValue;
            }
        }
    }

    public FrameworkElement Control
    {
        get { return (FrameworkElement)this.GetValue(ControlProperty); } 
        set { this.SetValue(ControlProperty, value); }
    }

    public ObservableCollection<FrameworkElement> Buttons
    {
        get { return (ObservableCollection<FrameworkElement>)this.GetValue(ButtonProperty); }
        set { this.SetValue(ButtonProperty, value); }
    }

    public string Heading
    {
        get { return (string)this.GetValue(HeadingProperty); }
        set { this.SetValue(HeadingProperty, value); }
    }

    public static readonly DependencyProperty ControlProperty =
            DependencyProperty.Register("Control", typeof(FrameworkElement), typeof(DialogControl));
    public static readonly DependencyProperty ButtonProperty =
            DependencyProperty.Register(
                "Buttons",
                typeof(ObservableCollection<FrameworkElement>),
                typeof(DialogControl),
                //we need to initialize this for the designer to work correctly!
                new PropertyMetadata(new ObservableCollection<FrameworkElement>()));
    public static readonly DependencyProperty HeadingProperty =
            DependencyProperty.Register("Heading", typeof(string), typeof(DialogControl));
}

And the DialogControl.xaml (no changes):

<UserControl x:Class="TkMVVMContainersSample.Views.Common.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 x:Name="InnerWrapper">
        <DockPanel 
            LastChildFill="False" 
            HorizontalAlignment="Stretch" 
            DockPanel.Dock="Bottom">
            <ItemsControl
                x:Name="ButtonsContainer"
                ItemsSource="{Binding Buttons}"
                DockPanel.Dock="Right"
                >
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Border Padding="8">
                            <ContentPresenter Content="{TemplateBinding Content}" />
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" Margin="8">
                        </StackPanel>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </DockPanel>
        <Border 
            Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
            Padding="8,0,8,8"
            >
            <StackPanel>
                <Label
                    x:Name="HeadingContainer"
                    Content="{Binding Heading}"
                    FontSize="20"
                    Margin="0,0,0,8"  />
                <ContentPresenter
                    x:Name="ControlContainer"
                    Content="{Binding Control}"                 
                    />
            </StackPanel>
        </Border>
    </DockPanel>
</UserControl>

Sample usage:

<Window x:Class="TkMVVMContainersSample.Services.TaskEditDialog.ItemEditView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Common="clr-namespace:TkMVVMContainersSample.Views.Common"
    Title="ItemEditView"
    >
    <Common:DialogControl>
        <Common:DialogControl.Heading>
            Edit item
        </Common:DialogControl.Heading>
        <Common:DialogControl.Control>
            <!-- Concrete dialog's content goes here -->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Label Grid.Row="0" Grid.Column="0">Name</Label>
                <TextBox Grid.Row="0" Grid.Column="1" MinWidth="160" TabIndex="1" Text="{Binding Name}"></TextBox>
                <Label Grid.Row="1" Grid.Column="0">Phone</Label>
                <TextBox Grid.Row="1" Grid.Column="1" MinWidth="160" TabIndex="2" Text="{Binding Phone}"></TextBox>
            </Grid>
        </Common:DialogControl.Control>
        <Common:DialogControl.Buttons>
            <!-- Concrete dialog's buttons go here -->
            <Button Width="80" TabIndex="100" IsDefault="True" Command="{Binding OKCommand}">OK</Button>
            <Button Width="80" TabIndex="101" IsCancel="True" Command="{Binding CancelCommand}">Cancel</Button>
        </Common:DialogControl.Buttons>
    </Common:DialogControl>

</Window>

Ploughman

Please don't do this, use my second answer #1030455 instead! – Frication

Answer 3

If you're using a UserControl

I'm guessing you actually want:

<ContentPresenter Content="{Binding Buttons}"/>

This assumes that the DataContext passed to your control has a Buttons property.

And with a ControlTemplate

The other option would be a ControlTemplate and then you might use:

<ContentPresenter ContentSource="Header"/>

You would need to be templating a control that actually has a 'Header' to do this (normally a HeaderedContentControl).

Binaural

Thanks - 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 other option - yes, in this case deriving from HeaderedContentControl would work, but what if I want three parts? How do I make my own "HeaderedAndFooteredContentControl" (or, how would I implement HeaderedContentControl if I didn't have one)? – Frication