WPF - 在用戶控件中託管內容

Question

我試圖創建一個用戶控件，其中有兩行的Grid。 第一行是標題，第二行是用戶控件之外定義的內容，例如我們示例中的Button。

不知何故，我沒有得到它的工作。

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

主窗口XAML：

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

下面的圖片應該解釋什麼是我的問題：

Answer 1

下面的代碼

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

表示您將UserControl1的Content屬性設置爲該按鈕。這個按鈕只是取代UserControls1的標記。因此，您在UserControl1.xaml中的所有內容都不再存在。

編輯

如果你希望你的用戶控件來承載一些標記，這將在什麼地方呢以外設置，你可以添加一個DependencyProperty到它，例如：

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

，並添加一些元素是它的標記來承載額外的內容。下面是擴展您提供的標記的例子：

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

現在你可以用它如下：

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

Answer 2

你必須設置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

您可以模板用戶控制添加額外的視覺效果，如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 4

與使用模板

< ContentControl中/>

而不是使用內容呈現

的

所以把這個：

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

給你的用戶控件