Apply Brush to Two Objects At Once

Question

Hi All--

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

Declare the brush into the window (or application) resources and bind the Foreground property of the two textblocks with the brush.

Answer 2

What about using an ObjectDataProvider that exposes a method that returns the brush you want based on 3 integers, the starting x position of the brush, the current x position of the brush, and the ending x position of the brush (I could see use cases where you might want four parameters, x start, x end, x current start, x current end, but the 3 parameter will work for the case you have asked for). You can either statically assign these integers based on the layout of your control or use databinding for the parameters.

If you are unfamiliar with ObjectDataProvider and binding to method parameters for this class, i suggest going here and here

Answer 3

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.