2

私の WP8 アプリケーションでは、色反転効果を作成したいと考えています。どのツールを使用すればよいかわからないので、必要なものを非常に一般的な用語で説明します。

どのように動作するか:UserControl黒い四角形とその上にある白いテキストで構成される があるとします。そのユーザーコントロールに、それがカバーする部分の色を反転させる何かを適用したいと思います。UserControl50% にまたがるいくつかの目に見えない四角形はUserControl、その領域の背景が白く、テキストが黒くなります。動的にしたいので、実行時にカバーする領域を変更できます。

これを説明するための画像を次に示します。
ここに画像の説明を入力

コントロールの半分に反転効果が適用されます。

同じテキスト、反転した色、不透明マスクを持つ 2 つのコントロールを使用することでこれを達成できると思いますが、これをよりクリーンで直接的な方法で行うことができるのでしょうか?

4

1 に答える 1

5

あなたが探しているのは、理想的には、上の 1 つTextBlocksにOpacityMask適用された 2 つのいずれかであると思います。

<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>

または、次のように(または他の要素の) 自体にaLinearGradientBrushを直接適用することもできます。ForegroundBackground

<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>

試してみてください。これが役立つことを願っています。

于 2013-01-16T19:52:30.467 に答える