WPF Grid - Shrink one column on window resize to keep all content on screen

Question

I have a 5 column grid in WPF which displays some dynamic data. Columns 1,2 and 4 are fixed width as they are effectively labels, but 2 and 5 can be of different lengths.

Column 3 should wrap to make sure all content is shown but can expand to a maximum width of 390. But column 5 should remain on a single line. When I resize the window, everything must remain on screen without a horizontal scrollbar. The middle (3rd) column should shrink down to keep the 4th and 5th columns on screen.

Current behaviour: Column 3 will wrap when the contents expand beyond 390, but resizing the window will not cause this column to resize, but will cause column 5 then 4 disappear off screen.

Here's the code so far:

  <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
    </Grid.ColumnDefinitions>
    <Grid x:Name="ListItemControl"
          Grid.Column="0"
          MinHeight="50"
          Width="auto"
          VerticalAlignment="Top">
        <Border Background="LightBlue"
                Margin="1,0,1,1" />
        <Grid VerticalAlignment="Center"
              Margin="20,0,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40" />
                <ColumnDefinition Width="130" />
                <ColumnDefinition Width="*"
                                  SharedSizeGroup="col2" />
                <ColumnDefinition Width="150" />
                <ColumnDefinition Width="auto"
                                  SharedSizeGroup="col4" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition MinHeight="50" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Column="0"
                       Grid.Row="0"
                       Margin="0,10,0,10"
                       Text="Due" />
            <TextBlock Grid.Column="1"
                       Grid.Row="0"
                       Margin="0,10,10,10"
                       Text="Some Date" />
            <TextBlock Grid.Column="2"
                       Grid.Row="0"
                       Margin="0,10,30,10"
                       Text="There is some potentially long text here. This is a placeholder and should wrap."
                       TextWrapping="Wrap"
                       MaxWidth="390" />
            <TextBlock Grid.Column="3"
                       Grid.Row="0"
                       Margin="0,10,10,10"
                       Text="Who's responsible" />
            <TextBlock Grid.Column="4"
                       Grid.Row="0"
                       Margin="0,10,10,10"
                       Text="Name - could be a very long name" />
        </Grid>
    </Grid>
</Grid>

Any help greatly appreciated!

Natxo Natxo · Accepted Answer · 2016-05-20T14:27:08

Your ListItemControl Grid is inside another Grid with a single column, dont know the reason. Remove that parent Grid and you are done.

WPF Grid - Shrink one column on window resize to keep all content on screen

1 Answers