如何为 ListBoxItem 创建标题？答案

【问题标题】：How do I make a header for a ListBoxItem?如何为 ListBoxItem 创建标题？
【发布时间】：2013-09-17 20:26:44
【问题描述】：

我在我的应用程序中使用 ListBox。 ListBox 有两列。我想为列命名。是布局

  <Window.Resources>
    <Style x:Key="borderBase" TargetType="Border">
        <Setter Property="BorderBrush" Value="Black" />
        <Setter Property="BorderThickness" Value="1" />
    </Style>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="7*" />
    </Grid.RowDefinitions>
    <!--  Title  -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Border Style="{StaticResource borderBase}">
            <TextBlock Text="FirstName" />
        </Border>

        <Border Grid.Column="1" Style="{StaticResource borderBase}">
            <TextBlock Text="SecondName" />
        </Border>

    </Grid>

    <!-- Data -->
    <ListBox Grid.Row="1">
        <ListBox.ItemTemplate>
            <DataTemplate>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <Border Style="{StaticResource borderBase}">
                        <TextBlock Style="{StaticResource textBlockBase}" Text="{Binding FirstName}" />
                    </Border>

                    <Border Grid.Column="1" Style="{StaticResource borderRigth}">
                        <TextBlock Style="{StaticResource textBlockBase}" Text="{Binding SecondName}" />
                    </Border>
                </Grid>

            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

</Grid>

当 ListBox 中的几个项目全部显示时 OK。但是当列表中有很多元素时——ListBox 中的垂直滚动条是可见的。然后是标题并移动到列的宽度。

如何对齐列和标题的宽度？

【问题讨论】：

没有 HeaderTemplate 太可笑了。
我想出了一个解决方案。 stackoverflow.com/a/41751947/73804

标签： c# wpf xaml listbox alignment

【解决方案1】：

WPF 为此提供了一些属性只是。您需要使用SharedSizeGroup 和Grid.IsSharedSizeScope 属性：

<Grid Grid.IsSharedSizeScope="True"><!-- Look HERE -->
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="7*" />
    </Grid.RowDefinitions>
    <!--  Title  -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="FirstNameColumn" /><!-- Look HERE -->
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Border Style="{StaticResource borderBase}">
            <TextBlock Text="FirstName" />
        </Border>
        <Border Grid.Column="1" Style="{StaticResource borderBase}">
            <TextBlock Text="SecondName" />
        </Border>
    </Grid>
    <!-- Data -->
    <ListBox Grid.Row="1">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition SharedSizeGroup="FirstNameColumn" />
                        <ColumnDefinition /><!--  Look Above HERE  -->
                    </Grid.ColumnDefinitions>
                    <Border Style="{StaticResource borderBase}">
                        <TextBlock Style="{StaticResource textBlockBase}" Text="{Binding FirstName}" />
                    </Border>
                    <Border Grid.Column="1" Style="{StaticResource borderRigth}">
                        <TextBlock Style="{StaticResource textBlockBase}" Text="{Binding SecondName}" />
                    </Border>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

</Grid>

请访问 MSDN 上的Grid.IsSharedSizeScope Attached Property 页面了解更多信息。

【讨论】：

优秀的答案！效果很好！
@Sheridan 应该警告人们在使用 SharedSizeGroup 时不能使用 * 属性来调整列的大小。 stackoverflow.com/a/4664030/73804
这是一个很好的观点@Patrick，谢谢你提到它。当然，在这些情况下，解决方案通常是简单地不在星号大小的列上使用SharedSizeGroup，而是在其余列上使用，这通常具有相同的最终结果。
@Sheridan 检查这个不错的解决方案。 stackoverflow.com/a/41751947/73804

【解决方案2】：

为什么这么复杂？只需使用 GridViewColumn 的“标题”属性...

 <ListView >
            <ListView.View>
                <GridView>
                    <GridViewColumn  Header="Id"/>
                    <GridViewColumn  Header="Name"/>
                </GridView>
            </ListView.View>
        </ListView>

【讨论】：

【解决方案3】：

我会推荐使用 ListView，在那里你可以为每一列定义和样式标题，而不必关心定位：

    <ListView>
        <ListView.View>
            <GridView>
                <GridViewColumn>
                    <GridViewColumn.CellTemplate>
                         <Border Style="{StaticResource borderBase}">
                             <TextBlock Style="{StaticResource textBlockBase}" Text="{Binding FirstName}" />
                         </Border>
                    </GridViewColumn.CellTemplate>
                    <GridViewColumn.HeaderTemplate>
                        <!--your header template-->
                    </GridViewColumn.HeaderTemplate>
                </GridViewColumn>
                <GridViewColumn>
                    <GridViewColumn.CellTemplate>
                         <Border Style="{StaticResource borderBase}">
                             <TextBlock Style="{StaticResource textBlockBase}" Text="{Binding SecondName}" />
                         </Border>
                    </GridViewColumn.CellTemplate>
                    <GridViewColumn.HeaderTemplate>
                        <!--your header template-->
                    </GridViewColumn.HeaderTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>

【讨论】：

【解决方案4】：

   <ListView ItemsSource="{Binding Source={StaticResource  Locator},Path=EtudiantVM.ListEtudiants}">
       <ListView.View>
      <GridView>
          <GridViewColumn  Header="Nom" Width="100">
              <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Nom}"></TextBlock>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
          </GridViewColumn>
            <GridViewColumn  Header="Prénom" Width="100">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Prenom}"></TextBlock>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn  Header="Note" Width="100">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Note}"></TextBlock>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>

【讨论】：

请描述答案。
您能对此进行扩展并解释它为什么有效吗？突出显示您的代码如何回答 OP 的问题会很有帮助

【解决方案5】：

    <Grid Style="{StaticResource TableHeader}">
        <Grid.Resources>
            <Style TargetType="{x:Type Border}" BasedOn="{StaticResource TableBorder}"/>
            <Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource TextTableHeader}">
                <Setter Property="TextWrapping" Value="Wrap"/>
            </Style>
        </Grid.Resources>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Border BorderThickness="1">
            <TextBlock Text="Card"/>
        </Border>

        <Border Grid.Column="1" BorderThickness="0 1 1 1">
            <TextBlock Text="Type"/>
        </Border>

        <Border Grid.Column="2" BorderThickness="0 1 1 1">
            <TextBlock Text="Limit"/>
        </Border>

        <Border Grid.Column="3" BorderThickness="0 1 1 1">
            <TextBlock Text="Amount"/>
        </Border>

        <Border Grid.Column="4" BorderThickness="0 1 1 1">
            <TextBlock Text="Payment Due"/>
        </Border>

    </Grid>

    <ListBox Style="{StaticResource ListBoxStyle}"
             ItemsSource="{Binding Source}"
             SelectedItem="{Binding SelectedItem}"
             IsHitTestVisible="{Binding IsSelectionActive}"
             ItemTemplate="{Binding ItemTemplate}" />
</Grid>

【讨论】：