Skip to content

Basic Layout and Panel

Jump to bottom Edit New page
Roman Shapiro edited this page Jul 30, 2019 · 20 revisions

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" />
  </Panel>
</Project>

It would result in following UI:

Add a custom footer
Add a custom sidebar
Clone this wiki locally