MUI has moved to GitHub

Go to GitHub. This documentation is no longer maintained

My first Modern UI app using templates

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. 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 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) Compile and run the application. You should see the following window;

modernui.template.png

3) 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

additemdialog.png

4) Reference the new page in the main menu. Open the 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) Compile and run the application. In the main menu select the my page option. You should see the following window;

modernui.mypage.png

And we're done. It is that easy to create a new Modern UI application project and add pages using the templates found in the Visual Studio extension. Reference the new pages by adding links to the ModernWindow.MenuLinkGroups.

Last edited Feb 9, 2015 at 2:05 PM by kozw, version 12

Comments

FuriousRage Dec 2, 2014 at 1:32 PM 
Hi, how do i make that top menu settings etc? I havent find an example. Thanks.

SmallSpeak Oct 11, 2014 at 8:44 AM 
@peah You shoule use version 4.0.

jimmy1103 Sep 12, 2014 at 8:05 PM 
Is there a vb.net version of this template.

peah Nov 8, 2013 at 3:39 AM 
Can I use it in Powerbuilder or VS 2010?

imatong May 13, 2013 at 2:32 PM 
To set your default page, I think you should set the page to ContentSource attribute in the ModernWindow element

<mui:ModernWindow x:Class="YourClass" ... ContentSource="YOURDEFAULTPAGE" ... />

kozw Apr 30, 2013 at 9:44 PM 
Your pages need to have a unique uri, otherwise the menu can't properly sync. To specify the default page, set the ModernWindow.ContentSource property.

fun_vikas Apr 25, 2013 at 7:34 PM 
How can I disable back button at the top? set default links and default group to show on startup?

fun_vikas Apr 25, 2013 at 7:22 PM 
Created:
<mui:LinkGroup DisplayName="welcome1">
<mui:LinkGroup.Links>
<mui:Link DisplayName="home1" Source="/Pages/Home.xaml" />
<mui:Link DisplayName="my page1" Source="/Pages/BasicPage.xaml" />
</mui:LinkGroup.Links>
</mui:LinkGroup>

<mui:LinkGroup DisplayName="welcome2">
<mui:LinkGroup.Links>
<mui:Link DisplayName="home2" Source="/Pages/Home.xaml" />
<mui:Link DisplayName="my page2" Source="/Pages/BasicPage.xaml" />
</mui:LinkGroup.Links>
</mui:LinkGroup>

When I compile the program, default link that comes selected is mypag1.... how can I change this to default to home1?