controles - WPF-Contenido de alojamiento dentro de un UserControl

controles wpf c#

Question

Intento crear un control de usuario que tenga una Grid con dos filas. la primera fila para un título y la segunda para un contenido que se definirá fuera del control del usuario, como un Button en nuestro ejemplo.

De alguna manera no conseguí que funcionara.

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>

La siguiente imagen debe explicar cuál es mi problema:

Answer 1

El siguiente código

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

Significa que configura la propiedad de Contenido de UserControl1 para que sea ese botón. Este botón simplemente reemplaza el marcado de UserControls1 . Entonces, todas las cosas que tiene en UserControl1.xaml ya no existen.

EDITAR

Si desea que su UserControl aloje un marcado que se establecerá en algún lugar fuera de él, puede agregarle DependencyProperty , por ejemplo:

 /// <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));

Y agregue algún elemento a su marcado para alojar ese contenido adicional. Aquí hay un ejemplo que extiende el marcado que proporcionó:

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

Ahora puedes usarlo de la siguiente manera:

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

Answer 2

Puede crear una plantilla del control de usuario para agregar elementos visuales adicionales como 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>

Answer 3

Tienes que configurar 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 4

Usar plantilla con

<ContentControl />

En lugar de usar Content Presenter

Así que coloca esto:

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

a su usuarioControl