Apply outer outlines to text in WPF

Question

Here there is a demo for a textBlock with an outlines.

With the code below I get this result

    <local:OutlinedTextBlock Stroke="Red" 
                             FontSize="16" 
                             Fill="Transparent" 
                             StrokeThickness="1">
        abc
    </local:OutlinedTextBlock>

The outline stands on the center of the border of the letter, how can I make the outline be out of the letters? I need the fill to be transparent and only the outline will have color.

Something like that:

My text is not fixed but can be changed by the user.

Could you give a bit more explanation of your purpose? The way I sometimes do this sort of thing is to define a path for each letter a-z and present them in a horizontally arranged itemscontrol. — Andy, Apr 03 '18 at 12:24
@Isma No, my question is different, On my question I brought a link to the question you mentioned and explained why there is still a question here and there is no duplication here. — codeDom, Apr 03 '18 at 12:33
You may create two geometries, one "inner" from the regularly filled text, one "outer" from the outline of the stroked text. Then combine them by means of a CombinedGeometry with GeometryCombineMode.Exclude. — Clemens, Apr 03 '18 at 12:45
could you try this link: https://learn.microsoft.com/en-us/dotnet/framework/wpf/advanced/how-to-create-outlined-text — Vishal Prajapati, Apr 03 '18 at 12:48
No sorry, that would be too much work, and probably not at all what you want. IMO you should first do your own research and come back with a more specific question. — Clemens, Apr 03 '18 at 12:54
@Clemens There is an `OutlinedTextBlock` ready control [here](https://stackoverflow.com/a/35262509/7206675), would it be difficult to follow which solution you said? — codeDom, Apr 03 '18 at 12:57
There's also [this one](https://stackoverflow.com/a/48317972/1136211). The idea is to create two geometries where these control only use one, and combine them. — Clemens, Apr 03 '18 at 12:59

codeDom · Accepted Answer · 2018-04-03T16:28:51.663

You need to push clip geometry, Just add 4 new lines to this code

    protected override void OnRender(DrawingContext drawingContext)
    {
        EnsureGeometry();

        var boundsGeo = new RectangleGeometry(new Rect(0, 0, ActualWidth, ActualHeight));
        var invertGeo = Geometry.Combine(boundsGeo, _TextGeometry, GeometryCombineMode.Exclude, null);

        drawingContext.PushClip(invertGeo);
        drawingContext.DrawGeometry(null, _Pen, _TextGeometry);
        drawingContext.Pop();

        drawingContext.DrawGeometry(Fill, null, _TextGeometry);
    }

But then you would need to double the StrokeThickness, since only half of the stroke is visible.

result:

Apply outer outlines to text in WPF

1 Answers1