GroupStyle header vertically at the top not centered

Question

I try to generate a listview with the following layout:

If I use the standard grouping, the headers (continent names) are always rendered vertically centered, but need them vertically at the top of the group.

Answer 1

For that column, or the cells in that column, you should set the cell's content to use a VerticalAlignment=Center.

This answer may be helpful to you.

Answer 2

The kind of output you want can be achieved using approach given below :

<Window ...>
<Window.Resources>

    <Style x:Key="HeaderContainerStyleKey" TargetType="GridViewColumnHeader">
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
    </Style>

    <GridViewColumnCollection x:Key="ColumnKey">
        <GridViewColumn Width="75"  HeaderContainerStyle="{StaticResource HeaderContainerStyleKey}">                
            <GridViewColumn.HeaderTemplate>
                <DataTemplate>
                    <Grid Height="20">
                        <Line VerticalAlignment="Bottom" Stroke="#000" X2="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=GridViewColumnHeader}}"/>
                    </Grid>
                </DataTemplate>
            </GridViewColumn.HeaderTemplate>

            <GridViewColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock>
                        <Run  Text="{Binding Name, Mode=OneWay}"/>
                        <Run Text=":"/>
                    </TextBlock>
                </DataTemplate>
            </GridViewColumn.CellTemplate>
        </GridViewColumn>
    </GridViewColumnCollection>

    <GridViewColumnCollection x:Key="ColumnsKey">
        <GridViewColumn Width="75"  HeaderContainerStyle="{StaticResource HeaderContainerStyleKey}">
            <GridViewColumn.HeaderTemplate>
                <DataTemplate>
                        <Grid Height="20">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="Name" VerticalAlignment="Bottom" Height="16"/>
                        <Line Grid.Column="1" VerticalAlignment="Bottom" Stroke="#000" X2="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=GridViewColumnHeader}}"/>
                    </Grid>
                </DataTemplate>
            </GridViewColumn.HeaderTemplate>
            <GridViewColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock>
                        <Run Text="{Binding CountryName}"/>
                        <Run Text=","/>
                    </TextBlock>
                </DataTemplate>
            </GridViewColumn.CellTemplate>
        </GridViewColumn>
        <GridViewColumn Width="100" Header="Inhabitants" DisplayMemberBinding="{Binding CountryPopulation}" HeaderContainerStyle="{StaticResource HeaderContainerStyleKey}">
            <GridViewColumn.HeaderTemplate>
                <DataTemplate>
                    <Grid Height="20">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="Inhabitants" VerticalAlignment="Bottom"/>
                        <Line Grid.Column="1" VerticalAlignment="Bottom" Stroke="#000" X2="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=GridViewColumnHeader}}"/>
                    </Grid>
                </DataTemplate>
            </GridViewColumn.HeaderTemplate>
        </GridViewColumn>
    </GridViewColumnCollection>

</Window.Resources>

<Grid>        
    <Grid.Resources>
        <CollectionViewSource x:Key="CvsKey" Source="{Binding Data}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="ContinentName"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>
    </Grid.Resources>

    <StackPanel>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <GridViewHeaderRowPresenter Columns="{StaticResource ColumnKey}" Grid.Column="0"/>
            <GridViewHeaderRowPresenter Columns="{StaticResource ColumnsKey}" Grid.Column="1"/>
        </Grid>
        <ListView Visibility="Visible" ItemsSource="{Binding Source={StaticResource CvsKey}}" BorderThickness="0">
            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="GroupItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="GroupItem">
                                        <StackPanel Orientation="Horizontal">                                                
                                            <GridViewRowPresenter Margin="0 0 0 10" Columns="{StaticResource ColumnKey}" Content="{Binding DataContext, RelativeSource={RelativeSource Self}}"/>
                                            <ItemsControl ItemsSource="{Binding DataContext.Items, RelativeSource={RelativeSource AncestorType=GroupItem}}">
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <GridViewRowPresenter Margin="0 0 0 10"  Columns="{StaticResource ColumnsKey}" Content="{Binding DataContext, RelativeSource={RelativeSource Mode=Self}}"/>
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                            </ItemsControl>
                                        </StackPanel>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </ListView.GroupStyle>
        </ListView>
    </StackPanel>

    </Grid>
</Window>

ViewModel

public class ViewModel:INotifyPropertyChanged
{       
    public List<ContinentData> Data { get; set; }
    public ViewModel()
    {
        Data = new List<ContinentData>();
        Data.Add(new ContinentData() { ContinentName="Europe", CountryName="Italy", CountryPopulation="12345" });
        Data.Add(new ContinentData() { ContinentName = "Asia", CountryName = "India", CountryPopulation="987253" });
        Data.Add(new ContinentData() { ContinentName = "Asia", CountryName = "Pak", CountryPopulation = "987253" });
        Data.Add(new ContinentData() { ContinentName = "Europe", CountryName = "Germany", CountryPopulation = "54678" });
        Data.Add(new ContinentData() { ContinentName = "Asia", CountryName = "Nepal", CountryPopulation = "987253" });
        Data.Add(new ContinentData() { ContinentName = "Asia", CountryName = "China", CountryPopulation = "987253" });
        Data.Add(new ContinentData() { ContinentName = "Europe", CountryName = "England", CountryPopulation="54678" });
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string prop)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(prop));
    }
}

public class ContinentData
{
    public string ContinentName { get; set; }
    public string CountryName { get; set; }
    public string CountryPopulation { get; set; }        
}

public MainWindow()
    {
        InitializeComponent();

        this.DataContext = new ViewModel();
    }