c# - 在 Usercontrol 中填充 Stackpanel

Question

我现在正在搜索几个小时，但找不到正确的方法。

我构建了一个用户控件“MyToolbarGroup”，里面有一个 GroupText 和一个空的 Stackpanel。

现在我想在我的另一个用户控件“MyUserControl”上使用控件 MyToolbarGroup，并在 MyToolbarGroup 控件的 Stackpanel 中创建一些按钮。

MyToolbarGroup-XAML

<UserControl x:Class="TestUi.MyToolbarGroup"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" d:DesignWidth="153" d:DesignHeight="103">
    <Grid>
        <Border BorderBrush="Black" BorderThickness="2">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="30" />
                </Grid.RowDefinitions>
                <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center" Margin="5,5,5,5" />
                <Label Grid.Row="1" HorizontalContentAlignment="Center" Content="{Binding Path=GroupText}" Background="LightBlue" />
            </Grid>
        </Border>
    </Grid>
</UserControl>

MyToolbarGroup-代码

public partial class MyToolbarGroup : UserControl
{
    public static readonly DependencyProperty GroupTextProperty = DependencyProperty.Register("GroupText", typeof(string), typeof(MyToolbarGroup));

    public String GroupText
    {
        get { return (String)GetValue(GroupTextProperty); }
        set { SetValue(GroupTextProperty, value); }
    }

    public MyToolbarGroup()
    {
        InitializeComponent();
        DataContext = this;
    }
}

MyUserControl-XAML

<UserControl
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:TestUi" x:Class="TestUi.MyUserControl" 
             mc:Ignorable="d" 
             d:DesignHeight="224" d:DesignWidth="343">
    <Grid>
        <local:MyToolbarGroup HorizontalAlignment="Left" Margin="40,30,0,0" VerticalAlignment="Top" Height="148" Width="238" GroupText="Test-Group">
            <!-- Something like that
            <Stackpanel-Inside-MyToolbarGroup>
                <Button  HorizontalAlignment="Center" VerticalAlignment="Center" Height="65" Width="65" Content="Button 1"/>
            </Stackpanel-Inside-MyToolbarGroup>
            -->
        </local:MyToolbarGroup>
    </Grid>
</UserControl>

关于如何在堆栈面板中设置一些按钮有什么想法吗？

感谢您的帮助!

Answer 1

在 MyToolbarGroup 模板中包含一个 ContentPresenter 以接受用户内容

<UserControl x:Class="TestUi.MyToolbarGroup"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:testUi="clr-namespace:TestUi"
             mc:Ignorable="d" d:DesignWidth="153" d:DesignHeight="103">
    <UserControl.Template>
        <ControlTemplate TargetType="UserControl">
            <Grid>
                <Border BorderBrush="Black" BorderThickness="2">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="30" />
                        </Grid.RowDefinitions>

                        <ContentPresenter Content="{TemplateBinding Content}"/>

                        <Label Grid.Row="1" HorizontalContentAlignment="Center"
                               Content="{Binding GroupText, RelativeSource={RelativeSource AncestorType=testUi:MyToolbarGroup}}"
                               Background="LightBlue" />
                    </Grid>
                </Border>
            </Grid>
        </ControlTemplate>
    </UserControl.Template>
</UserControl>

然后像这样使用它:

<testUi:MyToolbarGroup Grid.Row="2"
    HorizontalAlignment="Left" 
    VerticalAlignment="Top" 
    Height="148" Width="238" GroupText="Test-Group">
    <!--any content, e.g. -->
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="A" Margin="5"/>
        <TextBlock Text="B"  Margin="5"/>
    </StackPanel>
</testUi:MyToolbarGroup>

结果: