c# - XAML 中的颜色反转

Question

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

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

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

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

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

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>

试一试，希望对您有所帮助。