Wie benutze ich einen ContentPresenter in einem UserControl?

Question

Ich möchte ein UserControl erstellen (in diesem Fall ein Rechteck-Button mit definierten Hintergrundfarben), welches eigenen Inhalt hosten kann.

Usercontrol:

<UserControl x:Class="SGDB.UI.Controls.ModernButton" 
     xmlns:local="clr-namespace:SGDB.UI.Controls" 
     xmlns:converter="clr-namespace:SGDB.UI.Converter" 
     x:Name="_modernButton"> 
<Button> 
    <Button.Resources> 
     <converter:EnumToColorConverter x:Key="ColorConverter"/> 
    </Button.Resources> 
    <Button.Template> 
     <ControlTemplate> 
      <Border Width="{Binding Size, ElementName=_modernButton}" Height="{Binding Size, ElementName=_modernButton}" BorderBrush="Black" BorderThickness="0.8,0.8,3,3"> 
       <Grid Background="{Binding BackgroundColor, ElementName=_modernButton, Converter={StaticResource ColorConverter}}"> 
        <ContentPresenter/> 
       </Grid> 
      </Border> 
     </ControlTemplate> 
    </Button.Template> 
</Button> 

Nun, wie Sie es erwarten kann, wenn ich diese Kontrolle in meinem Mainview verwenden Everthing ganz gut funktioniert, bis ich einige Inhalt definieren.

Verwendung:

<control:ModernButton Size="200" BackgroundColor="Light"> 
    TEST 
</control:ModernButton> 

In diesem Fall "TEST" wird den gesamten Inhalt des Usercontrol (die gesamte Knopf-Schablone) außer Kraft setzen. Ich schätze, das passiert, weil der Button im UserControl selbst als "Content" definiert ist und beim Definieren eines neuen Inhalts überschrieben wird.

Die letzte Frage ist also: Ist es möglich zu erreichen, was ich suche? wenn ja: Wie? Wie kann ich den Inhalt, den ich in meiner Hauptansicht definiere, in den selbstdefinierten ContentPresenter in meiner Button-Vorlage statt in den ContentPresenter der UserControls umleiten?

Wenn möglich, möchte ich nicht eine neue dp-propery zu schaffen, die meine Inhalte hostet, zB:

<controls:MordernButton Size="200" BackgroundColor="Light"> 
    <controls:ModernButton.Content> 
     I don't want this, if possible 
    </controls:ModernButton.Content> 
</controls:ModernButton> 

Answer 1

hier alles setzen wir gehen.

<UserControl x:Class="SGDB.UI.Controls.ModernButton" 
    xmlns:local="clr-namespace:SGDB.UI.Controls" 
    xmlns:converter="clr-namespace:SGDB.UI.Converter" 
    x:Name="_modernButton"> 

    <UserControl.Template> 
     <ControlTemplate TargetType="UserControl"> 
      <Button Content="{TemplateBinding Content}"> 
       <Button.Resources> 
        <converter:EnumToColorConverter x:Key="ColorConverter"/> 
        </Button.Resources> 
      <Button.Template > 
       <ControlTemplate TargetType="Button"> 
        <Border Width="{Binding Size, 
            ElementName=_modernButton}" 
        Height="{Binding Size, 
            ElementName=_modernButton}" 
        BorderBrush="Black" 
        BorderThickness="0.8,0.8,3,3"> 
         <Grid Background="{Binding BackgroundColor, ElementName=_modernButton, Converter={StaticResource ColorConverter}}"> 
          <ContentPresenter /> 
         </Grid> 
        </Border> 
       </ControlTemplate> 
      </Button.Template> 
      </Button> 
     </ControlTemplate> 
    </UserControl.Template> 
</UserControl> 

Answer 2

Nehmen wir an, dass youre Usercontrol ist:

<UserControl x:Class="QuickAndDirtyAttempt.Decorator" .... 
     <UserControl.Template> 
     <ControlTemplate TargetType="{x:Type local:Decorator}"> 
      <StackPanel Orientation="Vertical"> 
      <Label>Foo</Label> 
      <ContentPresenter/> 
      <Label>Bar</Label> 
      </StackPanel> 
     </ControlTemplate> 
     </UserControl.Template> 
</UserControl> 

Notiere die Targettype-Eigenschaft auf der Vorlage: Ohne sie wird das Projekt glücklich kompilieren, aber der ContentPresenter wird nicht funktionieren. Und dann:

<Window ... > 
    <StackPanel Orientation="Vertical"> 
     <local:Decorator> 
      <Label Background="Wheat">User supplied content here</Label> 
     </local:Decorator> 
    </StackPanel> 
</Window> 

Ich empfehle Ihnen dringend, read this vor

Answer 3

Einfach; Umgehe und ersetze einfach die Vorlage des UserControls.

<UserControl.Template> 
     <ControlTemplate TargetType="{x:Type UserControl}"> 
      <Button Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}"> 
       <Button.Resources> 
        <converter:EnumToColorConverter x:Key="ColorConverter"/> 
       </Button.Resources> 
       <Button.Template> 
        <ControlTemplate TargetType="{x:Type Button}"> 
         <Border Width="{Binding Size, 
             ElementName=_modernButton}" 
         Height="{Binding Size, 
             ElementName=_modernButton}" 
         BorderBrush="Black" 
         BorderThickness="0.8,0.8,3,3"> 
          <Grid Background="{Binding BackgroundColor, ElementName=_modernButton, Converter={StaticResource ColorConverter}}"> 
           <ContentPresenter /> 
          </Grid> 
         </Border> 
        </ControlTemplate> 
       </Button.Template> 
      </Button> 
     </ControlTemplate> 
    </UserControl.Template> 

a Alle Benutzersteuerung (zumindest hinsichtlich der XAML und deren Vorlage), ist eine Grenze mit einem Content seines Innern. Der ContentPresenter ist wirklich der einzige wichtige Teil.

Also alles, was Sie tun, ist seine Vorlage aus und feed die Content-Eigenschaft der UserControl hat in etwas ein wenig anders; In diesem Fall, deine Taste.

Dies ist der Unterschied zwischen einem Benutzersteuerelement macht aus anderen Kontrollen und einige Steuerelemente in ein Benutzersteuer schiebend. Wenn Sie die Benutzersteuerung aus anderen Steuerelementen herausnehmen, erhalten Sie viel mehr Leistung.

Answer 4

Verwenden Sie die ContentPropertyAttribute, um den XAML anzuweisen, diese Eigenschaft anstelle der eigentlichen Content-Eigenschaft festzulegen.

Dann binden Sie in Ihrem XAML den Content Presenter an die InnerContent-Eigenschaft.

<ContentPresenter Content="{Binding InnerContent, ElementName=_modernButton}"/> 

Auf diese Weise können Sie Folgendes tun, ohne den eigentlichen Inhalt zu ersetzen.

<control:ModernButton Size="200" BackgroundColor="Light"> 
    TEST 
</control:ModernButton>