嗯,颜色反转可以作为位图效果来完成,但有一种更简单的方法。
创建一个Grid,它将作为 3 个子面板的容器,以便这些子面板完全相互重叠:
将文本放在具有Transparent 背景的面板中您想要的位置(默认情况下)。将此面板命名为“面具”。
制作另一个名为“mainbackground”的面板,并将主渐变作为其背景。将其放在“掩码”面板之后,使其覆盖文本
制作另一个名为“invertedforeground”的面板并给它相反的渐变。对于主渐变中的每个颜色值,给这个相反的值(例如,如果一种颜色是#FF0000,则输入#00FFFF)。您可以为这个渐变设置动画,就像您可以为第一个设置动画一样,只是使用相反的值。然后将此面板的OpacityMask 设置为VisualBrush,并将VisualBrushes 的Visual 属性设置为{Binding ElementName=mask}。
<Grid>
<Grid.Resources>
<local:MyColorConverter x:Key="colorConverter" />
</Grid.Resources>
<Grid
Name="mask">
<TextBlock
Name="mytext"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="32"
Foreground="White"
FontWeight="Bold">Blah blah blah</TextBlock>
</Grid>
<Grid Name="mainbackground">
<Grid.Background>
<LinearGradientBrush
ColorInterpolationMode="ScRgbLinearInterpolation"
EndPoint="1,0">
<GradientStop x:Name="stop1"
Color="#FF0000"
Offset="0" />
<GradientStop x:Name="stop2"
Color="#00FF00"
Offset="0.5" />
<GradientStop x:Name="stop3"
Color="#0000FF"
Offset="1" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
<Grid Name="invertedforeground">
<Grid.Background>
<LinearGradientBrush
ColorInterpolationMode="ScRgbLinearInterpolation"
EndPoint="1,0">
<GradientStop
Color="{Binding ElementName=stop1, Path=Color, Converter={StaticResource colorConverter}}"
Offset="0" />
<GradientStop
Color="{Binding ElementName=stop2, Path=Color, Converter={StaticResource colorConverter}}"
Offset="0.5" />
<GradientStop
Color="{Binding ElementName=stop3, Path=Color, Converter={StaticResource colorConverter}}"
Offset="1" />
</LinearGradientBrush>
</Grid.Background>
<Grid.OpacityMask>
<VisualBrush
Visual="{Binding ElementName=mask}" />
</Grid.OpacityMask>
</Grid>
</Grid>
您可能会使用绑定和值转换器,这样您只需要为一个渐变设置动画,而另一个则简单地跟随。
编辑:我尝试为文本设置一个倒置的前景画笔,但它会坚持TextBlock 的坐标,所以我恢复到之前使用文本作为@ 的解决方案987654332@.
编辑 2: 我添加了自定义 IValueConverter 的示例用法并将文本渐变的颜色绑定到原始渐变的颜色。您还可以在更高的位置使用绑定和转换器,例如将invertedforeground 的Background 属性绑定到mainbackground 的Background 属性,转换器采用输入渐变画笔并返回不同的渐变画笔(此允许您创建与原始配置完全不同的渐变)。