A layout defines the size of the application window and the basic arrangement of display components in the runtime application. Be sure to plan how you want to use displays. For example, consider whether you want a menu bar, toolbar, or other elements to always display at the top of your application window. 

You may need only one layout to handle the information in the application.

The last display listed in the Layout tab is the one that is replaced when you change the display. For example, new projects include a default layout called Startup. The MainPage display that is listed last is the default area that changes when you tell the application to open a display.



To create a layout:

  • Go to Edit > Displays > Layouts.
  • Click New.
  • Enter or select information, as needed.

Column

Description

Layout name

Enter a name for the layout.

Layout

Select the layout type:

  • DockPanel—Select to position displays relative to the layout and other displays.
  • Canvas—Select to position displays in an absolute position by entering the position in WPF units (device-independent pixels; one WPF = 1/96 inch).

Description

Enter a description of this layout.

  • Click OK.
  • At the top right of the Layouts tab, enter or select any needed information.

Column

Description

Width

Enter the width, in WPF units (device-independent pixels), of the layout. This is the width of the runtime application.

Height

Enter the height, in WPF units (device-independent pixels), of the layout. This is the height of the runtime application.

Background

Set the background color of the layout. This is the background color of the runtime application

  • Click Add Row to add a row for a display. The displays you add here are the first displays the layout uses.

  • Enter or select information, as needed.

Column

Description

Page

Select a display you want to include in the layout. Only page displays are available for use in a layout.

Docking

Select the docking location for this display:

  • Left
  • Top
  • Right
  • Bottom

HorizontalAlign

Select the horizontal alignment for this layout:

  • Left
  • Center
  • Right

VerticalAlign

Select the vertical alignment for this layout:

  • Top
  • Center
  • Bottom

Margins

Set the margin for this layout.

Left

Set the left position of the layout

Top

Set the top position of the layout

  • No labels