CODEWITHSUNDEEP
wpftextoverflow
ZafarYousafi
ZafarYousafi

Reputation: 10840

Text overflow effect

In my application I am trying to provide the fade effect at the end of the text if text is overflowed instead of the ellipsis. This is how text is fade out in ZUNE. Can any body tell me how can I achieve this.

Upvotes: 1

Views: 342

Answers (2)

Samuel Jack
Samuel Jack

Reputation: 33270

I've implemented this effect for WPF and Silverlight, and you can enable it as follows:

Copy FadeTrimming.cs into your project. Add 

xmlns:b="clr-namespace:SilverlightEffects"

to the root of your XAML file. You can then enable fade-trimming on TextBlocks like this:

<TextBlock b:FadeTrimming.IsEnabled="True">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</TextBlock>

It works by determining when the TextBlock gets clipped, and then setting the TextBlock Foreground brush to a LinearGradientBrush that fades to transparent just inside the clip boundary.

You can read more about this in a blog post I wrote here.

Upvotes: 2

Anastasiosyal
Anastasiosyal

Reputation: 6626

You could overlay a png image of variable alpha transparency that has the same background color as where the text box is displayed and anchor it to the bottom right.

So let's say your text is displayed on a white background. You could make a png image of width lets say 80px and Height equal to the font height you are using.

The png image |100% Transperant --> 0% Transparent|

Here is a link that shows you how you would create such a gradient in photoshop, in your case, instead of a photo you would overlay a layer containing the solid background color and the transparency gradient should go in the reverse direction of the example (from transparent to opaque)

Upvotes: 0

Related Questions