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:

Answer 1

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>

Answer 2

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:

Answer 3

<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

Answer 4

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.