如何使圆形边框和背景颜色完全适合 TextBlock 中的文本范围？

Question

I've got the following XAML:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="140"/>
        <ColumnDefinition Width="60"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="{Binding Level}"/>
</Grid>

Level is basically a log level ( Verbose , Information , Warning , Error ).

First I would like to add a background colour but only to the text itself.

If I do <TextBlock Text="{Binding Level}" Background="Yellow"/> then I end up with something like this:

Verbose

I can workaround that by doing the following:

<TextBlock>
    <Run Text="{Binding Level}" Background="Yellow"/>
</TextBlock>

And now I correctly end up with:

Verbose

But now I would like to round the corners of just the text itself, and that... I can't find a way to do and would appreciate some help with.

I've tried adding a Border to the TextBlock but that creates a border around the whole TextBlock , not just the text inside it.

Answer 1

If you set an HorizontalAlignment and VerticalAlignment on a FrameworkElement like a Border or TextBlock , it will prevent it from stretching to its parent size (which is the default behavior ).

You can write the following XAML:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="140"/>
        <ColumnDefinition Width="60"/>
    </Grid.ColumnDefinitions>
    <Border Background="Yellow" CornerRadius="5" HorizontalAlignment="Left" VerticalAlignment="Top">
        <TextBlock Text="Hello"/>
    </Border>
</Grid>

And the Border only takes the space needed to fit its child TextBlock .