Wie erstellt man einen Rahmen für den Text im TextBlock?

Question

Ich möchte einen Rahmen für den Text im TextBlock erstellen.

Ich versuchte mit Schatten fallen, aber es läuft auf ein Problem. Das Problem ist mit DropShadowPanel. Ich habe das Problem gemeldet

So brauche ich eine Alternative zum Erstellen eines Rahmens für den Text im TextBlock.

Als Referenz ich Text wie folgt aussehen wollen:

Answer 1

HINWEIS: Windows Anniversary Update (10.0.14393.0) wird benötigt, um diesen Effekt korrekt zu unterstützen.

UWPCommunityToolkit repariert dieses issue für DropShadowPanel mit einem Update, aber wir können das Problem manuell beheben, indem wir 'HorizontalAlignment = "Left"' für DropShadowPanel hinzufügen.

Also alles, was wir tun müssen, ist

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

Überprüfen Sie auch hier für diesen Link, habe es alles, was Sie brauchen, und noch mehr:

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

Answer 3

Da Sie ein Problem mit dem DropShadowPanel haben, denke ich, dass Sie einen Schatten für den Text, nicht einen Rahmen möchten.

Wenn das der Fall ist, können Sie folgendes tun:

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

Dies wird einen Schatten-Effekt.

EDIT

Ich glaube, ich habe, was Sie wollen. Sie benötigen noch zwei TextBlock in Ihrem 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> 

Dann müssen Sie den folgenden Code an 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); 
} 

Das Ergebnis wirklich wie Ihr Beispiel aussieht:

Answer 4

Sie brauchen nicht einmal das Gitter um sie hinein zu setzen. Setzen Sie einfach den TextBlock in eine Grenzkontrolle:

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

Das sollte den Trick tun.