XAML 中的颜色反转答案

【问题标题】：Color inversion in XAMLXAML 中的颜色反转
【发布时间】：2013-01-16 17:10:52
【问题描述】：

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

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

这里有一张图片来说明这一点：

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

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

【问题讨论】：

标签： c# xaml windows-phone-8 inverse

【解决方案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>

试一试，希望对你有帮助。

【讨论】：

谢谢，您的第二个选项正是我所需要的。