Home > Back-end >  Vertical alignment of Label inside TextBlock is wrong
Vertical alignment of Label inside TextBlock is wrong

Time:02-10

In a WPF popup window that I display to the user I want to put a text that is bound to a variable inside a block of text. I've tried to do so by putting a <Label> inside a <TextBlock>. However, this leads to alignment problems, see markup and picture below. I wonder how I can get the text in the Label to align vertically with the text in the TextBlock, or if there is a better solution?

I could put the entire text in a variable, but then I don't know how to get <Bold> formatting for part of the text.

<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap"
 VerticalAlignment="Top" Height="99" Width="339" Grid.RowSpan="3">
    The user is <Bold>responsible</Bold> for 
    <Bold><Label Content="00" Padding="0"/></Bold> vehicles
</TextBlock>

Wrong alignment of label inside TextBlock.

CodePudding user response:

You can use the Text with databound run.


As a general note on the issue: The elements inside TextBlock should be inline elements. Here is an article that has links to other inline elements that could be useful to you, like span that allows for grouping other inline elements and applying styles or to them.

WPF has two fundamental base types, UIElement and ContentElement. While a TextBlock and Label are UIElements, the content of TextBlock are inlines, which are ContentElements. That is why the alignment is off, they serve very different purposes. You can read up more on the differences and concepts here:

  • Base Element APIs in WPF Classes
  • UIElement

    UIElement is a base class for WPF core level implementations building on Windows Presentation Foundation (WPF) elements and basic presentation characteristics.

  • ContentElement

    Provides a WPF core-level base class for content elements. Content elements are designed for flow-style presentation, using an intuitive markup-oriented layout model and a deliberately simple object model.

  • Flow Document Overview
  • Related