小编Dar*_*May的帖子

如何将效果应用于ListView,其中前30px从完全透明变为完全不透明？我们的想法是,当您向下滚动时,顶部项目逐渐消失.

我正在构建一个UWP应用程序,其中设计要求ListView的前30px从不透明度0开始并转换为不透明度1.从概念上讲,我想象一个不透明蒙版将应用于SpriteVisual的顶部但我无法工作如何实现这一目标.

我正在尝试使用Windows 10,Composition和Win2D的周年纪念版.

编辑:一张图片可能会刷1000字:

如果查看此图像,左下角和右下角有两个内容元素.虽然背景看起来是黑色的,但它实际上是一个渐变.如果您检查两个元素的顶部,它们会变得更加透明,通过背景显示.这就是我想要达到的效果.

编辑2:为了显示我正在寻找的效果的结果,这里有一个GIF,如果我使用重叠的位图,它会显示效果:

标题背景图片是:

较低的30px具有alpha渐变并且出现在网格视图上方,使得网格视图项目的明显效果逐渐淡出并在背景下滑动.

XAML布局如下所示:

<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" …