Wide columns pushing content off XAML Grid

Question

I'd like to show a Grid with three columns, where each column fills the available space but not so that they push subsequent columns off the end of the grid. Each column needs to have at least some of its content (defined by MinWidth) visible.

This is what I'm after:

___________________________________________
|                      |         |        |
|very-wide-first-col...|second...|third...|
|______________________|_________|________|

This is what I get:

___________________________________________
|                           |             |
|very-wide-first-column-text|second-column|-text|third-column-text
|___________________________|_____________|

Here's my code:

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
  <TextBlock Grid.Column="0" Text="very-wide-first-column-text" TextTrimming="CharacterEllipsis"/>
  <TextBlock Grid.Column="1" Text="second-column-text" TextTrimming="CharacterEllipsis"/>
  <TextBlock Grid.Column="2" Text="third-column-text" TextTrimming="CharacterEllipsis"/>
</Grid>

No combination of MinWidth and MaxWidth seems to achieve the desired layout - it seems they don't work with Auto and proportional sizing isn't what I want. I also tried using a DockPanel but that didn't help.

Remove the Width="Auto" in the first ColumnDefinition. Is the result what you are looking for? — Justin XL
No, because then if the second column gets too wide, it pushes the first column's content off the left of the grid. — John Chapman
If this is the case, that means the total width of all three goes over the width of the grid. How do you expect to show them? — Justin XL
I want them to get truncated so the grid shows at least the width specified by each column's (or its content's) MinWidth. — John Chapman

pumpkinszwan pumpkinszwan · Accepted Answer · 2014-12-23T11:02:06

Use stars.

Width="2*" for the first column Width="1*" for the other two.

This means that the total width available is divided evenly between the total of the numbers (in this example 4 - with the first column being 2/4 and the others each being 1/4 of the available width).

The total width is determined by whatever container the columns are in (the grid).

Wide columns pushing content off XAML Grid

1 Answers