c# - WPF 用户控件中的多个内容演示者

Question

我正在创建一个 WPF 用户控件，它就像一个已设置大部分布局的窗口。但是有几个部分我希望用户放置他们的控件。为了实现这一点，我相信我需要在我的用户控件中公开一些依赖属性。

输出应该有点像这样

在此处输入图像描述

用户控制代码

   public class Class1 : UserControl
{
    public ContentControl Content1
    {
        get { return (ContentControl)GetValue(Content1Property); }
        set { SetValue(Content1Property, value); }
    }

    // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty Content1Property =
        DependencyProperty.Register("Content1", typeof(ContentControl), typeof(Class1), null);

    public ContentControl Content2
    {
        get { return (ContentControl)GetValue(Content2Property); }
        set { SetValue(Content2Property, value); }
    }

    // Using a DependencyProperty as the backing store for Content2.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty Content2Property =
        DependencyProperty.Register("Content2", typeof(ContentControl), typeof(Class1), null);


    public ContentControl Content3
    {
        get { return (ContentControl)GetValue(Content3Property); }
        set { SetValue(Content3Property, value); }
    }

    // Using a DependencyProperty as the backing store for Content3.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty Content3Property =
        DependencyProperty.Register("Content3", typeof(ContentControl), typeof(Class1),null);


}

并且控件的相应xaml是

 <Style TargetType="{x:Type userControl:Class1}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="userControl:Class1">
                <Grid ShowGridLines="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="10"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="10"></ColumnDefinition>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                        <ColumnDefinition Width="10"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="10"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="10"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="10"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="10"></RowDefinition>
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="1" Grid.Column="1" Text="First Content"></TextBlock>
                    <ContentPresenter x:Name="firstContentPresenter" ContentSource="{TemplateBinding Content1}" Grid.Row="1" Grid.Column="3"></ContentPresenter>


                    <TextBlock Grid.Row="3" Grid.Column="1" Text="First Content"></TextBlock>
                    <ContentPresenter x:Name="secondContentPresenter"  ContentSource="{TemplateBinding Content2}"  Grid.Row="3" Grid.Column="3"></ContentPresenter>

                    <TextBlock Grid.Row="5" Grid.Column="1" Text="First Content"></TextBlock>
                    <ContentPresenter x:Name="thirdContentPresenter"  ContentSource="{TemplateBinding Content3}"  Grid.Row="5" Grid.Column="3"></ContentPresenter>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我正在尝试像这样使用它

 <userControl:Class1 Width="200" Height="200" Background="GreenYellow">

    <userControl:Class1.Content1>
        <Label>I am number 1</Label>
    </userControl:Class1.Content1>
    <userControl:Class1.Content2>
        <Label>I am number 2</Label>
    </userControl:Class1.Content2>
    <userControl:Class1.Content3>
        <Label>I am number 3</Label>
    </userControl:Class1.Content3>
</userControl:Class1>

上面代码的输出什么都没有。

在此处输入图像描述

score 17 · Accepted Answer

Class1.cs 更改：

public class Class1 : Control {
  public Class1() {
    this.DefaultStyleKey = typeof(Class1);
  }

  public object Content1 {
    get { return GetValue(Content1Property); }
    set { SetValue(Content1Property, value); }
  }

  // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
  public static readonly DependencyProperty Content1Property =
      DependencyProperty.Register("Content1", typeof(object), typeof(Class1), null);

  public object Content2 {
    get { return GetValue(Content2Property); }
    set { SetValue(Content2Property, value); }
  }

  // Using a DependencyProperty as the backing store for Content2.  This enables animation, styling, binding, etc...
  public static readonly DependencyProperty Content2Property =
      DependencyProperty.Register("Content2", typeof(object), typeof(Class1), null);


  public object Content3 {
    get { return GetValue(Content3Property); }
    set { SetValue(Content3Property, value); }
  }

  // Using a DependencyProperty as the backing store for Content3.  This enables animation, styling, binding, etc...
  public static readonly DependencyProperty Content3Property =
      DependencyProperty.Register("Content3", typeof(object), typeof(Class1), null);
}

样式更改（Dictionary1.xaml）：

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:ui="clr-namespace:WpfApplication1"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <Style TargetType="ui:Class1">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ui:Class1">
                        <Grid ShowGridLines="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="10"></ColumnDefinition>
                                <ColumnDefinition Width="Auto"></ColumnDefinition>
                                <ColumnDefinition Width="10"></ColumnDefinition>
                                <ColumnDefinition Width="Auto"></ColumnDefinition>
                                <ColumnDefinition Width="10"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="10"></RowDefinition>
                                <RowDefinition Height="Auto"></RowDefinition>
                                <RowDefinition Height="10"></RowDefinition>
                                <RowDefinition Height="Auto"></RowDefinition>
                                <RowDefinition Height="10"></RowDefinition>
                                <RowDefinition Height="Auto"></RowDefinition>
                                <RowDefinition Height="10"></RowDefinition>
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="1" Grid.Column="1" Text="First Content"></TextBlock>
                            <ContentPresenter x:Name="firstContentPresenter" Content="{TemplateBinding Content1}" Grid.Row="1" Grid.Column="3"></ContentPresenter>


                            <TextBlock Grid.Row="3" Grid.Column="1" Text="First Content"></TextBlock>
                            <ContentPresenter x:Name="secondContentPresenter"  Content="{TemplateBinding Content2}"  Grid.Row="3" Grid.Column="3"></ContentPresenter>

                            <TextBlock Grid.Row="5" Grid.Column="1" Text="First Content"></TextBlock>
                            <ContentPresenter x:Name="thirdContentPresenter"  Content="{TemplateBinding Content3}"  Grid.Row="5" Grid.Column="3"></ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>

MainWindow.xaml：

    <Window x:Class="WpfApplication1.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:ui="clr-namespace:WpfApplication1"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <ui:Class1 Width="200" Height="200">
                <ui:Class1.Content1>
                    <Label x:Name="lbl">rrrr</Label>
                </ui:Class1.Content1>
                <ui:Class1.Content2>
                    <Label>eee</Label>
                </ui:Class1.Content2>
                <ui:Class1.Content3>
                    <Label>ffff</Label>
                </ui:Class1.Content3>
            </ui:Class1>
        </Grid>
  </Window>

附加字典（App.xaml）：

<Application x:Class="WpfApplication1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Dictionary1.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

    </Application.Resources>
</Application>

在此处输入图像描述

这对我有用。

c# - WPF 用户控件中的多个内容演示者

1 回答 1

Related

Reference