Question

我正在XAML中创建一个倒数计时器。

随着计时器倒计时数字向下移动，前一个数字和下一个数字逐渐消失，LinearGradientBrush应用于OpacityMask，如下例所示。

Example of countdown timer

我使用以下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>

但是，当我移动LinearGradientBrush容器网格的TranslateTransform时，TextBlock也会移动。似乎计算了不透明度，然后应用了变换。

LinearGradientBrush似乎与应用它的父Grid的大小无关，这似乎有点奇怪。相反，它相对于其可见内容即子Grid被应用。有没有办法覆盖这个？

如何在线性渐变下实现动画效果？

编辑：应该只能粘贴到UserControl中的完整代码。要进行测试，只需调整转换Y值...

即可

<UserControl x:Class="MicroBugless.View.UserControls.CountdownWidget"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <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>

            <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>
                <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" />
            </Grid>

        </Grid>

    </Grid>
</UserControl>

Answer 1

好的，想通了。

由于某种原因，相对于可见内容应用了OpacityMask。因此，翻译可见内容对OpacityMask没有影响。

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

即

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

Answer 2

以下是使用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>

因此，您可以滚动滚动条的偏移

，而不是进行转换

如何在WPF中为其下面的内容制作动画时，如何保持OpacityMask？

2 个答案: