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> 

給一個鏡頭，希望這有助於。