Question

I have the following markup:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <TextBlock x:Name="Col1" Text="Text1" Grid.Column="0" />
    <TextBlock x:Name="Col2" Text="Text12" Grid.Column="1" />
</Grid>

If I put a lot of text in Col1 it exceeds the screen and Col2 could not be seen at all. I would like to change that behavior such that if there’s too much text in Col1 then it’s width gets reduced so that Col2 could be fully seen.

On the other hand if I change markup to this:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <TextBlock x:Name="Col1" Text="Text1" Grid.Column="0" />
    <TextBlock x:Name="Col2" Text="Text12" Grid.Column="1" />
</Grid>

Here are images the illustrate how I want TextBlocks to behave:

Combined width of two TextBlocks is smaller than screen so they go one after another.

First Text block is very long so it is cropped in order to contain second TextBlock within screen.

Then everything is OK when Col1 has a lot of text but when the amount of text is small there is a gap between Col1 and Col2. What should I do to get desired behavior in both situations?

Answer 1

Revised;

<Grid HorizontalAlignment="Left">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>    
    <TextBlock x:Name="Col1" Text="Text1" />
    <TextBlock x:Name="Col2" Text="Text12" Grid.Column="1" TextWrapping="Wrap" />
</Grid>

Then Keep in mind to limit their overall size this would be placed in a parent panel container like another Grid