FetFrumos FetFrumos - 1 month ago 8
C# Question

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.

a busy cat

How to align the width of the columns and headers?

Answer

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.