如何在TextBlock中为文本创建边框？

Question

我想在TextBlock中为文本创建边框。

我试着投下阴影，但它遇到了一个问题。问题出在DropShadowPanel上。我已经报告了这个问题

所以我需要一个替代方法来为TextBlock中的文本创建边框。

供参考，我希望文字看起来像这样：

Answer 1

注意：需要Windows周年更新（10.0.14393.0）才能正确支持此效果。

UWPCommunityToolkit会为issue更新此DropShadowPanel并进行更新，但我们可以通过为DropShadowPanel添加'Horizo​​ntalAlignment =“Left”来手动解决问题。

所以我们需要做的就是

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

Answer 2

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

另外，在这里查看此链接，它可以获得您需要的一切，甚至更多：

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

Answer 3

由于你遇到DropShadowPanel的问题，我想你想要一个文本的阴影，而不是边框​​。

如果是这种情况，您可以执行以下操作：

<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" />

这会产生阴影效果。

修改

我想我得到了你想要的东西。你的XAML中仍然需要两个TextBlock。

<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>

然后你需要在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);
}

结果看起来像你的例子：

Answer 4

你甚至不需要将网格放入。只需将TextBlock放在Border控件中：

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

这应该可以解决问题。