Windows
Windows copied to clipboard
`StickyHeaderBehavior` in conjuction with `ListView.GroupStyle`: The `GroupStyle` header covers sticky header
Describe the bug
Th in conjuction with ObservableGroup
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
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.