如何组织ItemsPanel布局？

Question

我有下面的代码，我想用图像和文本标签水平地显示一系列按钮，在这一行按钮下面为整个按钮组显示一个标签。我现在拥有的是在一行中显示按钮，但组标签显示在按钮左侧的同一行中。我可能做错了，但我对自己走了这么远的路印象深刻。我尝试过将ItemsPanel放在一个StackPanel中，但是它没有显示按钮--它似乎与父窗口中的集合失去了联系。有没有一种简单的方法连接这个集合并组织按钮下面的标签？我想我的下一个尝试是收集子代码背后的父代码中的数据，并构建一个ItemsSource，然后我将连接到ItemTemplate，但我也不知道如何做到这一点。

父窗口片段：

<User_Controls:ToolbarGroup GroupLabel="Group 1">
    <User_Controls:ImageButton ButtonText="Test 1"/>
    <User_Controls:ImageButton ButtonText="Test 2"/>
    <User_Controls:ImageButton ButtonText="Test 3"/>
</User_Controls:ToolbarGroup>

子窗口代码：

<ItemsControl x:Class="Fiducia_WPF.User_Controls.ToolbarGroup"
    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:User_Controls="clr-namespace:Fiducia_WPF.User_Controls" 
    mc:Ignorable="d" 
    Loaded="ItemsControl_Loaded"
    d:DesignHeight="170" d:DesignWidth="320">

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" Height="170" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <User_Controls:ImageButton ButtonText="Temp"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <Label Name="lblGroupTitle" Grid.Row="1" Grid.Column="0" Content="Group X" FontSize="16" FontWeight="Bold" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Visible" />
</ItemsControl>

Answer 1

您应该为您的ControlTemplate创建一个ItemsControl：

<ItemsControl x:Class="Fiducia_WPF.User_Controls.ToolbarGroup" ...>
    <ItemsControl.Template>
        <ControlTemplate TargetType="ItemsControl">
            <StackPanel>
                <ItemsPresenter/>
                <Label x:Name="lblGroupTitle" Content="Group X" ... />
            </StackPanel>
        </ControlTemplate>
    </ItemsControl.Template>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" Height="170" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <User_Controls:ImageButton ButtonText="Temp"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

设置lblGroupTitle标签的内容可能最好将其绑定到ToolbarGroup控件的属性：

<Label Content="{Binding GroupTitle,
    RelativeSource={RelativeSource AncestorType=User_Controls:ToolbarGroup}}" ... />

Answer 2

我只会用一个直截了当的网格

<Grid>
 <Grid.ColumnDefinitions>
   <ColumnDefinition Width="*" />
   <ColumnDefinition Width="*" />
   <ColumnDefinition Width="*" />
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
   <RowDefinition Height="*"/>
   <RowDefinition Height="*"/>
 </Grid.RowDefinitions>
 <Button Grid.Row="0" Grid.Column="0" ... />
 <Button Grid.Row="0" Grid.Column="1" ... />
 <Button Grid.Row="0" Grid.Column="2" ... />
 <Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" />
</Grid>