LayOut sample code question

General
1

Hi,

I am new here, just starting to learning Fuse…

Refer to the Layout sample code: https://www.fusetools.com/examples/layout

there are Grid with 3 Rows and 1 Column. the first Row (Row=“0”) is an Image the 2nd Row ( Row=“1” ) is a Grid with 1 Row and 3 Columns the 3rd Row ( Row=“2” ) is DockPanel

… 73° Sunday, March 23 …

my question is :

  1. if I move the code of Image(Row=“0”) before Grid(Row=“1”), why it can not display properly? 2) I am quite confus ‘DockPanel’ and ‘StackPanel’. Could you please explain when I need to use ‘DockPanel’, or ‘StackPanel’?

Thanks

Regards, Weigang

2

Hi!

  1. This specific example does some tricks. The reason for the ordering is that the 2nd Row (Row=“1”) should be blended on top of the Image (Row=“0”).

The Image on the 1st row (Row=“0”) also has RowSpan="2" which means that it covers both the 1st and 2nd Row.

The layer ordering in Fuse means that the element defined first (closest to the top in the .ux file) gets drawn over the next item. This is why the 2nd Row is defined before the 1st row, so that the text label can be blended on top.

I’m not sure if I would have used this specific way of implementing the layout myself, as the overlapping grid rows are a bit confusing, but it definitely works. :slight_smile:

  1. You can read more about the different panels here. There’s also an illustration to show the differences here.