Modern UI for WPF open-source project (4): Use a predefined page layout

Modern UI for WPF uses a set of pre-defined page la S. A modern UI page is a user control that inherits control and is used to display content in the content area of the modern window. The page is often referenced in the modern Window Menu by using the modernwindow. menulinkgroups attribute. This article describes various la S and shows how to use them.

Tip: it is also useful to describe the page layout as the 2012 template of Visual Studio. For more information, see modern UI for WPF templates.

Basic Layout

The basic layout uses all possible content spaces. All required items are completed by setting the root style of the page to contentroot, which ensures proper content correction. Use a scrollviewer control to ensure that 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 content of the page into two columns. The splitleft and splitright of the resource provide the appropriate 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 feature provides a list option on the left of the page. The selected page is displayed in the modernframe on the right. Use the moderntab control and specify a list link. Make sure that moderntab. layout has been set to the 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 shows the tab project to the right of the page. It is used to complete the list layout on the left of the same moderntab control. The only difference is that the layout must be set to tab. You can use a tab to deploy on the home page. It has a basic, split, or list layout, as shown 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>