Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
3 of 24 tasks
karmeye opened this issue May 5, 2024 · 0 comments

Comments

@karmeye
Copy link

karmeye commented May 5, 2024

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
  • 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)
  • 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)
  • 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant