Grouped listview with stretched header

[MattHoppler]

Feature request for ListViewExtensions

Current behavior

Using listview with a grouped list, it's difficult to stretch the GroupHeader. The only way by now is using deprecated ContainerStyle.

Expected behavior

ListViewExtenions should have some method StretchHeader ... similar to ListViewExtensions.StretchItemContainerDirection.

Minimal reproduction of the problem with instructions

<Page.Resources>
    <CollectionViewSource x:Name="CVS" x:Key="CVS" IsSourceGrouped="True" />
</Page.Resources>

<Grid>
    <ListView ItemsSource="{Binding Source={StaticResource CVS}}" extensions:ListViewExtensions.StretchItemContainerDirection="Both">
        <ListView.GroupStyle>
            <GroupStyle HidesIfEmpty="True">
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Background="LightBlue">
                            <TextBlock Text="{Binding Path=Key}" />
                        </StackPanel>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListView.GroupStyle>
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="5" Background="LightGray">
                    <TextBlock Text="{Binding Path=Name}" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        List<MyClass> myClasses = new List<MyClass>();
        myClasses.Add(new MyClass { Name = "A", Complete = false });
        myClasses.Add(new MyClass { Name = "B", Complete = true });
        myClasses.Add(new MyClass { Name = "C", Complete = true });
        myClasses.Add(new MyClass { Name = "D", Complete = false });
        myClasses.Add(new MyClass { Name = "E", Complete = true });
        myClasses.Add(new MyClass { Name = "F", Complete = false });
        myClasses.Add(new MyClass { Name = "A", Complete = false });
        myClasses.Add(new MyClass { Name = "B", Complete = true });
        myClasses.Add(new MyClass { Name = "C", Complete = true });
        myClasses.Add(new MyClass { Name = "D", Complete = false });
        myClasses.Add(new MyClass { Name = "E", Complete = true });
        myClasses.Add(new MyClass { Name = "F", Complete = false });
        myClasses.Add(new MyClass { Name = "A", Complete = false });
        myClasses.Add(new MyClass { Name = "B", Complete = true });
        myClasses.Add(new MyClass { Name = "C", Complete = true });
        myClasses.Add(new MyClass { Name = "D", Complete = false });
        myClasses.Add(new MyClass { Name = "E", Complete = true });
        myClasses.Add(new MyClass { Name = "F", Complete = false });
        //Group the data
        var groups = from c in myClasses
                     group c by c.Complete;
        //Set the grouped data to CollectionViewSource
        CVS.Source = groups;
    }
}
public class MyClass
{
    public string Name { get; set; }
    public bool Complete { get; set; }
}

Environment

Nuget Package(s):
Microsoft.Toolkit.Uwp.UI (4.0)

Package Version(s):

Windows 10 Build Number:

• [x ] 1809 (17763.55)

App min and target version:

• [x ] Version 1803 (17134)
• [x ] Fall Creators Update (16299)

Device form factor:

• [ x] Desktop

Visual Studio

• [x ] 2017 (version: 15.8.7)

[Kyaa-dost]

Will be moving this to the discussion as that will our new platform for all the older discussions that still require further input and clarity.