Skip to content

Commit 22cde03

Browse files
michael-hawkermichael-hawker
committed
Add initial port of Header Behaviors for ListViewBase components
Add doc and Samples showing for ListView, GridView, and HeaderedTreeView Tested on WASDK (uses composition, so won't work on Uno) Having issues with UWP head?
1 parent 917513c commit 22cde03

13 files changed

+1073
-1
lines changed

‎components/Behaviors/samples/Behaviors.Samples.csproj‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@
55

66
<!-- Sets this up as a toolkit component's sample project -->
77
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
8+
9+
<ItemGroup>
10+
<ProjectReference Include="$(MSBuildThisFileDirectory)..\..\HeaderedControls\src\CommunityToolkit.WinUI.Controls.HeaderedControls.csproj" />
11+
</ItemGroup>
12+
813
<ItemGroup>
914
<None Remove="Assets\ToolkitIcon.png" />
1015
</ItemGroup>

‎components/Behaviors/samples/Behaviors.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ keywords: Behaviors
66
dev_langs:
77
- csharp
88
category: Xaml
9-
subcategory: None
9+
subcategory: Behaviors
1010
discussion-id: 0
1111
issue-id: 0
1212
icon: Assets/Behaviors.png

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<Page x:Class="BehaviorsExperiment.Samples.FadeHeaderBehaviorSample"
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+
<ListView Height="300">
13+
<interactivity:Interaction.Behaviors>
14+
<behaviors:FadeHeaderBehavior />
15+
</interactivity:Interaction.Behaviors>
16+
<ListView.Header>
17+
<Grid MinHeight="100"
18+
Background="#FF0078D7">
19+
<TextBlock HorizontalAlignment="Center"
20+
VerticalAlignment="Center"
21+
Text="Sample Text" />
22+
</Grid>
23+
</ListView.Header>
24+
<ListView.ItemTemplate>
25+
<DataTemplate x:DataType="x:String">
26+
<Grid MinHeight="25"
27+
Margin="10">
28+
<TextBlock VerticalAlignment="Center"
29+
Text="{Binding}" />
30+
</Grid>
31+
</DataTemplate>
32+
</ListView.ItemTemplate>
33+
<ListView.Items>
34+
<x:String>One</x:String>
35+
<x:String>Two</x:String>
36+
<x:String>Three</x:String>
37+
<x:String>Four</x:String>
38+
<x:String>Five</x:String>
39+
<x:String>Six</x:String>
40+
<x:String>Seven</x:String>
41+
<x:String>Eight</x:String>
42+
<x:String>Nine</x:String>
43+
<x:String>Ten</x:String>
44+
<x:String>Eleven</x:String>
45+
<x:String>Twelve</x:String>
46+
<x:String>Thirteen</x:String>
47+
<x:String>Fourteen</x:String>
48+
<x:String>Fifteen</x:String>
49+
<x:String>Sixteen</x:String>
50+
<x:String>Seventeen</x:String>
51+
<x:String>Eighteen</x:String>
52+
<x:String>Nineteen</x:String>
53+
<x:String>Twenty</x:String>
54+
</ListView.Items>
55+
</ListView>
56+
</Page>

‎components/Behaviors/samples/Headers/FadeHeaderBehaviorSample.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(FadeHeaderBehaviorSample), nameof(FadeHeaderBehavior), description: $"A sample for showing how to use the {nameof(FadeHeaderBehavior)}.")]
13+
public sealed partial class FadeHeaderBehaviorSample : Page
14+
{
15+
public FadeHeaderBehaviorSample()
16+
{
17+
this.InitializeComponent();
18+
}
19+
}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: Header Behaviors
3+
author: michael-hawker
4+
description: Behaviors modifying the headers of ListView based components when scrolling.
5+
keywords: Behaviors
6+
dev_langs:
7+
- csharp
8+
category: Xaml
9+
subcategory: Behaviors
10+
discussion-id: 0
11+
issue-id: 0
12+
icon: Assets/Behaviors.png
13+
---
14+
15+
The `FadeHeaderBehavior`, `QuickReturnHeaderBehavior`, and `StickyHeaderBehavior` apply behaviors to `ListView`, `GridView`, and `HeaderedTreeView` Headers.
16+
17+
## FadeHeaderBehavior
18+
19+
The FadeHeaderBehavior causes the Header of the scrolling collection to fade in and out as the user scrolls at the top of the collection.
20+
21+
> [!Sample FadeHeaderBehaviorSample]
22+
23+
## QuickReturnBehavior
24+
25+
The QuickReturnHeaderBehavior causes the Header of 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.
26+
27+
> [!Sample QuickReturnHeaderBehaviorSample]
28+
29+
## StickyHeaderBehavior
30+
31+
The StickyHeaderBehavior causes the Header of the scrolling collection to stay in view as the user scrolls up and down in the collection.
32+
33+
> [!Sample StickyHeaderBehaviorSample]

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<Page x:Class="BehaviorsExperiment.Samples.QuickReturnHeaderBehaviorSample"
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+
<GridView Height="300">
13+
<interactivity:Interaction.Behaviors>
14+
<behaviors:QuickReturnHeaderBehavior />
15+
</interactivity:Interaction.Behaviors>
16+
<GridView.Header>
17+
<Grid MinHeight="100"
18+
Background="#FF0078D7">
19+
<TextBlock HorizontalAlignment="Center"
20+
VerticalAlignment="Center"
21+
Text="Sample Text" />
22+
</Grid>
23+
</GridView.Header>
24+
<GridView.ItemTemplate>
25+
<DataTemplate x:DataType="x:String">
26+
<Border Width="200"
27+
Height="200"
28+
Margin="10">
29+
<TextBlock HorizontalAlignment="Center"
30+
VerticalAlignment="Center"
31+
Text="{Binding}" />
32+
</Border>
33+
</DataTemplate>
34+
</GridView.ItemTemplate>
35+
<GridView.Items>
36+
<x:String>One</x:String>
37+
<x:String>Two</x:String>
38+
<x:String>Three</x:String>
39+
<x:String>Four</x:String>
40+
<x:String>Five</x:String>
41+
<x:String>Six</x:String>
42+
<x:String>Seven</x:String>
43+
<x:String>Eight</x:String>
44+
<x:String>Nine</x:String>
45+
<x:String>Ten</x:String>
46+
<x:String>Eleven</x:String>
47+
<x:String>Twelve</x:String>
48+
<x:String>Thirteen</x:String>
49+
<x:String>Fourteen</x:String>
50+
<x:String>Fifteen</x:String>
51+
<x:String>Sixteen</x:String>
52+
<x:String>Seventeen</x:String>
53+
<x:String>Eighteen</x:String>
54+
<x:String>Nineteen</x:String>
55+
<x:String>Twenty</x:String>
56+
<x:String>Twenty-One</x:String>
57+
<x:String>Twenty-Two</x:String>
58+
<x:String>Twenty-Three</x:String>
59+
<x:String>Twenty-Four</x:String>
60+
<x:String>Twenty-Five</x:String>
61+
<x:String>Twenty-Six</x:String>
62+
<x:String>Twenty-Seven</x:String>
63+
<x:String>Twenty-Eight</x:String>
64+
<x:String>Twenty-Nine</x:String>
65+
<x:String>Thirty</x:String>
66+
<x:String>Thirty-One</x:String>
67+
<x:String>Thirty-Two</x:String>
68+
<x:String>Thirty-Three</x:String>
69+
<x:String>Thirty-Four</x:String>
70+
<x:String>Thirty-Five</x:String>
71+
<x:String>Thirty-Six</x:String>
72+
<x:String>Thirty-Seven</x:String>
73+
<x:String>Thirty-Eight</x:String>
74+
<x:String>Thirty-Nine</x:String>
75+
<x:String>Forty</x:String>
76+
<x:String>Forty-One</x:String>
77+
<x:String>Forty-Two</x:String>
78+
<x:String>Forty-Three</x:String>
79+
<x:String>Forty-Four</x:String>
80+
<x:String>Forty-Five</x:String>
81+
<x:String>Forty-Six</x:String>
82+
<x:String>Forty-Seven</x:String>
83+
<x:String>Forty-Eight</x:String>
84+
<x:String>Forty-Nine</x:String>
85+
<x:String>Fifty</x:String>
86+
</GridView.Items>
87+
</GridView>
88+
</Page>

