C# 在WPF中，如何在对其下的内容进行动画制作的同时保持不透明材质的静止？

我正在用XAML创建一个倒计时计时器

当计时器倒计时时，数字向下移动，上一个数字和下一个数字随着

LinearGradientBrush

应用于

OpacityMask

而淡出，如下例所示

我使用了以下XAML来完成此操作

<Grid>

    <Grid.OpacityMask>
        <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0" SpreadMethod="Pad" MappingMode="RelativeToBoundingBox">
            <GradientStop Offset="0.0" Color="Transparent" />
            <GradientStop Offset="0.5" Color="White" />
            <GradientStop Offset="1.0" Color="Transparent" />
        </LinearGradientBrush>
    </Grid.OpacityMask>

    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid.RenderTransform>
            <TranslateTransform Y="0" />
        </Grid.RenderTransform>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <!-- TextBlock definitions here --->

    </Grid>


</Grid>

---

下面是一个使用

ItemsControl

和

ScrollViewer

<Grid Background="Black">
    <Grid>
        <Grid.OpacityMask>
            <LinearGradientBrush StartPoint="0.5,0.0"
                                 EndPoint="0.5,1.0"
                                 SpreadMethod="Pad"
                                 MappingMode="RelativeToBoundingBox">
                <GradientStop Offset="0.0"
                              Color="Transparent" />
                <GradientStop Offset="0.5"
                              Color="White" />
                <GradientStop Offset="1.0"
                              Color="Transparent" />
            </LinearGradientBrush>
        </Grid.OpacityMask>
        <ScrollViewer VerticalScrollBarVisibility="Visible" CanContentScroll="True"
                      Height="50">
            <ItemsControl HorizontalAlignment="Center"
                          VerticalAlignment="Center">
                <TextBlock Grid.Row="0"
                           Text="000"
                           Foreground="White" />
                <TextBlock Grid.Row="1"
                           Text="001"
                           Foreground="White" />
                <TextBlock Grid.Row="2"
                           Text="002"
                           Foreground="White" />
                <TextBlock Grid.Row="3"
                           Text="003"
                           Foreground="White" />
                <TextBlock Grid.Row="4"
                           Text="004"
                           Foreground="White" />
                <TextBlock Grid.Row="5"
                           Text="005"
                           Foreground="White" />
                <TextBlock Grid.Row="6"
                           Text="006"
                           Foreground="White" />

            </ItemsControl>
        </ScrollViewer>
    </Grid>
</Grid>

因此，您可以滚动滚动条的偏移量，而不是执行平移变换。好的，算出它

由于某种原因，

OpacityMask

相对于可见内容应用。因此，翻译可见内容对

不透明掩码

没有影响

可以使父网格的背景稍微不透明，以确保“可见”内容根据需要定义为父网格的边界

i、 e

...
...
...

您是否尝试创建一个覆盖

网格的
矩形
，并将
OpacityMask
应用于矩形？嗯，刚刚尝试过，但是
矩形
OpacityMask
不会影响它下面的元素-似乎
OpacityMask
只影响元素的子元素…您可以发布完整的工作示例吗？提供的代码不足以重现问题。我想我知道为什么，当你对子对象应用translate transform时，最终会迫使父对象重新布局，因此不透明遮罩也会得到偏移。我想帆布可能会解决这个问题。也许带滚动查看器的
ItemsControl
是一个更好的选择。这是一个有趣的解决方案。然而，在WPF（）中设置
ScrollViewer
的动画是有问题的（虽然不是不可能的），所以我想我更喜欢设置
TranslateTransform
动画的简单方法。。。
<Grid Background="Black">
    <Grid>
        <Grid.OpacityMask>
            <LinearGradientBrush StartPoint="0.5,0.0"
                                 EndPoint="0.5,1.0"
                                 SpreadMethod="Pad"
                                 MappingMode="RelativeToBoundingBox">
                <GradientStop Offset="0.0"
                              Color="Transparent" />
                <GradientStop Offset="0.5"
                              Color="White" />
                <GradientStop Offset="1.0"
                              Color="Transparent" />
            </LinearGradientBrush>
        </Grid.OpacityMask>
        <ScrollViewer VerticalScrollBarVisibility="Visible" CanContentScroll="True"
                      Height="50">
            <ItemsControl HorizontalAlignment="Center"
                          VerticalAlignment="Center">
                <TextBlock Grid.Row="0"
                           Text="000"
                           Foreground="White" />
                <TextBlock Grid.Row="1"
                           Text="001"
                           Foreground="White" />
                <TextBlock Grid.Row="2"
                           Text="002"
                           Foreground="White" />
                <TextBlock Grid.Row="3"
                           Text="003"
                           Foreground="White" />
                <TextBlock Grid.Row="4"
                           Text="004"
                           Foreground="White" />
                <TextBlock Grid.Row="5"
                           Text="005"
                           Foreground="White" />
                <TextBlock Grid.Row="6"
                           Text="006"
                           Foreground="White" />

            </ItemsControl>
        </ScrollViewer>
    </Grid>
</Grid>

<Grid Background="#01000000">
    <Grid.OpacityMask>
         ...
    </Grid.OpacityMask>
    ...
    <!-- Child Grid with TranslateTransform here -->
    ...
</Grid>