web-dev-qa-db-fra.com

WPF - Hébergement de contenu dans un UserControl

J'essaie de créer un contrôle utilisateur qui a un Grid avec deux lignes. la première ligne pour un titre et la seconde pour un contenu qui sera défini en dehors du contrôle utilisateur tel qu'un Button dans notre exemple.

D'une certaine manière, je ne l'ai pas fait fonctionner.

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>

L'image ci-dessous devrait expliquer quel est mon problème: enter image description here

wpfuser-controls
49
Erez

Le code suivant

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

Signifie que vous définissez la propriété Content de UserControl1 Comme ce bouton. Ce bouton remplace simplement le balisage de UserControls1. Donc, toutes les choses que vous avez dans UserControl1.xaml ne sont plus là.

MODIFIER

Si vous souhaitez que votre UserControl héberge un balisage qui sera défini quelque part en dehors de celui-ci, vous pouvez lui ajouter un DependencyProperty, par exemple:

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

Et ajoutez un élément à son balisage pour héberger ce contenu supplémentaire. Voici un exemple d'extension du balisage que vous avez fourni:

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

Vous pouvez maintenant l'utiliser comme suit:

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

Vous devez définir le 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>
23
blindmeis

Utiliser un modèle avec

<ContentControl />

Au lieu d'utiliser Content Presenter

Alors placez ceci:

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

à votre userControl

8
Alamakanambra

Vous pouvez modéliser le contrôle utilisateur pour ajouter des visuels supplémentaires tels que 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>
6
codekaizen