Page 1 of 1

Grid doesn't layout according to the ColumnDefinition

Posted: 06 Aug 2021, 08:52
by tkawa
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?

Re: Grid doesn't layout according to the ColumnDefinition

Posted: 09 Aug 2021, 13:22
by sfernandez
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>

Re: Grid doesn't layout according to the ColumnDefinition

Posted: 10 Aug 2021, 03:20
by tkawa
Thank you, I reported the issue here: https://www.noesisengine.com/bugs/view.php?id=2078

Re: Grid doesn't layout according to the ColumnDefinition

Posted: 07 Sep 2021, 15:10
by fnlombard
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
BrokenGridLayout.png (532 Bytes) Viewed 4071 times
The "SpanningElement" is placed in the second row, does not span rows, and overwrites the RowDefinition's height.

Re: Grid doesn't layout according to the ColumnDefinition

Posted: 07 Sep 2021, 17:58
by sfernandez
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?

Re: Grid doesn't layout according to the ColumnDefinition

Posted: 08 Sep 2021, 17:34
by fnlombard
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.

Re: Grid doesn't layout according to the ColumnDefinition

Posted: 08 Sep 2021, 18:17
by sfernandez
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.
gridspan.png

Re: Grid doesn't layout according to the ColumnDefinition

Posted: 09 Sep 2021, 07:32
by fnlombard
That makes sense, thank you for your informative feedback.