Search code examples
wpfxamlsilverlighttextblock

How to TextWrap a TextBlock within a width Auto Column?


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:


Solution

  • 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>