Skip to content

Latest commit

 

History

History
103 lines (75 loc) · 3.63 KB

FadeHeader.md

File metadata and controls

103 lines (75 loc) · 3.63 KB
title author description keywords dev_langs
FadeHeader Behavior
nmetulev
The FadeHeader Behavior fades a ListView or GridView Header UIElement when the user scrolls.
windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, fadeheader, fadeheader behavior
csharp
vb

FadeHeader

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

[!div class="nextstepaction"] Try it in the sample app

Syntax

Implicit usage: Automatically detects the Header element by finding the ListViewBase (note: GridView uses ListViewBase)

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

<ListView>
    <interactivity:Interaction.Behaviors>
        <behaviors:FadeHeaderBehavior />
    </interactivity:Interaction.Behaviors>
    <ListView.Header>
        <!-- Header Content -->
    </ListView.Header>
</ListView>

Explicit usage: Set the ElementName property using the UIElement of the Header manually

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

<ListView>
    <interactivity:Interaction.Behaviors>
        <behaviors:FadeHeaderBehavior HeaderElement="{Binding ElementName=MyHeaderGrid}" />
    </interactivity:Interaction.Behaviors>
    <ListView.Header>
        <Grid Name="MyHeaderGrid">
            <!-- Header Content -->
        </Grid>
    </ListView.Header>
</ListView>

Implicit usage:

Microsoft.Xaml.Interactivity.Interaction.GetBehaviors(MyListView).Add(new FadeHeaderBehavior());
Microsoft.Xaml.Interactivity.Interaction.GetBehaviors(MyListView).Add(New FadeHeaderBehavior())

Explicit usage:

Microsoft.Xaml.Interactivity.Interaction.GetBehaviors(MyListView).Add(new FadeHeaderBehavior { HeaderElement = MyHeaderGrid });
Microsoft.Xaml.Interactivity.Interaction.GetBehaviors(MyListView).Add(New FadeHeaderBehavior With {.HeaderElement = MyHeaderGrid})

Sample Output

FadeHeader Behavior animation

Properties

Property Type Description
HeaderElement UIElement Gets or sets the target element for the Fading behavior

Sample Project

FadeHeader Behavior Sample Page Source. You can see this in action in the Windows Community Toolkit Sample App.

Requirements

Device family Universal, 10.0.16299.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Animations
NuGet package Microsoft.Toolkit.Uwp.UI.Animations

API

Related Topics