ScrollHeader inside grouped ListView

[gillesbergerp]

When using ScrollHeader with Mode="Sticky" inside a ListView with grouped items, the groups' headers are displayed in front of the header.

Example

<ListView x:Name="lv" ItemsSource="{Binding Source={StaticResource cvs}}" SelectionMode="None">
    <ListView.Header>
        <controls:ScrollHeader Mode="Sticky" TargetListViewBase="{x:Bind lv,Mode=OneWay}">
            <Grid Height="200">
                <Grid.Background>
                    <SolidColorBrush Opacity="0.9" Color="Blue"/>
                </Grid.Background>
                <TextBlock Foreground="White" Text="header" FontSize="20" VerticalAlignment="Center"/>
            </Grid>
        </controls:ScrollHeader>
    </ListView.Header>
    <ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                       <TextBlock Text="{Binding Key}"/>
                   </Grid>
               </DataTemplate>
           </GroupStyle.HeaderTemplate>
       </GroupStyle>
   </ListView.GroupStyle>
</ListView>

Where cvs is a CollectionViewSource with IsSourceGrouped set to True.

Result

[nmetulev]

ping @pdehne

[nmetulev]

Quick update here, I looked into this. The ListViewHeaderItems are always kept up top no mater the Zindex. Tried forcing the ZIndexes but they keep getting ignored. It is possible the visuals are forced on top on the compositor level, and not sure how to override that behavior.

[Medality]

Hi,
The issue is also there when Mode="QuickReturn".
What would be great is to achieve the same effect as the Groove Music app with the Artist view. Can someone at Microsoft check how it was done?

Julien.

[nmetulev]

You can actually find a sample that is similar to that view in the Groove app in the WindowsUIDevLabs repo

[Medality]

Thanks but I didn't find anything that looks like the ScrollHeader in the WindowsUIDevLabs repo.
I'm talking about this view, which achieves the same effect as the ScrollHeader, apart from correctly supporting sticky group headers:

[Odonno]

@Medality I think what you want is a SemanticZoom https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/semantic-zoom

Am I right?

[Medality]

No not the SemanticZoom. It's hard to cature the effect on a screenshot but if you try it yourself, you'll see that the header (the part with "Refine" and "Shuffle all") behaves like a ScrollHeader in QuickReturn mode.
The only difference is that the group headers are correctly displayed (just below the header).
With the ScrollHeader, the group headers are displayed in front of the header (like the OP).

[nmetulev]

I see what you mean. I'll take a look at it, it might give me an idea on how it's done. Probably won't get to it until 2.2 though