Contribute
UWP

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,

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.

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

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

  1. <ListView Name="LVQuickReturn" Margin="228,180,906,96">  
  2.     <ListView.Header>  
  3.         <Controls:ScrollHeader Mode="QuickReturn" TargetListViewBase="{x:Bind LVQuickReturn}">  
  4.             <Grid Background="Blue">  
  5.                 <TextBlock TextWrapping="Wrap" Text="Scroll Header in QuickReturn Mode " /> </Grid>  
  6.         </Controls:ScrollHeader>  
  7.     </ListView.Header>  
  8.     <ListView.ItemTemplate>  
  9.         <DataTemplate>  
  10.             <Image x:Name="ImgLst" Width="100" Height="100" Margin="0,0,24,0" Source="{Binding IName}" /> </DataTemplate>  
  11.     </ListView.ItemTemplate>  
  12. </ListView>  
  13. <ListView Name="LVFade" Margin="473,180,690,96">  
  14.     <ListView.Header>  
  15.         <Controls:ScrollHeader Mode="Fade" TargetListViewBase="{x:Bind LVFade}">  
  16.             <Grid Background="Blue">  
  17.                 <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>  
  18.         </Controls:ScrollHeader>  
  19.     </ListView.Header>  
  20.     <ListView.ItemTemplate>  
  21.         <DataTemplate>  
  22.             <Image x:Name="ImgLst" Width="100" Height="100" Margin="0,0,24,0" Source="{Binding IName}" /> </DataTemplate>  
  23.     </ListView.ItemTemplate>  
  24. </ListView>  

Step 4

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

  1. public class LVItem {  
  2.     public string IName {  
  3.         get;  
  4.         set;  
  5.     }  
  6. }  
  7. public MainPage() {  
  8.     this.InitializeComponent();  
  9.     ObservableCollection < LVItem > items = new ObservableCollection < LVItem > ();  
  10.     items.Add(new LVItem() {  
  11.         IName = "ms-appx:///Assets//01.jpg"  
  12.     });  
  13.     items.Add(new LVItem() {  
  14.         IName = "ms-appx:///Assets//02.jpg"  
  15.     });  
  16.     items.Add(new LVItem() {  
  17.         IName = "ms-appx:///Assets//03.jpg"  
  18.     });  
  19.     items.Add(new LVItem() {  
  20.         IName = "ms-appx:///Assets//04.jpg"  
  21.     });  
  22.     items.Add(new LVItem() {  
  23.         IName = "ms-appx:///Assets//05.jpg"  
  24.     });  
  25.     items.Add(new LVItem() {  
  26.         IName = "ms-appx:///Assets//06.jpg"  
  27.     });  
  28.     LVSticky.ItemsSource = items;  
  29.     LVQuickReturn.ItemsSource = items;  
  30.     LVFade.ItemsSource = items;  
  31. }  

Note

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

  1. <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">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  3.         <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" />  
  4.         <ListView Name="LVSticky" Margin="10,180,1209,96">  
  5.             <ListView.Header>  
  6.                 <Controls:ScrollHeader Mode="Sticky" TargetListViewBase="{x:Bind LVSticky}">  
  7.                     <Grid Background="Blue">  
  8.                         <TextBlock TextWrapping="Wrap" Text="Scroll Header in Sticky Mode Scroll Header in Sticky Mode " /> </Grid>  
  9.                 </Controls:ScrollHeader>  
  10.             </ListView.Header>  
  11.             <ListView.ItemTemplate>  
  12.                 <DataTemplate>  
  13.                     <Image x:Name="ImgLst" Width="100" Height="100" Margin="0,10,20,0" Source="{Binding IName}" /> </DataTemplate>  
  14.             </ListView.ItemTemplate>  
  15.         </ListView>  
  16.         <ListView Name="LVQuickReturn" Margin="228,180,906,96">  
  17.             <ListView.Header>  
  18.                 <Controls:ScrollHeader Mode="QuickReturn" TargetListViewBase="{x:Bind LVQuickReturn}">  
  19.                     <Grid Background="Blue">  
  20.                         <TextBlock TextWrapping="Wrap" Text="Scroll Header in QuickReturn Mode " /> </Grid>  
  21.                 </Controls:ScrollHeader>  
  22.             </ListView.Header>  
  23.             <ListView.ItemTemplate>  
  24.                 <DataTemplate>  
  25.                     <Image x:Name="ImgLst" Width="100" Height="100" Margin="0,0,24,0" Source="{Binding IName}" /> </DataTemplate>  
  26.             </ListView.ItemTemplate>  
  27.         </ListView>  
  28.         <ListView Name="LVFade" Margin="473,180,690,96">  
  29.             <ListView.Header>  
  30.                 <Controls:ScrollHeader Mode="Fade" TargetListViewBase="{x:Bind LVFade}">  
  31.                     <Grid Background="Blue">  
  32.                         <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>  
  33.                 </Controls:ScrollHeader>  
  34.             </ListView.Header>  
  35.             <ListView.ItemTemplate>  
  36.                 <DataTemplate>  
  37.                     <Image x:Name="ImgLst" Width="100" Height="100" Margin="0,0,24,0" Source="{Binding IName}" /> </DataTemplate>  
  38.             </ListView.ItemTemplate>  
  39.         </ListView>  
  40.         <TextBlock x:Name="tblsticky" HorizontalAlignment="Left" Margin="42,135,0,0" TextWrapping="Wrap" Text="Sticky Mode" VerticalAlignment="Top" FontWeight="Bold" />  
  41.         <TextBlock x:Name="tblQuickReturn" HorizontalAlignment="Left" Margin="259,135,0,0" TextWrapping="Wrap" Text="Quick Return Mode" VerticalAlignment="Top" FontWeight="Bold" />  
  42.         <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>  
  43. </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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs