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>