0

A single word doesn't wrap to a new line even though there is no space to fit all of the word on the current line. Is there a way I can force it to do so? This is demonstrated on the left hand side image. When a whitespace is introduced the system will wrap how I want to to. See right hand side.

Left: "Email" text is displayed behind "Notification Channel", but split in two lines "Ema" and "il"; Right: "Email Or Phone" text is displayed below the "Notification Channel" text.

The XAML:

<DataTemplate>
    <Grid HorizontalAlignment="Stretch" Width="{Binding ElementName=SummaryStackPanel, Path=ActualWidth, UpdateSourceTrigger=PropertyChanged}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding Label}" Grid.Column="0" HorizontalAlignment="Left" TextWrapping="Wrap" />
        <TextBlock Text="{Binding Value}" Grid.Column="1" Margin="8,0,0,0" TextWrapping="Wrap" HorizontalAlignment="Right" TextAlignment="Right"/>
    </Grid>
</DataTemplate>

Edit: The problem with using a wrap panel is you can't align the content. Previously I didn't show this, but the values that don't need to wrap at all need to be right aligned. It appears that wrap panel doesn't allow you to align content out of the box WPF - How can I center all items in a WrapPanel?

Wrap Panel (left) Vs Grid (right)

enter image description here

brendan
  • 141
  • 5

1 Answers1

2

The same behavior is reproducible with one and multiple words. You use a Grid which has two columns. The horizontal space is divided between both. One TextBlock on the left, one on the right. Color the columns and you see that the space is honored by both. The TextBlock can only overflow in its own column, not another one.

Left: Red area containing text; Right: Green area containing wrapped text.

However, you could use a WrapPanel instead, so the whole TextBlock is moved down, when there is not enough space. After it is moved down and the available space decreases further, the text will start to wrap.

<WrapPanel  Width="{Binding ElementName=SummaryStackPanel, Path=ActualWidth, UpdateSourceTrigger=PropertyChanged}">
   <TextBlock Text="{Binding Label}" HorizontalAlignment="Left" TextWrapping="Wrap" />
   <TextBlock Text="{Binding Value}" Margin="8,0,0,0" TextWrapping="Wrap" HorizontalAlignment="Right" TextAlignment="Right"/>
</WrapPanel>

Compared to the approach with a Grid, the TextBlock is moved in this colored example.

Left: Red area containing text; Right: Green area containing text.

Top: Red area containing text; Bottom: Green area containing text.

thatguy
  • 21,059
  • 6
  • 30
  • 40
  • Hi @thatguy Thanks for the detailed response. I've updated my original question with some important information that I previously didn't think was going to be important – brendan Oct 26 '22 at 13:30