Basic Layout and Panel

Layout Properties

Every widget has following properties related to the layout:

Name	Type	Default	Description
Left/Top	int	0	X/Y Addition
Width/Height	int?	null	Width/Height of the widget, if set to null, then it is automatically calculated
HorizontalAlignment/VerticalAlignment	enum	Depends on a widget, it's either Stretch or Left/Top	How control is horizontally/vertically aligned in the container
PaddingLeft/PaddingTop PaddingBottom/PaddingRight	int	0	Padding
GridPositionX/GridPositionY	int	0	Position in the grid
GridSpanX/GridSpanY	int	1	Span in the grid

Note. Properties which names start with 'Grid' are used only in the Grid container.

Panel

Panel is simple container. Following MML demonstrates usage of layout properties with it:

<Project>
  <Panel>
    <TextBlock Text="Positioned Text" Left="50" Top="100" />
    <TextButton Text="Padded Centered Button" PaddingLeft="8" PaddingRight="8" PaddingTop="8" PaddingBottom="8" HorizontalAlignment="Center" VerticalAlignment="Center" />
    <TextBlock Text="Right Bottom Button" Left="-30" Top="-20" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
    <TextButton Text="Fixed Size Button" Width="110" Height="80" PaddingRight="1" />
  </Panel>
</Project>

It would result in following UI: