WPF - Hosting content inside a UserControl

user-controls, wpf

Solution

The following code

<local:UserControl1>
    <Button>Click me</Button>
</local:UserControl1>

Means that you set `UserControl1`'s Content property to be that button. This button simply replaces that `UserControls1`'s markup. So all the things that you have in UserControl1.xaml are not there any more.

EDIT

If you want your UserControl to host some markup that will be set somewhere outside of it, you can add a `DependencyProperty` to it, for example:

    /// <summary>
    /// Gets or sets additional content for the UserControl
    /// </summary>
    public object AdditionalContent
    {
        get { return (object)GetValue(AdditionalContentProperty); }
        set { SetValue(AdditionalContentProperty, value); }
    }
    public static readonly DependencyProperty AdditionalContentProperty =
        DependencyProperty.Register("AdditionalContent", typeof(object), typeof(UserControl1),
          new PropertyMetadata(null));

And add some element to it's markup to host that additional content. Here's an example extending the markup you provided:

<UserControl ... Name="userControl">
    <Grid Background="LightBlue">
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock Text="Title" FontSize="30" Margin="10,0,0,0"/>
        <ContentPresenter Content="{Binding AdditionalContent, ElementName=userControl}" />
    </Grid>
</UserControl>

Now you can use it as following:

<local:UserControl1>
    <local:UserControl1.AdditionalContent>
        <Button>Click me</Button>
    </local:UserControl1.AdditionalContent>
</local:UserControl1>

Problem

I'm trying to create a user control that has a `Grid` with two rows. the first row for a title and the second one for a content that will be defined outside the user control such as a `Button` in our example. Somehow I didn't get it to work. UserControl1 xaml: ``` <Grid Background="LightBlue"> <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <TextBlock Text="Title" FontSize="30" Margin="10,0,0,0"/> </Grid> ``` MainWindow xaml: ``` <Grid> <local:UserControl1> <Button>Click me</Button> </local:UserControl1> </Grid> ``` The picture below should explain what's my problem:

Original source

Related problems