Как упорядочить макет ItemsPanel?

Question

У меня есть код, ниже которого я хочу отображать серию кнопок по горизонтали с изображением и текстовой меткой, а под этой строкой кнопок - одна метка для всей группы кнопок. У меня в настоящее время отображаются кнопки в строке, но метка группы отображается в той же строке слева от кнопок. Возможно, я ошибаюсь, но я впечатлен тем, что добрался до этого. Я попытался поместить Child ItemsPanel в StackPanel, но тогда он не показывает никаких кнопок - похоже, он потеряет контакт с коллекцией из родительского окна. Есть ли простой способ подключить эту коллекцию и организовать ярлык под кнопками? Я думаю, что моя следующая попытка - собрать данные от родителя в коде кода ребенка и построить элемент ItemsS, который я затем подключу к 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>