How to TextWrap a TextBlock within a width Auto Column?

Question

Consider something as follows:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <TextBlock x:Name="WrapTextBlock" Grid.Column="0" Text="123 456 789 0123 4456 123  123  123  123 1 23  123 " TextWrapping="Wrap" />
    <TextBlock x:Name="NotWrapTextBlock" Grid.Column="1" Text="GGG" />
</Grid>

This XAML will allow WrapTextBlock text to be wrap, doing this, WrapTextBlock will take all the space and push NotWrapTextBlock to the right.

But what I want to do is to have WrapTextBlock take as less space as possible, pushing NotWrapTextBlock right after WrapTextBlock and fill the right side with empty space.

Which means the following:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock x:Name="WrapTextBlock" Grid.Column="0" Text="123 456 789 0123 4456 123  123  123  123 1 23  123 " TextWrapping="Wrap" />
    <TextBlock x:Name="NotWrapTextBlock" Grid.Column="1" Text="GGG" />
</Grid>

But the thing here is, now the text in WrapTextBlock wouldn't wrap anymore.

I mean something like follows:

When text is too long it requires to warp:

When text is short enough that doesn't requires to warp:

Chris W. · Accepted Answer · 2013-06-04T15:36:48.347

24

The reason is by defining your ColumnDefinition as Auto or * you have nothing to limit the size available for your TextBlock to consume. So it would be expected behavior for the Text to not Wrap. So you'll have to define a Width or MaxWidth on either the ColumnDefinition or the TextBlock directly. So for instance;

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" MaxWidth="50"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock x:Name="WrapTextBlock" Text="123 456 789 0123 4456 123  123  123  123 1 23  123 " TextWrapping="Wrap" />
        <TextBlock x:Name="NotWrapTextBlock" Grid.Column="1" Text="GGG" />
    </Grid>

Will give you your wrap, if you want to say instead only allow it to take for example say, 7% of the space the grid has to use, change the Width to something like;

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="0.07*"/>
  <ColumnDefinition Width="0.93*"/>
</Grid.ColumnDefinitions>

So the first column will take up 7% of the space available, and the right column will consume the rest. Hope this helps.

Edit Addition:

What you're showing pretty much aligns with your first snippet wherein the first column should push, the second one should only allow enough space for its content to show;

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <TextBlock x:Name="WrapTextBlock" Grid.Column="0" Text="123 456 789 0123 4456 123  123  123  123 1 23  123 " TextWrapping="Wrap" />
    <TextBlock x:Name="NotWrapTextBlock" Grid.Column="1" Text="GGG" />
</Grid>

edited Jun 04 '13 at 15:36

answered Jun 03 '13 at 15:44

Chris W.

22,835
3
60
94

1

This I understand, but this is restricting WrapTextBlock's column to only take up to contains width. What I don't want to see is there is empty space between WrapTextBlock and NotWrapTextBlock. And NotWrapTextBlock is not getting pushed to the rightmost. – King Chan Jun 03 '13 at 17:26
Sounds like a consideration for the `Grid` itself, if it has more space than necessary it's going to take it. Maybe a quick image of what you want, as opposed to what you get would help define it? – Chris W. Jun 03 '13 at 18:16
Edited at the bottom, your first snippet should do what you're thinking provided the Grid itself has a limited amount of space to invoke the TextWrapping – Chris W. Jun 04 '13 at 15:37
Ohhh, I figured out. I should wrap the Grid with another Grid. And just set this Grid's HoriontalAlignment="Left". It worked, thanks. (Haven't touch UI for too long.......) – King Chan Jun 04 '13 at 17:30
Good deal, glad you found your remedy. Cheers! – Chris W. Jun 04 '13 at 18:07
2

I don't think your first answer works - MaxWidth doesn't seem to wrap text. Have you tried this? – Nathan Phillips Mar 04 '16 at 13:33
1

@NathanPhillips This is a pretty old answer, but MaxWidth should pretty much always invoke wrapping (provided you have TextWrapping=Wrap set of course). I'd have to assume it's something specific to your scenario. If you'd like maybe share details in another question and we can take a look at the details. – Chris W. Mar 04 '16 at 14:22
@ChrisW. MaxWidth does not wrap the text. – Wobbles Dec 27 '17 at 16:49
@Wobbles howdy, as in the comment just previous of yours I'll have to assume it's something specific to your scenario. Having a set width should always invoke wrapping if you've declared TextWrapping="Wrap" as such. – Chris W. Dec 27 '17 at 17:08
@ChrisW. We arent using a set width, as the comment Nathan made says, we are looking to use `MaxWidth`. Setting the `Width` does in fact work, but that is not what I am looking for. – Wobbles Dec 27 '17 at 20:07
@Wobbles MaxWidth should also still invoke wrapping. I'd have to see the instance in which it's used to identify your culprit. – Chris W. Dec 28 '17 at 17:05

How to TextWrap a TextBlock within a width Auto Column?

1 Answers1

Linked