Question

我有下面的代码，我希望水平显示一系列按钮，图像和文本标签，并在该行按钮下方为整个按钮组添加一个标签。我当前拥有的按钮连续显示按钮，但组标签显示在按钮左侧的同一行。我可能做错了，但是我对此感到印象深刻。我已经尝试将Child 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

我只是直接使用网格：

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

Answer 2

您应该为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}}" ... />

如何组织ItemsPanel布局？

2 个答案: