How to create a border for the text in the TextBlock?

Question

I want to create a border for the text in the TextBlock.

I tried with dropping shadow but It runs into an issue. The issue is with DropShadowPanel. I have reported the issue

So I need an alternative for creating a border for the text in the TextBlock.

For reference, I want text to look like this:

What do you mean border in the TextBlock - have you tried putting *TextBlock* inside *Border*? Or you mean something different? — Romasz, Apr 04 '17 at 19:50
Since you're having an issue with the *DropShadowPanel*, I guess you want a shadow for the text, not a border. — Iuri Farenzena, Apr 05 '17 at 04:30
@Romasz For reference, I want text Like [this Image shown](https://i.stack.imgur.com/qFJGa.jpg). — Vijay Nirmal, Apr 05 '17 at 04:55
Does this answer your question? [Apply stroke to a textblock in WPF](https://stackoverflow.com/questions/93650/apply-stroke-to-a-textblock-in-wpf) — Mike Nakis, Aug 04 '20 at 12:53

Vijay Nirmal · Accepted Answer · 2020-08-04T16:16:08.310

NOTE: Windows Anniversary Update (10.0.14393.0) is needed to support correctly this effect.

~~UWPCommunityToolkit will fix this issue for DropShadowPanel with an update but we can manually fix the issue by adding 'HorizontalAlignment="Left"' for DropShadowPanel.~~

Using Microsoft.Toolkit.Uwp.UI.Controls

<controls:DropShadowPanel BlurRadius="3" ShadowOpacity="1" OffsetX="0" OffsetY="0" Color="Black">
    <TextBlock FontSize="42" Text="Vijay Nirmal" Foreground="White"/>
</controls:DropShadowPanel>

Iuri Farenzena · Answer 2 · 2017-04-05T06:00:33.640

Since you're having an issue with the DropShadowPanel, I guess you want a shadow for the text, not a border.

If that is the case, you can do the following:

<TextBlock Text="My text" Foreground="Black" RenderTransformOrigin="0.5,0.5"  >
    <TextBlock.RenderTransform>
        <CompositeTransform TranslateX="1" TranslateY="1"/>
    </TextBlock.RenderTransform>
</TextBlock>
<TextBlock Text="My text"  Foreground="White" />

This will create a shadow effect.

EDIT

I think I've got what you want. You'll still need two TextBlock in your XAML.

<Grid x:Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <!--TextBlock that will receive the shadow-->
    <TextBlock FontSize="46" Text="My text"  Foreground="White" x:Name="shadowTextBlock" />
    <!--Let this TextBlock foreground black just for design time-->
    <TextBlock FontSize="46" Text="My text"  Foreground="Black" x:Name="foregroundTextBlock"/>
</Grid>

Then you'll need the following code at page_loaded:

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    // Set the right color to the foreground text
    this.foregroundTextBlock.Foreground = this.shadowTextBlock.Foreground;

    var compositor = ElementCompositionPreview.GetElementVisual(this.grid).Compositor;
    var spriteVisual = compositor.CreateSpriteVisual();
    spriteVisual.Size = this.grid.RenderSize.ToVector2();

    var dropShadow = compositor.CreateDropShadow();
    dropShadow.Mask = this.shadowTextBlock.GetAlphaMask();
    dropShadow.Color = Colors.Black;
    dropShadow.Offset = new Vector3(0, 0, -50);
    spriteVisual.Shadow = dropShadow;

    ElementCompositionPreview.SetElementChildVisual(this.shadowTextBlock, spriteVisual);
}

The result really looks like your example:

I want border, not shadow effect. I want to display a White colored Text on a white background. — Vijay Nirmal, Apr 05 '17 at 04:31
Could you provide an example of the expected result? A image would be great. — Iuri Farenzena, Apr 05 '17 at 04:34
UWPCommunityToolkit will fix this [issue](https://github.com/Microsoft/UWPCommunityToolkit/issues/1072) for DropShadowPanel with an update but we can manually fix the issue by adding 'HorizontalAlignment="Left"' for DropShadowPanel. So we can achieve this effect easily. [Check my answer](http://stackoverflow.com/questions/43214537/how-to-create-a-border-for-the-text-in-the-textblock/43224104#43224104) — Vijay Nirmal, Apr 05 '17 at 07:09

score 0 · Answer 3 · answered Apr 04 '17 at 18:47

0

<Grid HorizontalAlignment="Left">
    <TextBlock Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black" />
    <Border BorderBrush="#FF0B232F" BorderThickness="2" />
</Grid>

Also, check for this link here, it got everything you need and even more :

https://msdn.microsoft.com/en-us/library/ms745816.aspx

answered Apr 04 '17 at 18:47

Roxy'Pro

4,216
9
40
102

There is no OpacityMask property for TextBlock. – Vijay Nirmal Apr 04 '17 at 18:55
@VijayNirmal what about only Opacity? – Roxy'Pro Apr 04 '17 at 18:56
I didn't understand your code. It will create a border for entire grid Like an outline but how does it create a border for TextBlock. – Vijay Nirmal Apr 04 '17 at 19:04

score 0 · Answer 4 · answered Apr 05 '17 at 00:01

0

You don't even need the grid to put them in. Just put the TextBlock inside of a Border control:

<Border BorderBrush="Black" BorderThickness="2">
    <TextBlock Text="TextBlock" FontSize="12" Foreground="Black" />
</Border>

That should do the trick.

answered Apr 05 '17 at 00:01

Pedro Silva

687
6
14

It won't work. It will put a border around the TextBlock but I want for text in the TextBloxk. – Vijay Nirmal Apr 05 '17 at 04:25
Your problem description was confusing. If that's the case, you should try what Iuri suggested. – Pedro Silva Apr 05 '17 at 04:39
For reference, I want text Like [this Image shown](https://i.stack.imgur.com/qFJGa.jpg). – Vijay Nirmal Apr 05 '17 at 04:53

How to create a border for the text in the TextBlock?

4 Answers4

EDIT