Xaml TextBlock set round corner

Question

I am trying to set rounded corner of TextBlock in xaml. But there is no such property.

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

How can I set rounded corner of TextBlock. And also want to set Background color of TextBlock.

Dennis · Accepted Answer · 2018-07-05T05:58:14.227

58

Use Border:

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

edited Jul 05 '18 at 05:58

answered Aug 21 '13 at 05:49

Dennis

34,925
9
72
134

2

...And what happens when TextBlock has a diferent background color (not transparent) that it is not the same as border background color? In this case I think TextBlock corners will not appear as rounded... – Ralph Jan 05 '19 at 19:48

score 5 · Answer 2 · answered Sep 06 '13 at 12:14

5

for that use the Border element as a parent of textBlock as like,

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

you already got it. :)

answered Sep 06 '13 at 12:14

Nikhil Prajapati

946
1
12
29

1

As said to Dennis, what happens when TextBlock has a diferent background color (not transparent) that it is not the same as border background color? In this case I think TextBlock corners will not appear as rounded. So in this case, how do you face this problem? – Ralph Jan 05 '19 at 19:49

score 2 · Answer 3 · answered Aug 21 '13 at 05:47

TextBlock do not have such property, however you can do it like this using Rectangle's RadiusX and RadiusY property by binding the width and height of Rectangle to Textblock Width and height.

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

Xaml TextBlock set round corner

3 Answers3

Linked