Using predefined page layouts

Modern UI for WPF comes with a predefined set of page layouts. A Modern UI 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 2012. Read 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>

Layout.Basic.png

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>

Layout.Split.png

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>

Layout.List.png

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>

Layout.Tab.png

Last edited Aug 10, 2014 at 7:40 PM by kozw, version 15

Comments

Nassim1980 Jan 26 at 2:36 PM 
Hello, I had a question about ModernTab Layout="List", how can I add Access Keys to the links on the left side?

dgagliano Oct 13, 2014 at 4:50 PM 
Here is how to do that.
public static void RetrieveSQLCommandModernTab(string _sqlSelectTxt, System.Data.CommandType _commandType, string _tableName, string _colDisplay, string _colValue, ModernTab _tab)
{
string strConnection = "Server=[servername];Database=[database];Trusted_Connection=True;";
SqlConnection sqlConnection1 = new SqlConnection(strConnection);
SqlCommand cmd = new SqlCommand();
SqlDataReader dr;
FirstFloor.ModernUI.Presentation.Link item;
try
{
// Command Text
sqlConnection1.Open();

cmd.CommandText = _sqlSelectTxt;
cmd.CommandType = _commandType;
cmd.Connection = sqlConnection1;
dr = cmd.ExecuteReader();
while (dr.Read())
{
item = new FirstFloor.ModernUI.Presentation.Link();
item.DisplayName = dr[_colDisplay].ToString();
_tab.Links.Add(item);
}

sqlConnection1.Close();
}
catch (Exception ex)
{
throw ex;
}

shrek0208 May 22, 2014 at 8:18 AM 
Same question with Brett1981

Brett1981 Jul 1, 2013 at 4:02 PM 
How can you Dynamically add a Tab - for example on Form1 Select item from Grid this opens the Tab Menu with a new tab?