WPF - Hosting content inside a UserControl WPF - Hosting content inside a UserControl wpf wpf

WPF - Hosting content inside a UserControl


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>


You have to set the ControlTemplate:

<UserControl><UserControl.Resources>    <Style TargetType="{x:Type local:UserControl1}">        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="{x:Type local:UserControl1}">                    <Grid Background="LightBlue">                        <Grid.RowDefinitions>                            <RowDefinition Height="50" />                            <RowDefinition Height="*" />                        </Grid.RowDefinitions>                        <TextBlock Grid.Row="0" Text="Title" FontSize="30" Margin="10,0,0,0"/>                        <ContentPresenter Grid.Row="1" />                    </Grid>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style></UserControl.Resources></UserControl>


Use template with

< ContentControl />

Instead of using Content Presenter

So place this:

<UserControl.Style>        <Style TargetType="{x:Type UserControl}">            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="{x:Type UserControl}" >                          <Grid Background="LightBlue">                            <Grid.RowDefinitions>                             <RowDefinition Height="50" />                             <RowDefinition Height="*" />                           </Grid.RowDefinitions>                            <TextBlock Text="Title" FontSize="30" Margin="10,0,0,0"/>                         <ContentControl  Grid.Row="1" Content="{TemplateBinding Content}"  />                        </Grid>                     </ControlTemplate>                </Setter.Value>            </Setter>        </Style>    </UserControl.Style>

to your userControl