Skip to content

Commit 5dc89db

Browse files
michael-hawkermichael-hawker
committed
Clean-up base check for AssociatedObject and add two new samples for new scenarios enabled by changes
Show a HeaderedItemsControl with a StickyHeader Show a QuickReturn of an element that's at the top of a ScrollViewer (doesn't load properly on first load though??)
1 parent 4065216 commit 5dc89db

File tree

6 files changed

+147
-8
lines changed

6 files changed

+147
-8
lines changed

‎components/Behaviors/samples/Headers/HeaderBehaviors.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ issue-id: 0
1212
icon: Assets/Behaviors.png
1313
---
1414

15-
The `FadeHeaderBehavior`, `QuickReturnHeaderBehavior`, and `StickyHeaderBehavior` most commonly apply behaviors to `ListView`, `GridView`, and `HeaderedTreeView` elements in their `Header`. It can also be applied to any element contained at the top of a `ScrollViewer`.
15+
The `FadeHeaderBehavior`, `QuickReturnHeaderBehavior`, and `StickyHeaderBehavior` most commonly apply behaviors to `ListView`, `GridView`, `HeaderedItemsControl`, and `HeaderedTreeView` elements in their `Header`. It can also be applied to any element contained at the top of a `ScrollViewer`.
1616

1717
They use composition animations to allow the visual of an element of a scrolling viewport to be manipulated for various effects.
1818

@@ -34,8 +34,16 @@ The QuickReturnHeaderBehavior causes the element in the scrolling collection to
3434

3535
> [!Sample QuickReturnHeaderBehaviorSample]
3636
37+
It can also be used to have content quickly re-appear in any `ScrollViewer`:
38+
39+
> [!Sample QuickReturnScrollViewerSample]
40+
3741
## StickyHeaderBehavior
3842

3943
The StickyHeaderBehavior causes the element in the scrolling collection to stay in view as the user scrolls up and down in the collection.
4044

4145
> [!Sample StickyHeaderBehaviorSample]
46+
47+
Or similarly, it can be used with a `HeaderedItemsControl` to maintain context at the top:
48+
49+
> [!Sample StickyHeaderItemsControlSample]

