Grid doesn't layout according to the ColumnDefinition

06 Aug 2021, 08:52

Hi,

In the code below, blue column width does not become the specified value. And, Text is cut off.
This is a different behavior than WPF.

<Grid Grid.Row="1" Width="100" Height="100">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="70"/>
    </Grid.ColumnDefinitions>

    <Border Grid.Column="0" Background="Gray"/>
    <Border Grid.Column="1" Background="Blue"/>

    <TextBlock Grid.ColumnSpan="2" Background="Green" Height="50"
                TextWrapping="Wrap"
                FontSize="14"
                Text="123456789123456789"/>
  </Grid>
</Grid>

By the way, if you delete the TextBlock with the above code, it will be displayed as intended.
Do you know how to work around this issue?

09 Aug 2021, 13:22

This is a bug, could you please report it in our bugtracker?
Unfortunately I can't find a workaround for that, the only way that pixel column is correctly sized is when star column requires more size:

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

    <Border Grid.Column="0" Background="Gray"/>
    <Border Grid.Column="1" Background="Blue"/>

    <TextBlock Grid.ColumnSpan="2" Background="Green" Height="50"
                TextWrapping="Wrap" FontSize="14" Text="123456789123456789"/>
</Grid>

10 Aug 2021, 03:20

Thank you, I reported the issue here: https://www.noesisengine.com/bugs/view.php?id=2078

fnlombard · 07 Sep 2021, 15:10

Hello,

I have encountered a similar issue and would like to know whether it is the same bug. It occurs when a grid layout has a child element with a RowSpan, and a ColumnDefinition has a star width. This element does not span across rows. Instead, it is placed in one of the rows and overwrites the RowDefinition's height. I replicated the bug using the Noesis XamlToy with the following code:

<Grid Grid.Row="0" Width="105" Height="105">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="5"/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="5"/>
      <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    
    <Border Grid.Column="0" Grid.Row="0" Background="Blue" Height="35"/>
    <Border Grid.Column="0" Grid.Row="2" Background="Blue" Height="35"/>

    <Border x:Name="SpanningElement" Grid.Column="2" Grid.Row="0" Grid.RowSpan="3" Background="Red" Height="50" Width="35"/>
  </Grid>
</Grid>

This code produces the following layout:

: BrokenGridLayout.png (532 Bytes) Viewed 3737 times

The "SpanningElement" is placed in the second row, does not span rows, and overwrites the RowDefinition's height.

07 Sep 2021, 17:58

In that example we are producing the same output as WPF so I guess it is a limitation of the Grid layout algorithm.

But considering that your rows are set to Auto or Pixel, you can ignore them and just use a StackPanel to place the blue rectangles:

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

    <StackPanel VerticalAlignment="Center">
      <Border Grid.Column="0" Grid.Row="0" Background="Blue" Height="35"/>
      <Border Grid.Column="0" Grid.Row="2" Background="Blue" Height="35" Margin="0,5,0,0"/>
    </StackPanel>

    <Border x:Name="SpanningElement" Grid.Column="2" Background="Red" Height="50" Width="35"/>
  </Grid>
</Grid>

Could that work for you?

fnlombard · 08 Sep 2021, 17:34

Unfortunately not. This is not an issue with Noesis 2.2.6, only with Noesis 3.1.0.

The StackPanel would then require a vertical separator to keep the layout consistent. It will become convoluted if there are more rows and columns.

08 Sep 2021, 18:17

As I said we produce the same result as WPF in Noesis 3.0 and 3.1. We do that so what you design in Blend is what you get in Noesis.

fnlombard · 09 Sep 2021, 07:32

That makes sense, thank you for your informative feedback.

Grid doesn't layout according to the ColumnDefinition

Grid doesn't layout according to the ColumnDefinition

Re: Grid doesn't layout according to the ColumnDefinition

Re: Grid doesn't layout according to the ColumnDefinition

Re: Grid doesn't layout according to the ColumnDefinition

Re: Grid doesn't layout according to the ColumnDefinition

Re: Grid doesn't layout according to the ColumnDefinition

Re: Grid doesn't layout according to the ColumnDefinition

Re: Grid doesn't layout according to the ColumnDefinition

Who is online