FetFrumos FetFrumos - 11 months ago 37
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 Source

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.