如何在UserControl中使用ContentPresenter

Question

我想創建一個UserControl（在本例中是一個帶定義的Backgroundcolors的方形按鈕），它可以託管它自己的內容。

用戶控件：

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

現在，你可能會想到吧，如果我用我的MainView這裏面控制，直到我定義了一些內容寄託都工作得很好。

使用：

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

在這種情況下「TEST」將覆蓋用戶控件（全按鍵模板）的全部內容。我猜這是因爲UserControl內部的按鈕被定義爲「內容」本身，並且在定義新內容時它將被覆蓋。

所以最後的問題是：是否有可能實現我在找的東西？如果是的話：如何？我如何將我在MainView中定義的內容「重定向到」我的按鈕模板中的自定義ContentPresenter而不是UserControls的ContentPresenter？

如果可能的話，我不希望創建一個新的DP-屬性格式它承載我的內容，例如：

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

Answer 1

在這裏，我們再走。

<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

讓我們假設您選擇用戶控件是：

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

注意的TargetType屬性在模板上：沒有它，該項目將愉快地編譯，但ContentPresenter不起作用。 然後：

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

我強烈建議你read this實現什麼

Answer 3

簡單;只是繞過並替換UserControl的模板。

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

所有的用戶控件（至少XAML和模板的它而言），是內部具有ContentPresenter邊框。 ContentPresenter是唯一重要的部分，真的。

因此，你所要做的就是將模板提取出來，並將UserControl的Content屬性提供給一些有點不同的東西;在這種情況下，你的按鈕。

這是製作一個usercontrol 出的其他控制，推搡和一些控制成用戶控件之間的差異。 使用戶控制離開其他控件可以提供更多的功能。

Answer 4

使用ContentPropertyAttribute來指示xaml設置此屬性而不是實際的Content屬性。

[ContentProperty("InnerContent")] 
public partial class ModernButton : UserControl 
{ 
    public ModernButton() 
    { 
     InitializeComponent(); 
    } 

    public static readonly DependencyProperty InnerContentProperty = 
     DependencyProperty.Register("InnerContent", typeof(object), typeof(ModernButton)); 

    public object InnerContent 
    { 
     get { return (object)GetValue(InnerContentProperty); } 
     set { SetValue(InnerContentProperty, value); } 
    } 
} 

然後在您的xaml中，將Content Presenter綁定爲使用InnerContent屬性。

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

這樣，您可以在不更換實際內容的情況下執行下列操作。

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