ScrollHeader Control In UWP

The ScrollHeader Control provides a header for ListViews or GridViews that adds the ability to keep its content visible or fade it out while scrolling down. It also has a quick return mode where the header hides when the ListView is scrolled down and reappears immediately as soon as the ListView is scrolled up again.

ScrollHeader Control is from UWP Community Toolkit. The UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps for Windows 10.

Reading this article, you can learn how to use ScrollHeader Control in Universal Windows Apps development with XAML and Visual C#.

The following important tools are required for developing UWP,

Windows 10 (Recommended)
Microsoft Visual Studio 2017
Windows Anniversary Update (10.0.14393.0)

Step 1

Open Visual Studio 2017 and go to Start -> New Project -> Windows Universal (under Visual C#) -> Blank App(Universal Windows). Give a suitable name for your app (UWPScrollHeader) and click OK.

After choosing the target and minimum platform versions that your Windows Universal Application will support (Windows Anniversary Update (10.0.14393.0)), the project creates App.xaml and MainPage.xaml.

Step 2

First, update the reference of Microsoft.NETCore.UniversalWindowsPlatform with the latest version of it using Manage NuGet Packages

Step 3

Add the following controls in design window for ScrollHeader control view. Add a TextBlock Control and change the Name and Text property.

Add a ListView control and inside the Listview.Header tag, add the ScrollHeader control and set Mode as Sticky. Then, add the text content.

<ListView Name="LVSticky" Margin="10,180,1209,96">
<ListView.Header>
<Controls:ScrollHeader Mode="Sticky" TargetListViewBase="{x:Bind LVSticky}">
<Grid Background="Blue">
<TextBlock TextWrapping="Wrap" Text="Scroll Header in Sticky Mode Scroll Header in Sticky Mode " /> </Grid>
</Controls:ScrollHeader>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<Image x:Name="ImgLst" Width="100" Height="100" Margin="0,10,20,0" Source="{Binding IName}" /> </DataTemplate>
</ListView.ItemTemplate>
</ListView>

Similarly, add two more ListViews with ScrollHeader for QuickReturn and Fade.

<ListView Name="LVQuickReturn" Margin="228,180,906,96">
<ListView.Header>
<Controls:ScrollHeader Mode="QuickReturn" TargetListViewBase="{x:Bind LVQuickReturn}">
<Grid Background="Blue">
<TextBlock TextWrapping="Wrap" Text="Scroll Header in QuickReturn Mode " /> </Grid>
</Controls:ScrollHeader>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<Image x:Name="ImgLst" Width="100" Height="100" Margin="0,0,24,0" Source="{Binding IName}" /> </DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Name="LVFade" Margin="473,180,690,96">
<ListView.Header>
<Controls:ScrollHeader Mode="Fade" TargetListViewBase="{x:Bind LVFade}">
<Grid Background="Blue">
<TextBlock TextWrapping="Wrap" Text="Scroll Header in Fade Mode Scroll Header in Fade Mode Scroll Header in Fade Mode Scroll Header in Fade Mode" /> </Grid>
</Controls:ScrollHeader>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<Image x:Name="ImgLst" Width="100" Height="100" Margin="0,0,24,0" Source="{Binding IName}" /> </DataTemplate>
</ListView.ItemTemplate>
</ListView>

Step 4

Add the following source code to Mainpage.Xaml.cs for binding the image in ListViews.

public class LVItem {
public string IName {
get;
set;
}
}
public MainPage() {
this.InitializeComponent();
ObservableCollection < LVItem > items = new ObservableCollection < LVItem > ();
items.Add(new LVItem() {
IName = "ms-appx:///Assets//01.jpg"
});
items.Add(new LVItem() {
IName = "ms-appx:///Assets//02.jpg"
});
items.Add(new LVItem() {
IName = "ms-appx:///Assets//03.jpg"
});
items.Add(new LVItem() {
IName = "ms-appx:///Assets//04.jpg"
});
items.Add(new LVItem() {
IName = "ms-appx:///Assets//05.jpg"
});
items.Add(new LVItem() {
IName = "ms-appx:///Assets//06.jpg"
});
LVSticky.ItemsSource = items;
LVQuickReturn.ItemsSource = items;
LVFade.ItemsSource = items;
}

Note

Automatically, the following code will be generated in XAML code view while we are done in the design view.

<Page x:Class="UWPScrollHeader.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPScrollHeader" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls" mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="177,45,0,0" TextWrapping="Wrap" Text="Scroll Header Control in UWP" VerticalAlignment="Top" FontSize="22" FontWeight="Bold" />
<ListView Name="LVSticky" Margin="10,180,1209,96">
<ListView.Header>
<Controls:ScrollHeader Mode="Sticky" TargetListViewBase="{x:Bind LVSticky}">
<Grid Background="Blue">
<TextBlock TextWrapping="Wrap" Text="Scroll Header in Sticky Mode Scroll Header in Sticky Mode " /> </Grid>
</Controls:ScrollHeader>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<Image x:Name="ImgLst" Width="100" Height="100" Margin="0,10,20,0" Source="{Binding IName}" /> </DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Name="LVQuickReturn" Margin="228,180,906,96">
<ListView.Header>
<Controls:ScrollHeader Mode="QuickReturn" TargetListViewBase="{x:Bind LVQuickReturn}">
<Grid Background="Blue">
<TextBlock TextWrapping="Wrap" Text="Scroll Header in QuickReturn Mode " /> </Grid>
</Controls:ScrollHeader>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<Image x:Name="ImgLst" Width="100" Height="100" Margin="0,0,24,0" Source="{Binding IName}" /> </DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Name="LVFade" Margin="473,180,690,96">
<ListView.Header>
<Controls:ScrollHeader Mode="Fade" TargetListViewBase="{x:Bind LVFade}">
<Grid Background="Blue">
<TextBlock TextWrapping="Wrap" Text="Scroll Header in Fade Mode Scroll Header in Fade Mode Scroll Header in Fade Mode Scroll Header in Fade Mode" /> </Grid>
</Controls:ScrollHeader>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<Image x:Name="ImgLst" Width="100" Height="100" Margin="0,0,24,0" Source="{Binding IName}" /> </DataTemplate>
</ListView.ItemTemplate>
</ListView>
<TextBlock x:Name="tblsticky" HorizontalAlignment="Left" Margin="42,135,0,0" TextWrapping="Wrap" Text="Sticky Mode" VerticalAlignment="Top" FontWeight="Bold" />
<TextBlock x:Name="tblQuickReturn" HorizontalAlignment="Left" Margin="259,135,0,0" TextWrapping="Wrap" Text="Quick Return Mode" VerticalAlignment="Top" FontWeight="Bold" />
<TextBlock x:Name="tblFade" HorizontalAlignment="Left" Margin="516,139,0,0" TextWrapping="Wrap" Text="Fade Mode" VerticalAlignment="Top" RenderTransformOrigin="1.077,-0.5" FontWeight="Bold" /> </Grid>
</Page>

Step 5

Deploy your app on Local Machine. The output of the UWPScrollHeader is shown below.

After scrolling ListViews, ScrollHeader Mode as Sticky, QuickReturn, and Fade.

Summary

Now, you have successfully tested ScrollHeader control in XAML and UWP environment using Visual Studio 2017.