views:

105

answers:

2

For instance, if I have a label:

Blah blah bladity blah

I want the first 10% of this label, such that the font color should be red, and the rest should be green.

This perhaps means it would color the Bl and PART of the a. Basically pixel-wise font coloring instead of character-wise. Is this possible and how would is be accomplished?

+2  A: 

Yes - you should use a Gradient brush with the Foreground color of the Text.

<TextBlock Text="Blah blah bladity blah">
    <TextBlock.Foreground>
        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
       <GradientStop Color="Red" Offset="0.1"/>
       <GradientStop Color="Green" Offset="0.1"/>
        </LinearGradientBrush>
    </TextBlock.Foreground>
</TextBlock>
Michael S. Scherotter
+5  A: 

Yeah, it would be like this:

<Canvas>
    <dataInput:Label Background="White" >
    <dataInput:Label.Foreground>
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
            <GradientStop Color="Red" Offset="0.1"/>
            <GradientStop Color="Green" Offset="0.1"/>
        </LinearGradientBrush>
    </dataInput:Label.Foreground>
    Blah blah bladity blah
    </dataInput:Label>
</Canvas>

In order to not have the gradient effect, you need to set both Offset to the same value.

Note: In this font size (standard, nothing changed) the "B" and "l" are red and only a small sliver of "a" is. But the "0.1" in Offset means 10%, so you can either decrease font size or change the Offset value.

Otaku
It looks like we both came up with the same solution!
Michael S. Scherotter
+1 Nice use of the dataInput:Label control.
Alison