‎components/Behaviors/samples/Headers/QuickReturnScrollViewerSample.xaml‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<Page x:Class="BehaviorsExperiment.Samples.QuickReturnScrollViewerSample"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
7+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
9+
mc:Ignorable="d">
10+
11+
<!-- We need to set height here to force scrolling in the sample -->
12+
<ScrollViewer Height="300">
13+
<StackPanel MaxWidth="480">
14+
<Image Width="100"
15+
Height="100"
16+
HorizontalAlignment="Center"
17+
Source="ms-appx:///Assets/ToolkitIcon.png">
18+
<interactivity:Interaction.Behaviors>
19+
<behaviors:QuickReturnHeaderBehavior />
20+
</interactivity:Interaction.Behaviors>
21+
</Image>
22+
<TextBlock HorizontalAlignment="Center"
23+
Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Quis vel eros donec ac odio. Nisi porta lorem mollis aliquam ut. At varius vel pharetra vel turpis nunc. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Est pellentesque elit ullamcorper dignissim cras tincidunt. Amet consectetur adipiscing elit pellentesque habitant. Purus sit amet luctus venenatis lectus magna. Amet consectetur adipiscing elit ut aliquam purus. Felis eget nunc lobortis mattis aliquam faucibus purus in. Mattis rhoncus urna neque viverra justo nec ultrices. Ipsum nunc aliquet bibendum enim facilisis gravida. Nisi est sit amet facilisis magna. Suspendisse interdum consectetur libero id faucibus nisl. Malesuada bibendum arcu vitae elementum curabitur. Molestie ac feugiat sed lectus vestibulum mattis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Quis enim lobortis scelerisque fermentum dui faucibus in. Sagittis purus sit amet volutpat consequat mauris nunc congue nisi. Leo duis ut diam quam nulla porttitor massa. Metus aliquam eleifend mi in. Fringilla urna porttitor rhoncus dolor. Sapien eget mi proin sed. A cras semper auctor neque. Id faucibus nisl tincidunt eget nullam non nisi. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Urna id volutpat lacus laoreet non. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Arcu non odio euismod lacinia at quis risus sed. In massa tempor nec feugiat. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Iaculis nunc sed augue lacus viverra vitae. Rhoncus est pellentesque elit ullamcorper dignissim. Ac tincidunt vitae semper quis lectus nulla at volutpat. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Tempor nec feugiat nisl pretium fusce id velit ut. Eget arcu dictum varius duis at consectetur lorem donec massa. A lacus vestibulum sed arcu non odio. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Mauris vitae ultricies leo integer malesuada nunc vel risus commodo. Rhoncus dolor purus non enim praesent elementum facilisis leo. Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Augue interdum velit euismod in pellentesque massa. Ullamcorper a lacus vestibulum sed. Penatibus et magnis dis parturient montes nascetur ridiculus. At risus viverra adipiscing at. Felis eget velit aliquet sagittis id. Venenatis tellus in metus vulputate eu. In hac habitasse platea dictumst vestibulum rhoncus. Luctus accumsan tortor posuere ac. Ullamcorper morbi tincidunt ornare massa. Tellus orci ac auctor augue mauris augue neque. Venenatis lectus magna fringilla urna porttitor. Pretium vulputate sapien nec sagittis aliquam malesuada. Aliquet nec ullamcorper sit amet. Consequat id porta nibh venenatis cras. Elementum nisi quis eleifend quam adipiscing. Netus et malesuada fames ac turpis egestas maecenas. Pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed viverra tellus in. Fusce ut placerat orci nulla pellentesque. Maecenas sed enim ut sem. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Proin fermentum leo vel orci porta non pulvinar neque. Eu non diam phasellus vestibulum lorem sed risus. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Arcu cursus vitae congue mauris. Vestibulum morbi blandit cursus risus at ultrices mi tempus imperdiet. Faucibus turpis in eu mi bibendum. Faucibus nisl tincidunt eget nullam non nisi est sit. Turpis tincidunt id aliquet risus feugiat. Nulla at volutpat diam ut venenatis tellus in metus. Ultrices neque ornare aenean euismod. Suspendisse faucibus interdum posuere lorem ipsum dolor. Nisl rhoncus mattis rhoncus urna. Vitae semper quis lectus nulla at volutpat diam. Eu lobortis elementum nibh tellus molestie nunc. Nulla facilisi morbi tempus iaculis urna. Tortor at risus viverra adipiscing at in tellus integer. Nibh tortor id aliquet lectus proin nibh nisl. Feugiat vivamus at augue eget arcu dictum. Lectus proin nibh nisl condimentum. Tristique senectus et netus et malesuada fames. Elementum nibh tellus molestie nunc non blandit massa enim. Risus ultricies tristique nulla aliquet enim. Vel pretium lectus quam id leo in vitae turpis."
24+
TextWrapping="WrapWholeWords" />
25+
</StackPanel>
26+
</ScrollViewer>
27+
</Page>

‎components/Behaviors/samples/Headers/QuickReturnScrollViewerSample.xaml.cs‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using CommunityToolkit.WinUI.Behaviors;
6+
7+
namespace BehaviorsExperiment.Samples;
8+
9+
/// <summary>
10+
/// An empty page that can be used on its own or navigated to within a Frame.
11+
/// </summary>
12+
[ToolkitSample(id: nameof(QuickReturnScrollViewerSample), $"{nameof(QuickReturnHeaderBehavior)} in a ScrollViewer", description: $"A sample for showing how to use the {nameof(QuickReturnHeaderBehavior)} in a ScrollViewer.")]
13+
public sealed partial class QuickReturnScrollViewerSample : Page
14+
{
15+
public QuickReturnScrollViewerSample()
16+
{
17+
this.InitializeComponent();
18+
}
19+
}

