Setting the foreground of the TextBlock to a LinearGradientBrush causes unwanted behavior

I am getting unwanted behavior from TextBlock

which I am using in mine DataTemplate

. It looks like the LinearGradientBrush

one I'm using for the property Foreground

does not evenly draw the gradient across the font for words that contain "descenders", such as the lowercase "p" in the word Vampire in the example image.

I tried to install LineHeight

in the same way as FontSize

; without changes.
I tried to install Height

in TextBlock

; no color change, but added height at the bottom TextBlock

.

Has anyone else tackled this and found a solution before? I tried searching for answers on Google and StackOverflow but didn't figure it out yet.

Edit: The problem is that the gradient is not applied the same for every textbox as shrinking fonts increase the height of the font. Look at the difference between the lowercase "a" in words Vampire

and Brave

, and you'll see what I mean.

Detailed ultra-cool example image

TextBlock

XAML

<TextBlock Text="{Binding Title}" FontWeight="Bold" FontStyle="Italic" 
           FontSize="20" Padding="3" LineHeight="20">
  <TextBlock.Foreground>
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
      <GradientStopCollection>
        <GradientStop Color="White" Offset="0.2"/>
        <GradientStop Color="AliceBlue" Offset="0.4"/>
        <GradientStop Color="#6AB0EE" Offset="0.6"/>
        <GradientStop Color="DarkOrange" Offset="0.8"/>
      </GradientStopCollection>
    </LinearGradientBrush>
  </TextBlock.Foreground>
</TextBlock>

      

+3


source to share


1 answer


Try to set the property MappingMode

like this:



<LinearGradientBrush MappingMode="Absolute" StartPoint="0,0" EndPoint="0,1" >

      

+1


source







All Articles