Fading Header In List View Using UWP With XAML And C#

Before reading this article, please go through the article's link, given below.

• Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

FadeHeader behavior fades a ListView or GridView header UIElement, when the user scrolls. UIElement fades out to 0 opacity, when the edge of the header reaches the edge of the visible bounds of the ListElement.

After reading this article, you can learn how to fade a ListView header, when the user scrolls. 

The important tools, which are required to develop UWP are given below.

1. Windows 10 (Recommended)
2. Visual Studio 2015 Community Edition (It is a free software available online)

Now, we can discuss step by step app development, which is given below.

Step 1

Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank app -> Give the suitable name for your app (UWPFadeHeader)->OK.



After choosing the target and minimum platform version for your Windows, Universal Application will support and the project creates App.xaml and MainPage.xaml.



Step 2 

Open (double click) the file MainPage.xaml in Solution Explorer and add Microsoft.Toolkit.Uwp.UI.Animations reference in the project.

To add the reference, right click on your project (UWPFadeHeader) and select Manage NuGet Packages.



Choose browse and search Microsoft.Toolkit.Uwp.UI.Animations. Select the package and install it.



Accept the Licence



The reference is added to the project



Step 3 

Add TextBlock control, change the name and text property for the title,



Step 4 

Add ListView control, which is given below. 



Step 5 

Add the XAML namespaces, given below and code for Fading List view header in Mainpage.xaml.

xmlns: interactivity = "using:Microsoft.Xaml.Interactivity"
xmlns: behaviors = "using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors" < interactivity: Interaction.Behaviors > < behaviors: FadeHeaderBehavior / > < /interactivity:Interaction.Behaviors>

Step 6 

Add the List view header with stackpanel, Grid and Textblock for Header information.

<ListView.Header>
    <Grid x:Name="MyHeaderGrid" MinHeight="100" Background="Blue" Height="174">
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Margin="20,0">
            <TextBlock Text="This Is The Header" TextAlignment="Center" FontWeight="Bold" Style="{ThemeResource TitleTextBlockStyle}" Foreground="White" Margin="0,5" />
            <TextBlock Text="Your Header will Fade while you scroll up." Style="{ThemeResource SubtitleTextBlockStyle}" Foreground="White" VerticalAlignment="Center" TextAlignment="Center" /> </StackPanel>
    </Grid>
</ListView.Header>

Step 7 

Add the List view items.

<x:String>India</x:String>
<x:String>Unites States</x:String>
<x:String>Sri Lanka</x:String>
<x:String>China</x:String>
<x:String>Canada</x:String>
<x:String>Russia</x:String>

Note 

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

<Page x:Class="UWPFadeHeader.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPFadeHeader" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:interactivity="using:Microsoft.Xaml.Interactivity" xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="61,65,0,0" TextWrapping="Wrap" Text="UWP ToolKit Fade Header Demo" VerticalAlignment="Top" Height="26" Width="262" FontWeight="Bold" />
        <ListView x:Name="lvFadeHeader" HorizontalAlignment="Left" Height="304" Margin="61,111,0,0" VerticalAlignment="Top" Width="262">
            <interactivity:Interaction.Behaviors>
                <behaviors:FadeHeaderBehavior /> </interactivity:Interaction.Behaviors>
            <ListView.Header>
                <Grid x:Name="MyHeaderGrid" MinHeight="100" Background="Blue" Height="174">
                    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Margin="20,0">
                        <TextBlock Text="This Is The Header" TextAlignment="Center" FontWeight="Bold" Style="{ThemeResource TitleTextBlockStyle}" Foreground="White" Margin="0,5" />
                        <TextBlock Text="Your Header will Fade while you scroll up." Style="{ThemeResource SubtitleTextBlockStyle}" Foreground="White" VerticalAlignment="Center" TextAlignment="Center" /> </StackPanel>
                </Grid>
            </ListView.Header>
            <x:String>India</x:String>
            <x:String>Unites States</x:String>
            <x:String>Sri Lanka</x:String>
            <x:String>China</x:String>
            <x:String>Canada</x:String>
            <x:String>Russia</x:String>
        </ListView>
    </Grid>
</Page>

Step 8

Deploy your app in the local machine and the output of UWPFadeHeader app is given below.



After scrolling the list view item (50% Fade), the screenshot is given below.



After Scrolling the list view item (100% Fade), the screenshot is given below.



Summary

Now, you have successfully tested UWP ToolKit – Fading List View Header in Visual C# - UWP environment.