边框大小无法调整为文本块 [英] Border fail to size to Textblock

问题描述

试图解决另一个问题中描述的问题:

In an attempt to go around the problem described in this other question: Segoe UI Symbol smiley is sometimes colorful, sometimes not (WP8.1 + XAML), I tried the following: wrapping my Textblock with a Border element with rounded-corners (high CornerRadius). This way I can change the background color of the border and it looks pretty much as if the smiley had a background color itself... almost.

仍然有一个小陷阱，我无法绕开我的头:TextBlock的高度似乎超出了我的控制范围.我要显示的"Segoe UI Symbol"(笑脸)的行为就像它具有某种padding一样，导致边框无法准确地适合图标.我最终在圆形笑脸周围出现了某种椭圆形的形状……不完全是我的初衷.

There is still a small gotcha I cannot wrap my head around: the height of the TextBlock seems to be out of my control. The "Segoe UI Symbol" (smiley) I want to display acts as if it had some kind of padding that prevented the border to fit the icon exactly. I end up with some kind of oval shape around my round smiley... not quite what I had in mind.

我将XAML剥离了本质，并在一个新的空白应用程序中使用了它(只需将其粘贴到一个新的应用程序中，您应该会在下面看到确切的屏幕截图):

I stripped the XAML to its bare essence and played with it in a new blank app (just paste this in a new app, you should see exactly the screenshot below):

<Grid>
    <Border Background="Red" Grid.Column="0" 
            CornerRadius="50" BorderThickness="0" 
            HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="&#x1F620;" 
                   FontFamily="Segoe UI Symbol" FontSize="50" 
                   HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Border>
</Grid>

这给您:

知道我可以在此处进行哪些调整吗?

推荐答案

问题是文本(图释)的高度和宽度不同.您可以通过将自定义样式应用于文本框并更改其填充，直到获得所需的结果来进行自定义修复.这不是一个动态的解决方案，但是如果图标的大小是标准的，那么我认为该解决方案就可以使用.

The problem is that the text (emoticon) has not the same height and width. You can do a custom fix by applying a custom style to the textbox and change its padding until you achieve the result you want. It's not a dynamic solution but if the size of the icon is standard this solution i think will work.

首先创建一种新样式:

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="CustomTextBlockStyle" TargetType="TextBlock">
        <Setter Property="Padding" Value="10,0,10,3"/>
    </Style>
</phone:PhoneApplicationPage.Resources>

然后将其应用于TextBlock

<Grid>
    <Border Background="Red" Grid.Column="0" 
CornerRadius="50" BorderThickness="0" 
HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="&#x1F620;" 
       FontFamily="Segoe UI Symbol" FontSize="50" 
       HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource CustomTextBlockStyle}" />
    </Border>
</Grid>

结果:

如果您想要这样的东西:

尝试同时使用填充和边距

Try to play around with padding and margin too

<Style x:Key="CustomTextBlockStyle" TargetType="TextBlock">
        <Setter Property="Margin" Value="-2,-13,-2,-9"/>
        <Setter Property="Padding" Value="0,0,0,0"/>
</Style>

这篇关于边框大小无法调整为文本块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！