如何爲TextBlock中的文本創建邊框？

Question

我想爲TextBlock中的文本創建一個邊框。

我嘗試着放下陰影，但它遇到了問題。問題與DropShadowPanel。我已經報告過這個問題

所以我需要一個替代方案來爲TextBlock中的文本創建邊框。

僅供參考，我希望文字是這樣的：

Answer 1

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

UWPCommunityToolkit會解決此問題issue爲DropShadowPanel與更新，但我們可以通過添加「的Horizo​​ntalAlignment =‘左’」爲DropShadowPanel手動解決問題。

所以我們需要做的是

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

這應該做的伎倆。