Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to TextWrap a TextBlock within a width Auto Column?

Tags:

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:

like image 829
King Chan Avatar asked Jun 03 '13 15:06

King Chan


1 Answers

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>
like image 149
Chris W. Avatar answered Sep 21 '22 10:09

Chris W.