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>