Predefined page layouts

MUI comes with a predefined set of page layouts. A MUI page is a UserControl derived control and is rendered in the content area of a Modern Window. Pages are typically referenced in the Modern Window menu using the ModernWindow.MenuLinkGroups property. This tutorial describes the various layouts and shows you how to use them.

Tip: the described page layouts are also available as item templates for Visual Studio. Learn more about the Modern UI for WPF Templates extension.

Basic layout

The basic layout uses all the available content space. All that needs to be done is to set the Style of the page root to ContentRoot, this ensures the content is properly aligned. Use a ScrollViewer control to ensure all content is accessible.

<Grid Style="{StaticResource ContentRoot}">
  <ScrollViewer>
    <StackPanel>
      <TextBlock Text="LOREM IPSUM" Style="{StaticResource Heading2}" />
    </StackPanel>
  </ScrollViewer>
</Grid>

Split layout

The split layout divides the page content into two columns. Resources SplitLeft and SplitRight provide the correct margins.

<Grid Style="{StaticResource ContentRoot}">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="6"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>

  <ScrollViewer Margin="{StaticResource SplitLeft}">
    .. left content ..
  </ScrollViewer>
  <GridSplitter Grid.Column="1" />
  <ScrollViewer Grid.Column="2 " Margin="{StaticResource SplitRight}">
    .. right content ..
  </ScrollViewer>
</Grid>

List layout

The list layout features a list selection on the left-side of the page and the selected page content is shown in a ModernFrame on the right. Use the ModernTab control and specify a list of links. Make sure the ModernTab.Layout is set to List.

<Grid Style="{StaticResource ContentRoot}">
  <mui:ModernTab SelectedSource="/Content/LoremIpsum.xaml#1" Layout="List">
    <mui:ModernTab.Links>
      <mui:Link DisplayName="Lorem Ipsum 1" Source="/Content/LoremIpsum.xaml#1" />
      <mui:Link DisplayName="Lorem Ipsum 2" Source="/Content/LoremIpsum.xaml#2" />
    </mui:ModernTab.Links>
  </mui:ModernTab>
</Grid>

Tab layout

The tab layout renders tab items at the right side of the page. It uses the exact same ModernTab control as the List layout, the only difference is that the Layout must be set to Tab. You can use the tab layout to host pages that have a basic, split or list layout as is demonstrated in the image below.

<Grid Style="{StaticResource ContentRoot}">
  <mui:ModernTab SelectedSource="/Content/LoremIpsum.xaml#1" Layout="Tab">
    <mui:ModernTab.Links>
      <mui:Link DisplayName="Lorem Ipsum 1" Source="/Content/LoremIpsum.xaml#1" />
      <mui:Link DisplayName="Lorem Ipsum 2" Source="/Content/LoremIpsum.xaml#2" />
    </mui:ModernTab.Links>
  </mui:ModernTab>
</Grid>