Windows icon indicating copy to clipboard operation
Windows copied to clipboard

`StickyHeaderBehavior` in conjuction with `ListView.GroupStyle`: The `GroupStyle` header covers sticky header

Open karmeye opened this issue 1 year ago • 0 comments

Describe the bug

Th in conjuction with ObservableGroup

Screenshot 1

Steps to reproduce

Basically use the example xaml from the MVVM Toolkit Sample App, and add the StickyHeaderBehavior based on the example in Windows Community Toolkit Gallery:

<SemanticZoom>
    <SemanticZoom.ZoomedInView>
        <ListView
            ItemTemplate="{StaticResource PersonListViewTemplate}"
            ItemsSource="{x:Bind PeopleViewSource.View, Mode=OneWay}"
            SelectionMode="Single">
            
            <ListView.Header>
                <Grid MinHeight="48"
                      Background="{ThemeResource AccentFillColorDefaultBrush}">
                    <interactivity:Interaction.Behaviors>
                        <CommunityToolkitBehaviors:StickyHeaderBehavior />
                    </interactivity:Interaction.Behaviors>
                    <TextBlock HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
                               Text="Header" />
                </Grid>
            </ListView.Header>
            
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsStackPanel AreStickyGroupHeadersEnabled="True" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            
            <ListView.GroupStyle>
                <GroupStyle HidesIfEmpty="True">
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate x:DataType="collections:IReadOnlyObservableGroup">
                            <TextBlock
                                FontSize="24"
                                Foreground="{ThemeResource SystemControlHighlightAccentBrush}"
                                Text="{x:Bind Key}" />
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>
        </ListView>
    </SemanticZoom.ZoomedInView>
    <SemanticZoom.ZoomedOutView>
        <GridView
            HorizontalAlignment="Stretch"
            ItemsSource="{x:Bind PeopleViewSource.View.CollectionGroups, Mode=OneWay}"
            SelectionMode="Single">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="ICollectionViewGroup">
                    <Border Width="80" Height="80">
                        <TextBlock
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            FontSize="32"
                            Foreground="{ThemeResource SystemControlHighlightAccentBrush}"
                            Text="{x:Bind Group.(collections:IReadOnlyObservableGroup.Key)}" />
                    </Border>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </SemanticZoom.ZoomedOutView>
</SemanticZoom>

Expected behavior

The ListView header should cover (higher z-index) than the GroupStyle header.

Screenshots

Screenshot 1

Code Platform

  • [ ] UWP
  • [X] WinAppSDK / WinUI 3
  • [ ] Web Assembly (WASM)
  • [ ] Android
  • [ ] iOS
  • [ ] MacOS
  • [ ] Linux / GTK

Windows Build Number

  • [ ] Windows 10 1809 (Build 17763)
  • [ ] Windows 10 1903 (Build 18362)
  • [ ] Windows 10 1909 (Build 18363)
  • [ ] Windows 10 2004 (Build 19041)
  • [ ] Windows 10 20H2 (Build 19042)
  • [ ] Windows 10 21H1 (Build 19043)
  • [ ] Windows 10 21H2 (Build 19044)
  • [ ] Windows 10 22H2 (Build 19045)
  • [ ] Windows 11 21H2 (Build 22000)
  • [X] Other (specify)

Other Windows Build number

23H2

App minimum and target SDK version

  • [ ] Windows 10, version 1809 (Build 17763)
  • [ ] Windows 10, version 1903 (Build 18362)
  • [ ] Windows 10, version 1909 (Build 18363)
  • [ ] Windows 10, version 2004 (Build 19041)
  • [ ] Windows 10, version 2104 (Build 20348)
  • [X] Windows 11, version 22H2 (Build 22000)
  • [ ] Other (specify)

Other SDK version

No response

Visual Studio Version

2022

Visual Studio Build Number

17.9.6

Device form factor

Desktop

Additional context

Not sure if this is more of a https://github.com/microsoft/microsoft-ui-xaml issue.

Help us help you

No, I'm unable to contribute a solution.

karmeye avatar May 05 '24 03:05 karmeye