How do I make a header for a ListBoxItem?

问题

I use ListBox in my application. ListBox has two columns. I want to make a title for the columns. It is layout

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

When a few items in the ListBox are all displayed OK. But when a lot of elements in the list - a vertical scroll bar in ListBox is visible. Then the title and move across the width of the columns.

How to align the width of the columns and headers?

回答1:

WPF provides some properties just for this purpose. You need to use the SharedSizeGroup and Grid.IsSharedSizeScope properties:

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

Please se the Grid.IsSharedSizeScope Attached Property page at MSDN for more information.

回答2:

Why so complicated? Just use the GridViewColumn's "Header" attribute...

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

回答3:

I would recommend using a ListView, there you can define and style headers for each column and don't have to care about the positioning:

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

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

来源：https://stackoverflow.com/questions/18781411/how-do-i-make-a-header-for-a-listboxitem