Skip to content

Flexible Column Layout (Master-Detail) Page

A Flexible Column Page is a term for a Page that contains a Flexible Column Layout.

The control will always render as a full screen control taking over the entire space of the page content. If Flexible Column Layout page has no title, no action bar item, and is the first page of application, the action bar is hidden.

Behavior in Tablet

Flexible Column Layout control can render 2 columns in the page. This is usually used as a Master-Detail floor plan for the page. In StartColumn, a page with list can be rendered. When an item of list is selected, its detail can be rendered as a page in EndColumn. Each column's content is rendered as a page with an action bar.

Each column can also manages its own page navigation stack. When a "Inner" type navigation is triggered in a column, the page is rendered within this column. Cross type navigation triggered in any column renders page to EndColumn.

StartColumn is a must in definition of Flexible Column Layout page. EndColumn is optional in definition. When EndColumn has no page rendered, it is hidden, and StartColumn takes the entire space of the page content.

Behavior in Phone

Flexible Column Layout control only renders one column in the page, which takes the entire space of the page content. Normally, navigation triggered in the column renders page in the column, unless it is Outer type navigation.

Usage

Flexible Column Layout control should be used as the only control of a page. Most of other controls can be used in the page of a Flexible Column, except below combination scenarios.

Unsupported combination:

  • Flexible Column Layout page inside a Flexible Column
  • Bottom Navigation page inside a Flexible Column
  • Flexible Column Layout page inside a tab of Bottom Navigation Page
  • Flexible Column Layout page inside a tab of Tabs Page

Last update: October 20, 2020