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="我曾经跨过山和大海。也穿过无数的谎言与伤害。在这漫长的旅途中。我曾迷失方向。哦~ 多少次挥霍了勇气。多少次又找回自己。可直到今天。我仍不愿随波逐流。如果命运是世界上最烂的编剧。那么你就要争取做你自己人生最好的演员。 我曾经失落失望失掉所有方向。直到看见平凡才是唯一的答案。 走过荒草天涯是我们的豁达。而漫天繁星是我们梦的家。啊~"
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();