‎components/Behaviors/samples/Headers/QuickReturnHeaderBehaviorSample.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(QuickReturnHeaderBehaviorSample), nameof(QuickReturnHeaderBehavior), description: $"A sample for showing how to use the {nameof(QuickReturnHeaderBehavior)}.")]
13+
public sealed partial class QuickReturnHeaderBehaviorSample : Page
14+
{
15+
public QuickReturnHeaderBehaviorSample()
16+
{
17+
this.InitializeComponent();
18+
}
19+
}

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<Page x:Class="BehaviorsExperiment.Samples.StickyHeaderBehaviorSample"
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+
<controls:HeaderedTreeView Height="300"
16+
ItemsSource="{x:Bind Items, Mode=OneWay}">
17+
<interactivity:Interaction.Behaviors>
18+
<behaviors:StickyHeaderBehavior />
19+
</interactivity:Interaction.Behaviors>
20+
<controls:HeaderedTreeView.Header>
21+
<Grid MinHeight="100"
22+
Background="#FF0078D7">
23+
<TextBlock HorizontalAlignment="Center"
24+
VerticalAlignment="Center"
25+
Text="Sample Text" />
26+
</Grid>
27+
</controls:HeaderedTreeView.Header>
28+
<controls:HeaderedTreeView.ItemTemplate>
29+
<DataTemplate x:DataType="local:ExplorerItem">
30+
<muxc:TreeViewItem Content="{x:Bind Name}"
31+
IsExpanded="True"
32+
ItemsSource="{x:Bind Children}" />
33+
</DataTemplate>
34+
</controls:HeaderedTreeView.ItemTemplate>
35+
</controls:HeaderedTreeView>
36+
</Page>

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

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
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(StickyHeaderBehaviorSample), nameof(StickyHeaderBehavior), description: $"A sample for showing how to use the {nameof(StickyHeaderBehavior)}.")]
13+
public sealed partial class StickyHeaderBehaviorSample : Page
14+
{
15+
public ObservableCollection<ExplorerItem> Items { get; }
16+
17+
public StickyHeaderBehaviorSample()
18+
{
19+
this.InitializeComponent();
20+
Items = GetData();
21+
}
22+
23+
24+
private ObservableCollection<ExplorerItem> GetData()
25+
{
26+
var list = new ObservableCollection<ExplorerItem>();
27+
ExplorerItem folder1 = new ExplorerItem()
28+
{
29+
Name = "Work Documents",
30+
Children =
31+
{
32+
new ExplorerItem()
33+
{
34+
Name = "Functional Specifications",
35+
Children =
36+
{
37+
new ExplorerItem()
38+
{
39+
Name = "TreeView spec",
40+
}
41+
}
42+
},
43+
new ExplorerItem()
44+
{
45+
Name = "Feature Schedule",
46+
},
47+
new ExplorerItem()
48+
{
49+
Name = "Overall Project Plan",
50+
},
51+
new ExplorerItem()
52+
{
53+
Name = "Feature Resources Allocation",
54+
}
55+
}
56+
};
57+
ExplorerItem folder2 = new ExplorerItem()
58+
{
59+
Name = "Personal Folder",
60+
Children =
61+
{
62+
new ExplorerItem()
63+
{
64+
Name = "Home Remodel Folder",
65+
Children =
66+
{
67+
new ExplorerItem()
68+
{
69+
Name = "Contractor Contact Info",
70+
},
71+
new ExplorerItem()
72+
{
73+
Name = "Paint Color Scheme",
74+
},
75+
new ExplorerItem()
76+
{
77+
Name = "Flooring Woodgrain type",
78+
},
79+
new ExplorerItem()
80+
{
81+
Name = "Kitchen Cabinet Style",
82+
}
83+
}
84+
}
85+
}
86+
};
87+
88+
list.Add(folder1);
89+
list.Add(folder2);
90+
91+
for (int i = 0; i < 40; i++)
92+
{
93+
list.Add(new() { Name = $"Folder {i + 1}" });
94+
}
95+
96+
return list;
97+
}
98+
}
99+
100+
public class ExplorerItem
101+
{
102+
public string? Name { get; set; }
103+
private ObservableCollection<ExplorerItem>? _children;
104+
public ObservableCollection<ExplorerItem> Children
105+
{
106+
get
107+
{
108+
if (_children == null)
109+
{
110+
_children = new ObservableCollection<ExplorerItem>();
111+
}
112+
return _children;
113+
}
114+
set
115+
{
116+
_children = value;
117+
}
118+
}
119+
}

0 commit comments

Comments
 (0)