[UWP][XAML] Grid greedy column with trailing columns still visible

Boarder2 1 Reputation point
2020-07-27T21:26:31.043+00:00

Using the following code

	<StackPanel HorizontalAlignment="Stretch" Orientation="Vertical">  
		<Grid>  
			<Grid.ColumnDefinitions>  
				<ColumnDefinition Width="*" />  
				<ColumnDefinition Width="Auto" />  
			</Grid.ColumnDefinitions>  
			<TextBlock TextTrimming="CharacterEllipsis">  
				<Run Text="This could be a lot of text blahb lahblakdjfalkdfj aldkfj adfkj asdlfkajdlfkamjsdlfkaj dsflkajd flakdjflakdfjaldkjf aldkjf alkdjflakdjflakdjf aldkfj asdfk jasdfk jsflka jsdfas end of maybe a lot of text." />  
			</TextBlock>  
			<TextBlock Grid.Column="1" Foreground="Yellow">  
				<Run Text="This needs to immediately follow but be fully visible." />  
			</TextBlock>  
		</Grid>  
		<Grid>  
			<Grid.ColumnDefinitions>  
				<ColumnDefinition Width="*" />  
				<ColumnDefinition Width="Auto" />  
			</Grid.ColumnDefinitions>  
			<TextBlock TextTrimming="CharacterEllipsis">  
				<Run Text="Not a lot of text." />  
			</TextBlock>  
			<TextBlock Grid.Column="1" Foreground="Yellow">  
				<Run Text="This needs to immediately follow but be fully visible." />  
			</TextBlock>  
		</Grid>  
	</StackPanel>  

Results in
13789-image.png

I need the second column in the grid to immediately follow the first, like the second line here
13956-image.png

The behavior in the screenshot above can be achieved by swapping the ColumnDefinition Width Auto and * assignments, but the first column will be greedy completely disregarding the window or control bounds. This causes the yellow text to be pushed outside the viewable area.

Is there any way to achieve this that doesn't directly involve setting the MaxWidth property of the first TextBox in the grid? What I have here is a very simplistic example of the behavior I desire. In reality this is happening in a virtualized ListView and it's not desirable to have to set that every time an item is being drawn on the screen.

Universal Windows Platform (UWP)
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Richard Zhang-MSFT 6,936 Reputation points
    2020-07-28T05:31:25.023+00:00

    Hello,

    Welcome to Microsoft Q&A.

    This behavior is determined by the nature of Grid. Auto means that the column width is determined by the internal elements, and * means occupy the remaining space.

    So when a longer text is in a column which width is Auto, it will "overflow", and because there is no remaining space, the column which width is * will not be displayed.

    If you want to avoid this, you need to set MaxWidth. It can be set on TextBlock or ColumnDefinition, like:

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MaxWidth="300"/>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock TextTrimming="CharacterEllipsis" TextWrapping="Wrap">
             <Run Text="This could be a lot of text blahb lahblakdjfalkdfj aldkfj adfkj asdlfkajdlfkamjsdlfkaj dsflkajd flakdjflakdfjaldkjf aldkjf alkdjflakdjflakdjf aldkfj asdfk jasdfk jsflka jsdfas end of maybe a lot of text." />
        </TextBlock>
        <TextBlock Grid.Column="1" Foreground="Yellow">
             <Run Text="This needs to immediately follow but be fully visible." />
        </TextBlock>
    </Grid>
    

    Setting TextWrapping=True can make the TextBlock wrap when reaching the maximum width to ensure the display of the text.

    Thanks.