WPF grid layout bug

1
votes

In the WPF grid below, the middle column is not 6. Text B is all the way to the right instead of 6 away from Text A. I have tried * instead of Auto for the other columns but the result is the same.

How do I make the middle column 6? Is there a workaround? Why is it happening? Is it intended behaviour or a bug?

I make my grids this way so that I don't have to set a margin on every element.

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

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="6" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBlock Grid.ColumnSpan="3" Grid.Column="0" HorizontalAlignment="Left">xxxxxxxxxxxxxxxxxxxxxxxxxxxx</TextBlock>
        <TextBlock Grid.Row="2">Text A</TextBlock>
        <Rectangle Fill="YellowGreen" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Row="2" Grid.Column="2"  Background="LightCoral">Text B</TextBlock>
    </Grid>
</ScrollViewer>

Note: My window width is Auto.

Edit: Using @flq's solution but added a scrollviewer with horizontal scrolling, the problem is back. It's probably the same reason as why the solution doesn't show properly in the designer, something to do with WPF not knowing how to calculate widths without a constraining width.

3
wpflayoutgrid
try putting asterisks around the 6 within the quotes instead of just "6" i think that should fix it - Rachel Gallen
I take it back, just tried it out and it right-aligns the second column to the spanned text, expanding the middle column... - flq
@flq Clarification - Text B is all the way to the right instead of 6 away from Text A. - user868538

3 Answers

2
votes

I cannot confirm that setting the third column to * does not work. With the following XAML:

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

  </Grid.ColumnDefinitions>

  <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="6" />
      <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <TextBlock Grid.ColumnSpan="3" Grid.Column="0" HorizontalAlignment="Left">xxxxxxxxxxxxxxxxxxxxxxxxxxxx</TextBlock>
  <TextBlock Grid.Row="2">Text A</TextBlock>
  <Rectangle Fill="YellowGreen" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Stretch" />
  <TextBlock Grid.Row="2" Grid.Column="2"  Background="LightCoral">Text B</TextBlock>
</Grid>

I get this:

screenshot

1
votes

I think you want to use "*" on the other columns that are not a fixed length

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

enter image description here

0
votes

How do I make the middle column 6? Is there a workaround?

Solved by setting a MaxWidth inside the ScrollViewer (I used the largest double value).

Why is it happening? Is it intended behaviour or a bug?

In a ScrollViewer (or the designer), there is no maximum width. Somewhere in the layout calculations it is assigning the column width as 6 + *.

I think ultimately it is a bug because the column width can be calculated without needing a max width (it is specified as a fixed value and does not even need to be calculated).

<ScrollViewer HorizontalScrollBarVisibility="Auto">
    <Grid MaxWidth="1.79769E308">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="6" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="6" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBlock Grid.ColumnSpan="4">xxxxxxxxxxxxxxxxxxxxxxxxxxxx</TextBlock>
        <TextBlock Grid.Row="2">Text A</TextBlock>
        <Rectangle Fill="YellowGreen" Grid.Column="1" Grid.Row="2" />
        <TextBlock Grid.Row="2" Grid.Column="2" Background="LightCoral">Text B</TextBlock>
    </Grid>
</ScrollViewer>

This is the result