Home

Creating a Modern UI app from scratch using project and item templates. Before we begin, make sure you have installed the Modern UI for WPF Templates extension for Visual Studio 2012 and 2013.

• Download and install the VSIX extension from the Visual Studio gallery

or

• In Visual Studio, open the extension manager (Tools > Extensions and Updates)
• Select Online > Visual Studio Gallery and search for 'modern ui'
• Select Modern UI for WPF Templates and click Download to download and install.

1) Create app

Create a new project in Visual Studio and select the new Modern UI WPF Navigation Application template in Visual C# > Windows.

The application template includes a MainWindow with two pages; Home.xaml and Settings.xaml. The settings page provides some theme configuration options. Pages are typically stored in the Pages project folder.

2) Run

Compile and run the application. You should see the following window;

3) Add a page

Add a new basic layout page by right-clicking the Pages folder and select Add > New Item... In the Add New Item dialog select the Modern UI for WPF list and then select Basic Page. Rename the item to BasicPage.xaml and click Add.

4) Update navigation

Reference the new page in the main menu. Open MainWindow.xaml and locate the mui:ModernWindow.MenuLinkGroups element defining the main menu. Add a new Link to the LinkGroup named 'welcome' as is shown below;

<mui:ModernWindow.MenuLinkGroups>
  <mui:LinkGroup DisplayName="welcome">
    <mui:LinkGroup.Links>
      <mui:Link DisplayName="home" Source="/Pages/Home.xaml" />
      <mui:Link DisplayName="my page" Source="/Pages/BasicPage.xaml" />
    </mui:LinkGroup.Links>
  </mui:LinkGroup>
  ...
</mui:ModernWindow.MenuLinkGroups>

5) Run

Compile and run the application. In the main menu select the my page option. You should see the following window;