ContentPresenter in UserControl

Question

I'm new to WPF and I'm trying to create an UserControl which will have some nested content.

<my:InformationBox Header="General Information" Width="280">
    <StackPanel>
        <Label>Label1</Label>
        <Label>Label2</Label>
    </StackPanel>
</my:InformationBox>

As you can see I want to put a StackPanel into it. As I read some articles I am supposed to add ContentPresenter to my UserControl, so I did, but I cannot find what should be binded to it's Content property.

Here is my UserControl code

<UserControl x:Class="ITMAN.InformationBox"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="200" d:DesignWidth="280" Name="infoBox" Loaded="infoBox_Loaded">
    <StackPanel Width="{Binding ElementName=infoBox, Path=Width}" HorizontalAlignment="Stretch">
        <Label Content="{Binding ElementName=infoBox, Path=Header}" />
        <Border BorderThickness="0,1,0,0" Padding="10 5" Margin="5 0 5 10" BorderBrush="#B4CEDE">
            <StackPanel>
                <ContentPresenter Content="{Binding Content}" />
                <Label Content="End" />
            </StackPanel>
        </Border>
    </StackPanel>
</UserControl>

I've tried many combinations from various articles, but I cannot find any working example of what I want to achieve.

Similiar question was asked earlier by another user, but given there answers didn't help me: Does anyone have a simple example of a UserControl with a single ContentPresenter?

Solution 1

I solved this problem by applaying custom style to GroupBox. I've created Syle in ResourceDictionary, which looks as follows

<Style x:Key="InformationBoxStyle" TargetType="GroupBox">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GroupBox">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Label>
                        <ContentPresenter Margin="4" ContentSource="Header"
                               RecognizesAccessKey="True" />
                    </Label>
                    <Border Grid.Row="1" BorderThickness="0,1,0,0" Padding="10 5"
                               Margin="5 0 5 10" BorderBrush="#B4CEDE">
                        <StackPanel>
                            <ContentPresenter />
                        </StackPanel>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And applied this style to GroupBox

<GroupBox Header="General Information" Width="280" Style="{StaticResource InformationBoxStyle}">
    <StackPanel>
        <Label>Label1</Label>
        <Label>Label2</Label>
    </StackPanel>
</GroupBox>

This code works as expected

You may also refer to this great article, which shows different options to achieve it: http://www.codeproject.com/Articles/82464/How-to-Embed-Arbitrary-Content-in-a-WPF-Control It also describes why ContentPresenter doesn't work in my code.

Solution 2

ContentPresenter is kind of a magic control. If you don't supply anything to it, it will automatically set the Content, ContentTemplate and ContentTemplateSelector property with a TemplateBinding to the TemplatedParent. Which means, you don't need to supply anything to it, just

<ContentPresenter/>

in your UserControl, and it should automatically use the corresponding properties found in your UserControl. Also remember that a binding like {Binding Content} always referes to your DataContext, which i guess is not what you wanted.

Solution 3

You need to create a dependency property on your UserControl code behind such as InnerContent.

    public object InnerContent
    {
        get { return GetValue(InnerContentProperty); }
        set { SetValue(InnerContentProperty, value); }
    }

    public static readonly DependencyProperty InnerContentProperty =
        DependencyProperty.Register("InnerContent", typeof(object), typeof(ConfirmationControl), new PropertyMetadata(null));

Then you need to bind to that InnerContent on the XAML side of that UserControl.

 <ContentControl Content="{Binding InnerContent, ElementName=userControl}" />

Then when you use it instead of placing content in the UserControl directly and overwriting the existing content just add it to the InnerContent portion.

    <UserControls:InformationBox>
        <UserControls:InformationBox.InnerContent>
            <TextBlock Text="I'm in the InnerContent" />
        </UserControls:InformationBox.InnerContent>
    </UserControls:InformationBox>

Otherwise using a Template or Style is just as good but if you're wanting to package up a UserControl for use without forcing anyone to also reference a style or template this is probably one of your better options.

Comments

[krzychu]

I thought about it in the first place but it doesn't work neither. I will try to make it as a template.

[dowhilefor]

well i tried it and it works perfectly fine, maybe you have some other needs that wasn't clear from your question. To be sure, you can give your Usercontrol in xaml a name like x:Name="myControl" and change your content binding to Content="{Binding ElementName=myControl, Path=Content}" and see if that works. But an empty ContentPresenter works in my test case.

[krzychu]

It's funny that when Im writing Content={Binding ElementName=infoBox, Path=Content}` my Visual Studio 2010 crushes every time I'm doing it

[dowhilefor]

Try it in a very simple application. Make a new wpf project, add a user control and try it there. Maybe you have another problem in your application.

[John Leidegren]

That codeproject link explaining the use of the ContentControl with a Template static resource instead of a style worked very well.

[Luca Ziegler]

I got this error message: Cannot set Name attribute value 'btMain' on element 'Button'. 'Button' is under the scope of element 'MyCustomControl', which already had a name registered when it was defined in another scope.

[Michael Puckett II]

@LucaZiegler I think this qualifies as a new question / issue and not a comment. Post it in the questions and add the code so someone, or myself, can help you with it please.