SenlyCamile
Topic Author
Posts: 12
Joined: 15 Jan 2021, 07:38

AutoSizeMode property

06 Mar 2021, 05:49

Hello,
Is there a AutoSizeMode property on panel in noesis? And how to set it in xaml.
I wanna to make the panel grow or shrink to fit it’s content not only grow.
 
steveh
Posts: 32
Joined: 07 Oct 2019, 12:50

Re: AutoSizeMode property

06 Mar 2021, 13:34

Hey,

So there are different answers depending on your container (panel) used.

TLDR: If you're using a grid you want to set horizontal / vertical alignment to a different value other than stretch.

Longer answer:

So by default panels have the following settings applied:
  • HorizontalAlignment and VerticalAlignment is set to stretch. The stretch setting basically means "take as much room as you can". The amount of room it can fill depends on the width / height properties.
  • Width / Height are auto which means you don't provide any explicit size for it. During the measure pass this will treat the panel as being potentially infinite sized. This means that rather than the panel determining its own size, the size is just stated to take up as much room as possible and this relies on the parent to constrain the bounds.
  • The default behaviour essentially means it will "size to parent".
  • Note that different panels behave slightly differently, this is not always the case depending on the panel type. For example, stack panels work slightly differently. However, this should hopefully give you a reasonable understanding of what the different settings do.
So, if you want to change the panel to take up as little space as possible, all you need to do is change the alignment settings. Now, during the measure pass instead of taking up a potential infinite space, the space is limited to the maximum of the panel's size and the child's size. This essentially turns it into a "size to child" mode. I've written a quick example on XAMLToy here:

https://www.noesisengine.com/xamltoy/96 ... 298c7a54f8

Now, this all works for grids, but as I alluded to earlier, different panel types work slightly differently.
  • Stack panels will always lay out the children based on their computed size. The parent just defines the constraints and the children will just stack next to each other in the orientation defined by the stack panel. So stack panels will always look like it "sizes to children", even if it's really not, and that's just because the layout of the children simply stack (as the name suggests). If it goes outside the bounds of the parent then it will just be clipped. There is not really an idea of stretching a stack panel as that does not affect the layout of the children.
  • Dock panels behave like a mixture of a grid and a stack panel. They allow you to specify where the children align themselves to (left, right, top or bottom). By default, the last child in a dock panel will fill whatever space remains. By default these behave like a "size to parent" panel.
  • Wrap panels and uniform grids behave slightly differently. I've found fewer use cases for these. Your typical "bread and butter" panels will be stack panels, dock panels and grids. I've found that those panels make up like 95% of our panels in our game, so as long as you're comfortable using those 3 you should be fine.
 
User avatar
sfernandez
Site Admin
Posts: 2109
Joined: 22 Dec 2011, 19:20

Re: AutoSizeMode property

08 Mar 2021, 10:39

Thanks a lot @steveh for this detailed answer, I'm sure it helps understand how panels layout process work. In case anyone needs more info about layout and containers we have a tutorial covering those topics: https://www.noesisengine.com/docs/Gui.C ... orial.html

Who is online

Users browsing this forum: No registered users and 2 guests