WPF - hosting content inside UserControl

Question

I am trying to create a custom control with a Grid with two rows. the first line is for the title, and the second is for content that will be defined outside the user control, for example, Button in our example.

Somehow I could not 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 my problem is:

Answer 1

Following code

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

So, for this button, you set the UserControl1 Content property. This button simply replaces this markup for UserControls1 . So, everything you have in UserControl1.xaml no longer exists.

EDIT

If you want your UserControl to post some markup that will be installed somewhere outside of it, you can add 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(CalibrationPoint), new PropertyMetadata(null)); 

And add some markup element to it to accommodate this additional content. Here is an example of the markup extension 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 like:

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

Answer 2

You must install 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> 

Answer 3

Use pattern with

<ContentControl / ">

Instead of using Content Presenter

So put 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

Answer 4

You can customize the user control to add additional visual effects such as TextBlock .

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