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.

Sign up for GitHub

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

Jump to bottom

ListViewBase Header Behaviors Port #136

Merged
merged 10 commits into from
Jul 17, 2023
Merged

ListViewBase Header Behaviors Port #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
cc30e37
Add initial port of Header Behaviors for ListViewBase components
michael-hawker Jul 11, 2023
3d15aaa
Consolidate StickyHeaderBehavior and QuickReturnHeaderBehavior with n…
michael-hawker Jul 12, 2023
c248fe9
Move FadeHeaderBehavior to new base class
michael-hawker Jul 12, 2023
91a60e5
Make HeaderElement a FrameworkElement as we pretty much needed it lik…
michael-hawker Jul 12, 2023
7675469
Initial switch over to inversion of paradigm for Header behaviors to …
michael-hawker Jul 12, 2023
9d7e873
Clean-up base check for AssociatedObject and add two new samples for …
michael-hawker Jul 13, 2023
6033436
Rev Behaviors Package Version
michael-hawker Jul 13, 2023
1cff673
Merge branch 'main' into llama/header_behaviors
niels9001 Jul 14, 2023
99b83b2
Minor design tweaks header behaviors samples (#142)
niels9001 Jul 14, 2023
68e138b
Update components/Behaviors/samples/Headers/HeaderBehaviors.md
niels9001 Jul 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/Behaviors/samples/AutoSelectBehaviorSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<Page x:Class="BehaviorsExperiment.Samples.AutoSelectBehaviorSample"
<Page x:Class="BehaviorsExperiment.Samples.AutoSelectBehaviorSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity">

<StackPanel Padding="8"
<StackPanel MaxWidth="480"
Spacing="8">
<TextBox Text="My content is not selected when loaded" />
<TextBox Text="My content is selected when loaded">
Expand Down
5 changes: 5 additions & 0 deletions components/Behaviors/samples/Behaviors.Samples.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@

<!-- Sets this up as a toolkit component's sample project -->
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />

<ItemGroup>
<ProjectReference Include="$(MSBuildThisFileDirectory)..\..\HeaderedControls\src\CommunityToolkit.WinUI.Controls.HeaderedControls.csproj" />
</ItemGroup>

<ItemGroup>
<None Remove="Assets\ToolkitIcon.png" />
</ItemGroup>
Expand Down
2 changes: 1 addition & 1 deletion components/Behaviors/samples/Behaviors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ keywords: Behaviors
dev_langs:
- csharp
category: Xaml
subcategory: None
subcategory: Behaviors
discussion-id: 0
issue-id: 0
icon: Assets/Behaviors.png
Expand Down
6 changes: 3 additions & 3 deletions components/Behaviors/samples/FocusBehaviorButtonSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<Page x:Class="BehaviorsExperiment.Samples.FocusBehaviorButtonSample"
<Page x:Class="BehaviorsExperiment.Samples.FocusBehaviorButtonSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
Expand All @@ -14,11 +14,11 @@
<StackPanel Spacing="12">
<Button x:Name="ButtonOne"
x:Load="{x:Bind ControlLoaded, Mode=OneWay}"
Content="Button One"
Content="Button 1"
IsEnabled="{x:Bind IsButtonEnabled, Mode=OneWay}" />

<Button x:Name="ButtonTwo"
Content="Button Two" />
Content="Button 2" />
</StackPanel>

</Page>
56 changes: 56 additions & 0 deletions components/Behaviors/samples/Headers/FadeHeaderBehaviorSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<Page x:Class="BehaviorsExperiment.Samples.FadeHeaderBehaviorSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<!-- We need to set height here to force scrolling in the sample -->
<ListView Height="300"
VerticalAlignment="Top">
<ListView.Header>
<Grid MinHeight="100"
Background="{ThemeResource AccentFillColorDefaultBrush}">
<interactivity:Interaction.Behaviors>
<behaviors:FadeHeaderBehavior />
</interactivity:Interaction.Behaviors>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
Text="Header" />
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<Grid MinHeight="25">
<TextBlock VerticalAlignment="Center"
Text="{Binding}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Items>
<x:String>One</x:String>
<x:String>Two</x:String>
<x:String>Three</x:String>
<x:String>Four</x:String>
<x:String>Five</x:String>
<x:String>Six</x:String>
<x:String>Seven</x:String>
<x:String>Eight</x:String>
<x:String>Nine</x:String>
<x:String>Ten</x:String>
<x:String>Eleven</x:String>
<x:String>Twelve</x:String>
<x:String>Thirteen</x:String>
<x:String>Fourteen</x:String>
<x:String>Fifteen</x:String>
<x:String>Sixteen</x:String>
<x:String>Seventeen</x:String>
<x:String>Eighteen</x:String>
<x:String>Nineteen</x:String>
<x:String>Twenty</x:String>
</ListView.Items>
</ListView>
</Page>
19 changes: 19 additions & 0 deletions components/Behaviors/samples/Headers/FadeHeaderBehaviorSample.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI.Behaviors;

namespace BehaviorsExperiment.Samples;

/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
[ToolkitSample(id: nameof(FadeHeaderBehaviorSample), nameof(FadeHeaderBehavior), description: $"A sample for showing how to use the {nameof(FadeHeaderBehavior)}.")]
public sealed partial class FadeHeaderBehaviorSample : Page
{
public FadeHeaderBehaviorSample()
{
this.InitializeComponent();
}
}
52 changes: 52 additions & 0 deletions components/Behaviors/samples/Headers/HeaderBehaviors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
title: Header Behaviors
author: michael-hawker
description: Behaviors for modifying an element's movement/response when scrolling within a ScrollViewer.
keywords: Behaviors
dev_langs:
- csharp
category: Xaml
subcategory: Behaviors
discussion-id: 0
issue-id: 0
icon: Assets/Behaviors.png
---

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`.

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

> [!WARNING]
> Due to the use of the composition APIs, these behaviors aren't supported on Uno Platform.

To use the behavior, place it on the _element in the header to be manipulated_.

> [!NOTE]
> This is different in 8.x than it was in 7.x where the behavior was placed on the parent containing element (e.g. `ListView`).
> This change was made to enable more scenarios for these components.

## FadeHeaderBehavior

The FadeHeaderBehavior causes the element in the scrolling collection to fade in and out as the user scrolls at the top of the collection.

> [!Sample FadeHeaderBehaviorSample]

## QuickReturnBehavior

The QuickReturnHeaderBehavior causes the element in the scrolling collection to return back into view as soon as the user scrolls up even if they are not near the top of the collection.

> [!Sample QuickReturnHeaderBehaviorSample]

It can also be used to have content quickly re-appear in any `ScrollViewer`:

> [!Sample QuickReturnScrollViewerSample]

## StickyHeaderBehavior

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

> [!Sample StickyHeaderBehaviorSample]

Or similarly, it can be used with a `HeaderedItemsControl` to maintain context at the top:

> [!Sample StickyHeaderItemsControlSample]
88 changes: 88 additions & 0 deletions components/Behaviors/samples/Headers/QuickReturnHeaderBehaviorSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<Page x:Class="BehaviorsExperiment.Samples.QuickReturnHeaderBehaviorSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<!-- We need to set height here to force scrolling in the sample -->
<GridView Height="300"
VerticalAlignment="Top">
<GridView.Header>
<Grid MinHeight="100"
Background="{ThemeResource AccentFillColorDefaultBrush}">
<interactivity:Interaction.Behaviors>
<behaviors:QuickReturnHeaderBehavior />
</interactivity:Interaction.Behaviors>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
Text="Header" />
</Grid>
</GridView.Header>
<GridView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<Border Width="200"
Height="200">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.Items>
<x:String>One</x:String>
<x:String>Two</x:String>
<x:String>Three</x:String>
<x:String>Four</x:String>
<x:String>Five</x:String>
<x:String>Six</x:String>
<x:String>Seven</x:String>
<x:String>Eight</x:String>
<x:String>Nine</x:String>
<x:String>Ten</x:String>
<x:String>Eleven</x:String>
<x:String>Twelve</x:String>
<x:String>Thirteen</x:String>
<x:String>Fourteen</x:String>
<x:String>Fifteen</x:String>
<x:String>Sixteen</x:String>
<x:String>Seventeen</x:String>
<x:String>Eighteen</x:String>
<x:String>Nineteen</x:String>
<x:String>Twenty</x:String>
<x:String>Twenty-One</x:String>
<x:String>Twenty-Two</x:String>
<x:String>Twenty-Three</x:String>
<x:String>Twenty-Four</x:String>
<x:String>Twenty-Five</x:String>
<x:String>Twenty-Six</x:String>
<x:String>Twenty-Seven</x:String>
<x:String>Twenty-Eight</x:String>
<x:String>Twenty-Nine</x:String>
<x:String>Thirty</x:String>
<x:String>Thirty-One</x:String>
<x:String>Thirty-Two</x:String>
<x:String>Thirty-Three</x:String>
<x:String>Thirty-Four</x:String>
<x:String>Thirty-Five</x:String>
<x:String>Thirty-Six</x:String>
<x:String>Thirty-Seven</x:String>
<x:String>Thirty-Eight</x:String>
<x:String>Thirty-Nine</x:String>
<x:String>Forty</x:String>
<x:String>Forty-One</x:String>
<x:String>Forty-Two</x:String>
<x:String>Forty-Three</x:String>
<x:String>Forty-Four</x:String>
<x:String>Forty-Five</x:String>
<x:String>Forty-Six</x:String>
<x:String>Forty-Seven</x:String>
<x:String>Forty-Eight</x:String>
<x:String>Forty-Nine</x:String>
<x:String>Fifty</x:String>
</GridView.Items>
</GridView>
</Page>
19 changes: 19 additions & 0 deletions components/Behaviors/samples/Headers/QuickReturnHeaderBehaviorSample.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI.Behaviors;

namespace BehaviorsExperiment.Samples;

/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
[ToolkitSample(id: nameof(QuickReturnHeaderBehaviorSample), nameof(QuickReturnHeaderBehavior), description: $"A sample for showing how to use the {nameof(QuickReturnHeaderBehavior)}.")]
public sealed partial class QuickReturnHeaderBehaviorSample : Page
{
public QuickReturnHeaderBehaviorSample()
{
this.InitializeComponent();
}
}
27 changes: 27 additions & 0 deletions components/Behaviors/samples/Headers/QuickReturnScrollViewerSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<Page x:Class="BehaviorsExperiment.Samples.QuickReturnScrollViewerSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<!-- We need to set height here to force scrolling in the sample -->
<ScrollViewer Height="300"
VerticalAlignment="Top">
<StackPanel MaxWidth="480">
<Grid Height="100"
Padding="12"
Background="{ThemeResource AcrylicBackgroundFillColorBaseBrush}">
<Image Source="ms-appx:///Assets/ToolkitIcon.png" />
<interactivity:Interaction.Behaviors>
<behaviors:QuickReturnHeaderBehavior />
</interactivity:Interaction.Behaviors>
</Grid>
<TextBlock HorizontalAlignment="Center"
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."
TextWrapping="WrapWholeWords" />
</StackPanel>
</ScrollViewer>
</Page>
19 changes: 19 additions & 0 deletions components/Behaviors/samples/Headers/QuickReturnScrollViewerSample.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI.Behaviors;

namespace BehaviorsExperiment.Samples;

/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
[ToolkitSample(id: nameof(QuickReturnScrollViewerSample), $"{nameof(QuickReturnHeaderBehavior)} in a ScrollViewer", description: $"A sample for showing how to use the {nameof(QuickReturnHeaderBehavior)} in a ScrollViewer.")]
public sealed partial class QuickReturnScrollViewerSample : Page
{
public QuickReturnScrollViewerSample()
{
this.InitializeComponent();
}
}
Loading
Loading