How do I make a header for a ListBoxItem? How do I make a header for a ListBoxItem? wpf wpf

How do I make a header for a ListBoxItem?


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.


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

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


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>