c# - XAML 中的颜色反转

Question

在我的 WP8 应用程序中，我想制作颜色反转效果。我不知道应该使用什么工具，所以我只会用非常笼统的术语解释我想要的东西。

它应该如何工作:假设我有一个由黑色矩形和其顶部的一些白色文本组成的UserControl。我想向该用户控件应用一些东西，以反转它所覆盖的 UserControl 部分的颜色。一些不可见的矩形跨越了 UserControl 的 50%，在该区域中背景将为白色，文本将为黑色。我希望它是动态的，这样我就可以在运行时更改它覆盖的区域。

这是一张图片来说明这一点:

反转效果应用于一半的控件。

我相信可以通过使用两个具有相同文本、反转颜色和不透明蒙版的控件来实现此目的，但我想知道这是否可以以更干净和直接的方式完成？

Answer 1

我认为你正在寻找的理想情况是两个 TextBlocks ，并将 OpacityMask 应用于顶部的一个，例如；

<Grid MaxWidth="100">
    <TextBlock Text="Hey check it out we can change object gradients! yay!" Foreground="Red"
               TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <TextBlock Text="Hey check it out we can change object gradients! yay!" Foreground="Blue"
               TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center">
             <TextBlock.OpacityMask>
                 <LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.75,0.75">
                  <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0.322" Color="Black"/>
                    <GradientStop Offset="0.739" Color="Transparent"/>
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </TextBlock.OpacityMask>
    </TextBlock>               
</Grid>

或者您可以直接将 LinearGradientBrush 直接应用于 Foreground (或其他元素的 Background)本身，例如；

<Border Width="100" Height="50">
        <Border.Background>
                <LinearGradientBrush StartPoint="0.062,0.552" EndPoint="0.835,0.548">
                  <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0.5" Color="White"/>
                    <GradientStop Offset="0.5" Color="Black"/>
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Border.Background>

        <TextBlock Text="Hello World!" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Foreground>
                <LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.75,0.75">
                  <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0.5" Color="Black"/>
                    <GradientStop Offset="0.5" Color="White"/>
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </TextBlock.Foreground>
        </TextBlock>

    </Border>

或者尝试 80 年代风格；

<Border Width="100" Height="50">
        <Border.Background>
                <LinearGradientBrush StartPoint="0.472,0.047" EndPoint="0.47,0.942">
                  <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0.541" Color="White"/>
                    <GradientStop Offset="0.548" Color="Black"/>
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Border.Background>

            <TextBlock Text="Hello World!" HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock.Foreground>
                    <LinearGradientBrush StartPoint="0.472,0.047" EndPoint="0.47,0.942">
                      <LinearGradientBrush.GradientStops>
                        <GradientStop Offset="0.631" Color="Black"/>
                        <GradientStop Offset="0.635" Color="White"/>
                      </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </TextBlock.Foreground>
            </TextBlock>

    </Border>

尝试一下，希望这会有所帮助。