如何组织 ItemsPanel 布局？

Question

我有下面的代码，我想在其下方显示一系列带有图像和文本标签的按钮，并在该行按钮下方显示整个按钮组的标签。我目前拥有的内容是连续显示按钮，但组标签显示在按钮左侧的同一行中。我可能做错了，但我对我能走到这一步印象深刻。我尝试将 Child ItemsPanel 放在 StackPanel 中，但随后它没有显示任何按钮 - 它似乎与父窗口中的集合失去了联系。有没有一种简单的方法可以连接这个集合并组织按钮下方的标签？我想我的下一个尝试是在孩子的代码隐藏中从父级收集数据并构建一个 ItemsSource，然后我将连接到 ItemTemplate，但我也不知道该怎么做。

父窗口sn-p：

<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

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

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