Question

I’d like to apply a Brush (LinearGradientBrush in this case) to two or more objects (TextBlocks) at once. The effect that I’d like is something like this:

Edit
I cannot simply apply the same brush to both objects, as this will make both of them start red and go to blue (instead of the second one starting at a shade of purple).

I’m sure I’m overlooking something quick-n-easy…

Thanks,
wTs

Answer 1

I did it like this:

<Border Height="100" Width="600" >
    <Border.OpacityMask>
        <VisualBrush>
            <VisualBrush.Visual>
                <StackPanel>
                    <TextBlock FontSize="85.333" FontFamily="Calibri" TextAlignment="Right">
                        The big first line
                    </TextBlock>
                    <TextBlock TextWrapping="Wrap" Margin="0,0,8,0" FontSize="32" FontFamily="Calibri" Text="The small second line" TextAlignment="Right" />
                </StackPanel>
            </VisualBrush.Visual>
        </VisualBrush>
    </Border.OpacityMask>
    <Border.Background>
        <LinearGradientBrush EndPoint="0.974,0.49" StartPoint="0,0.457">
            <GradientStop Color="#FFFD0202"/>
            <GradientStop Color="#FF0234FD" Offset="1"/>
        </LinearGradientBrush>
    </Border.Background>
</Border>

So, a border whose background is filled with the gradient from blue to red. The only visible part of the gradient is the text in the opacity mask.

Maybe some simpler control than the border would be even better.

The remaining issue is that one has to size the container control explicitly, as it has no content.