Xaml TextBlock 设置圆角

Posted 2023-04-12

【中文标题】Xaml TextBlock 设置圆角

【英文标题】：Xaml TextBlock set round corner

【发布时间】：2013-08-23 08:29:32

【问题描述】：

我正在尝试在xaml 中设置TextBlock 的圆角。但是没有这样的属性。

<Grid x:Name="grdDis" Grid.Row="1">
        <TextBlock Text="Description" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Name="txtDescription" Margin="18,10,0,0" Height="128" Width="445"/>
</Grid>

如何设置 TextBlock 的圆角。还要设置TextBlock的背景色。

【参考方案1】：

使用Border:

    <Border Margin="5" Padding="5" BorderThickness="1" BorderBrush="Red" Background="AntiqueWhite" CornerRadius="10">
        <TextBlock Text="Lorem ipsum"/>
    </Border>

【讨论】：

...当 TextBlock 具有与边框背景颜色不同的背景颜色（不透明）时会发生什么？在这种情况下，我认为 TextBlock 角不会显示为圆角...

【参考方案2】：

为此使用 Border 元素作为 textBlock 的父元素 一样，

 <Border BorderThickness="1" BorderBrush="Black" Background="Green" CornerRadius="5">
    <TextBlock Text="Description"/>
</Border>

你已经明白了。 :)

【讨论】：

正如 Dennis 所说，当 TextBlock 具有不同的背景颜色（不透明）与边框背景颜色不同时会发生什么？在这种情况下，我认为 TextBlock 角不会显示为圆形。那么在这种情况下，你是如何面对这个问题的呢？

【参考方案3】：

TextBlock 没有这样的属性，但是您可以通过将Rectangle 的宽度和高度绑定到Textblock 的宽度和高度，使用 Rectangle 的 RadiusX 和 RadiusY 属性来做到这一点。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <TextBlock Name="textBlock" Padding="5,0" Text="This is my TextBlock" Height="30" Width="Auto" VerticalAlignment="Top"/>
        <Rectangle RadiusX="5" RadiusY="5" Width="Binding Width,ElementName=textBlock" Height="Binding Height,ElementName=textBlock" Stroke="White" StrokeThickness="3" VerticalAlignment="Top"/>
</Grid>