¿Cómo puedo aplicar un efecto a un ListView donde los primeros 30px se gradúan de completamente transparente a completamente opaco? La idea es que a medida que se desplaza hacia abajo, los elementos superiores se desvanecen gradualmente.

Estoy creando una aplicación para UWP donde el diseño requiere que los 30 píxeles superiores de un ListView comiencen con la opacidad 0 y la transición a la opacidad 1. Conceptualmente, estoy imaginando una máscara de opacidad que se aplicaría a la parte superior de un SpriteVisual pero no puedo trabajar averiguar cómo lograr esto.

Estoy intentando esto usando la edición de aniversario de Windows 10, Composition y Win2D.

Editar: una imagen puede pintar 1000 palabras:

Si observa esta imagen, hay dos elementos de contenido en la parte inferior izquierda e inferior derecha. Aunque el fondo parece ser negro, en realidad es un degradado. Si examina la parte superior de los dos elementos, se vuelven más transparentes hacia la parte superior y se muestran a través del fondo. Ese es el efecto que estoy tratando de lograr.

Edición 2: en un intento de mostrar el resultado del efecto que estoy buscando, aquí hay un GIF que muestra el efecto si uso mapas de bits superpuestos:

La imagen de fondo del encabezado es:

El 30px inferior tiene un gradiente alfa y aparece encima de la vista de cuadrícula, dando el efecto aparente de que los elementos de la vista de cuadrícula se desvanecen y se deslizan debajo del fondo.

El diseño XAML se ve así:

<Page
x:Class="App14.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App14"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="150" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Image Source="/Assets/background.png"
           Grid.Row="0"
           Grid.RowSpan="2"
           VerticalAlignment="Top"
           Stretch="None" />

    <GridView Grid.Row="1"
              Margin="96,-30,96,96">
        <GridView.Resources>
            <Style TargetType="Image">
                <Setter Property="Height" Value="400" />
                <Setter Property="Width" Value="300" />
                <Setter Property="Margin" Value="30" />
            </Style>
        </GridView.Resources>
        <Image Source="Assets/1.jpg" />
        <Image Source="Assets/2.jpg" />
        <Image Source="Assets/3.jpg" />
        <Image Source="Assets/4.jpg" />
        <Image Source="Assets/5.jpg" />
        <Image Source="Assets/6.jpg" />
        <Image Source="Assets/7.jpg" />
        <Image Source="Assets/8.jpg" />
        <Image Source="Assets/9.jpg" />
        <Image Source="Assets/10.jpg" />
        <Image Source="Assets/11.jpg" />
        <Image Source="Assets/12.jpg" />
    </GridView>

    <!-- Header above content -->

    <Image Grid.Row="0" Source="/Assets/header_background.png"
           Stretch="None" />

    <TextBlock x:Name="Title"
               Grid.Row="0"
               FontSize="48"
               Text="This Is A Title"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Foreground="White" />


</Grid>