Question

I have a gradient that changes its colors, I want the text inside it should always be visible.

I rather doing it dynamically if there is any out-the-box resource; I want a ‘magic brush’ that negates the color.

Any experiments?

Answer 1

Well, color inversion could possibly be done as a bitmap effect, but there’s a simpler way.

Make a Grid that will be the container for 3 child panels so that these child panels will overlap each other completely:

Put the text where you want it in a panel that has a Transparent background (they do by default). Name this panel ‘mask’.

Make another panel called ‘mainbackground’ and give it the main gradient as its background. Put this after the ‘mask’ panel so that it covers the text

Make another panel called ‘invertedforeground’ and give it the opposite gradient. For each color value in the main gradient, give this one the opposite (e.g., if one color is #FF0000, put #00FFFF). You could animate this gradient just as you can animate the first, just with opposite values. Then you set the OpacityMask of this panel to a VisualBrush and set the VisualBrushes‘s Visual property to {Binding ElementName=mask}.

<Grid>
    <Grid.Resources>
        <local:MyColorConverter x:Key="colorConverter" />
    </Grid.Resources>
    <Grid
        Name="mask">
        <TextBlock
            Name="mytext"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="32"
            Foreground="White"
            FontWeight="Bold">Blah blah blah</TextBlock>
    </Grid>

    <Grid Name="mainbackground">
        <Grid.Background>
            <LinearGradientBrush
                ColorInterpolationMode="ScRgbLinearInterpolation"
                EndPoint="1,0">
                <GradientStop x:Name="stop1"
                    Color="#FF0000"
                    Offset="0" />
                <GradientStop x:Name="stop2"
                    Color="#00FF00"
                    Offset="0.5" />
                <GradientStop x:Name="stop3"
                    Color="#0000FF"
                    Offset="1" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>

    <Grid Name="invertedforeground">
        <Grid.Background>
            <LinearGradientBrush
                ColorInterpolationMode="ScRgbLinearInterpolation"
                EndPoint="1,0">
                <GradientStop
                    Color="{Binding ElementName=stop1, Path=Color, Converter={StaticResource colorConverter}}"
                    Offset="0" />
                <GradientStop
                    Color="{Binding ElementName=stop2, Path=Color, Converter={StaticResource colorConverter}}"
                    Offset="0.5" />
                <GradientStop
                    Color="{Binding ElementName=stop3, Path=Color, Converter={StaticResource colorConverter}}"
                    Offset="1" />
            </LinearGradientBrush>
        </Grid.Background>
        <Grid.OpacityMask>
            <VisualBrush
                Visual="{Binding ElementName=mask}" />
        </Grid.OpacityMask>
    </Grid>
</Grid>

You could probably use binding and value converters so that you only need to animate one gradient and the other simply follows.

---

Edit: I tried setting an inverted Foreground brush for the text, but it would stick to the TextBlock‘s coordinates, so I reverted to the previous solution of using the text as an OpacityMask.

---

Edit 2: I added example usage of a custom IValueConverter and binding the text gradient’s colors to the original gradient’s. You could also use binding and a converter somewhere higher up, such as binding invertedforeground‘s Background property to mainbackground‘s Background property and the converter takes the input gradient brush and returns a different gradient brush (this allows you to create a gradient with a much different configuration as the original).