‎components/Behaviors/samples/Headers/StickyHeaderItemsControlSample.xaml‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<Page x:Class="BehaviorsExperiment.Samples.StickyHeaderItemsControlSample"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
5+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
6+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7+
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
8+
xmlns:local="using:BehaviorsExperiment.Samples"
9+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
10+
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
11+
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
12+
mc:Ignorable="d">
13+
14+
<!-- We need to set height here to force scrolling in the sample -->
15+
<ScrollViewer Height="300">
16+
<controls:HeaderedItemsControl>
17+
<controls:HeaderedItemsControl.Header>
18+
<Grid MinHeight="100"
19+
Background="#FF0078D7">
20+
<interactivity:Interaction.Behaviors>
21+
<behaviors:StickyHeaderBehavior />
22+
</interactivity:Interaction.Behaviors>
23+
<TextBlock HorizontalAlignment="Center"
24+
VerticalAlignment="Center"
25+
Text="Sample Text" />
26+
</Grid>
27+
</controls:HeaderedItemsControl.Header>
28+
<controls:HeaderedItemsControl.ItemTemplate>
29+
<DataTemplate x:DataType="x:String">
30+
<Grid MinHeight="25"
31+
Margin="10">
32+
<TextBlock VerticalAlignment="Center"
33+
Text="{Binding}" />
34+
</Grid>
35+
</DataTemplate>
36+
</controls:HeaderedItemsControl.ItemTemplate>
37+
<controls:HeaderedItemsControl.Items>
38+
<x:String>One</x:String>
39+
<x:String>Two</x:String>
40+
<x:String>Three</x:String>
41+
<x:String>Four</x:String>
42+
<x:String>Five</x:String>
43+
<x:String>Six</x:String>
44+
<x:String>Seven</x:String>
45+
<x:String>Eight</x:String>
46+
<x:String>Nine</x:String>
47+
<x:String>Ten</x:String>
48+
<x:String>Eleven</x:String>
49+
<x:String>Twelve</x:String>
50+
<x:String>Thirteen</x:String>
51+
<x:String>Fourteen</x:String>
52+
<x:String>Fifteen</x:String>
53+
<x:String>Sixteen</x:String>
54+
<x:String>Seventeen</x:String>
55+
<x:String>Eighteen</x:String>
56+
<x:String>Nineteen</x:String>
57+
<x:String>Twenty</x:String>
58+
</controls:HeaderedItemsControl.Items>
59+
</controls:HeaderedItemsControl>
60+
</ScrollViewer>
61+
</Page>

‎components/Behaviors/samples/Headers/StickyHeaderItemsControlSample.xaml.cs‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using CommunityToolkit.WinUI.Behaviors;
6+
using CommunityToolkit.WinUI.Controls;
7+
8+
namespace BehaviorsExperiment.Samples;
9+
10+
/// <summary>
11+
/// An empty page that can be used on its own or navigated to within a Frame.
12+
/// </summary>
13+
[ToolkitSample(id: nameof(StickyHeaderItemsControlSample), $"{nameof(StickyHeaderBehavior)} with {nameof(HeaderedItemsControl)}", description: $"A sample for showing how to use the {nameof(StickyHeaderBehavior)} with a {nameof(HeaderedItemsControl)}.")]
14+
public sealed partial class StickyHeaderItemsControlSample : Page
15+
{
16+
public StickyHeaderItemsControlSample()
17+
{
18+
this.InitializeComponent();
19+
}
20+
}

‎components/Behaviors/src/Headers/HeaderBehaviorBase.cs‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ namespace CommunityToolkit.WinUI.Behaviors.Internal;
1919
/// </summary>
2020
public abstract class HeaderBehaviorBase : BehaviorBase<FrameworkElement>
2121
{
22+
// From Doc: https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.canvas.zindex
23+
private const int CanvasZIndexMax = 1_000_000;
24+
2225
protected ScrollViewer? _scrollViewer;
2326
protected CompositionPropertySet? _scrollProperties;
2427
protected CompositionPropertySet? _animationProperties;
@@ -59,7 +62,8 @@ protected virtual bool AssignAnimation()
5962
{
6063
StopAnimation();
6164

62-
if (AssociatedObject == null)
65+
// Double-check that we have an element associated with us (we should) and that it has size
66+
if (AssociatedObject == null || AssociatedObject.RenderSize.Height == 0)
6367
{
6468
return false;
6569
}
@@ -82,19 +86,19 @@ protected virtual bool AssignAnimation()
8286
// This appears to be important to force the items within the ScrollViewer of an ItemsControl behind our header element.
8387
Canvas.SetZIndex(itemsControl.ItemsPanelRoot, -1);
8488
}
85-
86-
if (_scrollProperties == null)
89+
else
8790
{
88-
_scrollProperties = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_scrollViewer);
91+
// If we're not part of a collection panel, then we're probably just in the ScrollViewer,
92+
// And we should ensure our 'header' element is on top of any other content within the ScrollViewer.
93+
Canvas.SetZIndex(AssociatedObject, CanvasZIndexMax);
8994
}
9095

9196
if (_scrollProperties == null)
9297
{
93-
return false;
98+
_scrollProperties = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(_scrollViewer);
9499
}
95100

96-
// Implicit operation: Double-check that we have an element associated with us (we should) and that it has size
97-
if (AssociatedObject == null || AssociatedObject.RenderSize.Height == 0)
101+
if (_scrollProperties == null)
98102
{
99103
return false;
100104
}

0 commit comments

Comments
 (0)