wpf 蒙板

XAML


    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>

        <Border Grid.Column="0">

            <Border.Background>
                <ImageBrush ImageSource="/Resource/Images/BearAndFox1.jpg" />
            </Border.Background>

            <Border.OpacityMask>
                <!--  这里使用 VisualBrush 做蒙板  -->
                <VisualBrush Stretch="None">
                    <VisualBrush.Visual>
                        <TextBlock
                            FontSize="64" FontWeight="Bold" Text="龙虎精神" />
                    </VisualBrush.Visual>
                </VisualBrush>
            </Border.OpacityMask>

        </Border>

        <Border
            Grid.Column="1"
            Margin="12"
            Background="RoyalBlue">

            <!--  gird 不设置 Background 高度会出现问题  -->
            <Grid Background="Transparent">

                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Hidden">

                    <!--  歌词内容  -->
                    <TextBlock
                        x:Name="LyricsYaxisTextBlock"
                        Margin="12" HorizontalAlignment="Center" VerticalAlignment="Stretch"
                        FontSize="18" FontWeight="Bold" Foreground="Wheat" Text="我曾经跨过山和大海。也穿过无数的谎言与伤害。在这漫长的旅途中。我曾迷失方向。哦~&#10;&#10;多少次挥霍了勇气。多少次又找回自己。可直到今天。我仍不愿随波逐流。如果命运是世界上最烂的编剧。那么你就要争取做你自己人生最好的演员。&#10;&#10;我曾经失落失望失掉所有方向。直到看见平凡才是唯一的答案。&#10;&#10;走过荒草天涯是我们的豁达。而漫天繁星是我们梦的家。啊~"
                        TextAlignment="Center" TextOptions.TextFormattingMode="Display" TextOptions.TextRenderingMode="ClearType" TextWrapping="WrapWithOverflow">

                        <TextBlock.RenderTransform>
                            <TranslateTransform Y="0" />
                        </TextBlock.RenderTransform>

                    </TextBlock>

                </ScrollViewer>

                <!--  上下淡化蒙板  -->
                <Grid.OpacityMask>
                    <LinearGradientBrush StartPoint="0.5 0" EndPoint="0.5 1">
                        <GradientStop Offset="0.1" Color="#00000000" />
                        <GradientStop Offset="0.45" Color="#ff000000" />
                        <GradientStop Offset="0.65" Color="#ff000000" />
                        <GradientStop Offset="0.9" Color="#00000000" />
                    </LinearGradientBrush>
                </Grid.OpacityMask>

            </Grid>

        </Border>

        <Border
            Grid.Column="2"
            MaxWidth="240" MaxHeight="240"
            Background="RoyalBlue">
            <Border.OpacityMask>
                <!--  这里使用 VisualBrush 做蒙板  -->
                <VisualBrush Stretch="None">
                    <VisualBrush.Visual>
                        <Image Source="/Resource/Images/BearAndFox1_bear.png" />
                    </VisualBrush.Visual>
                </VisualBrush>
            </Border.OpacityMask>

        </Border>

    </Grid>

cs

     var textBlock = this.LyricsYaxisTextBlock;

        if (textBlock.Parent is not FrameworkElement element)
        {
            return;
        }

        var parentHeight = element.ActualHeight;
        var height = textBlock.ActualHeight;

        var seconds = (height + parentHeight) / 30;

        DoubleAnimation animation = new()
        {
            From = parentHeight,
            To = -1 * height,
            Duration = new Duration(TimeSpan.FromSeconds(seconds)),
        };

        Storyboard.SetTarget(animation, textBlock);
        Storyboard.SetTargetProperty(animation, new PropertyPath("RenderTransform.Y"));

        Storyboard storyboard = new();
        storyboard.Children.Add(animation);

        storyboard.Begin();
上一篇
下一篇