This project is read-only.

MUI has moved to GitHub

Go to GitHub. This documentation is no longer maintained

My first Modern UI app

Creating a Modern UI app manually from scratch. For a step-by-step tutorial on creating a Modern UI app using project and item templates see My first Modern UI app using templates

1) Get the latest ModernUI release and unzip its contents to disk or install the ModernUI.WPF package using NuGet.
2) Open Visual Studio and create a new WPF Application project
3) Add an assembly reference to FirstFloor.ModernUI.dll (for WPF4 projects you need to add an additional reference to Microsoft.Windows.Shell.dll).
4) Derive MainWindow from ModernWindow

Open MainWindow.xaml, add the ModernUI xmlns declaration and replace the Window element with mui:ModernWindow as shown below:
<mui:ModernWindow x:Class="MuiTest.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mui="http://firstfloorsoftware.com/ModernUI"
  Title="MainWindow" Height="350" Width="525">
</mui:ModernWindow>
Open The MainWindow.xaml.cs, add the ModernUI using and replace the Window base class with ModernWindow.
using FirstFloor.ModernUI.Windows.Controls;
public partial class MainWindow : ModernWindow {  ..  }
5) Open App.xaml and add the following resource dictionary references.

<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
  <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Choose ModernUI.Light.xaml for the light theme and ModernUI.Dark.xaml for the dark theme. Don't supply both at the same time!

Important: If you are using the WPF 4.0 version of ModernUI you need to add an empty Rectangle style to work around a bug in WPF, as shown below. The workaround is not needed for WPF 4.5

<Application.Resources>
<ResourceDictionary>
<!-- WPF 4.0 workaround -->
<Style TargetType="{x:Type Rectangle}" />
<!-- end of workaround -->
<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
  <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

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

ModernWindow.Empty.png

7) Go back to MainWindow.xaml and remove the <Grid></Grid content

Important: the ModernWindow.Content property is ignored, all content is rendered by specifying page links as is demonstrated below.

8) Let's define the main menu. Add the following menu link groups:

<mui:ModernWindow.MenuLinkGroups>
  <mui:LinkGroup DisplayName="group 1" >
    <mui:LinkGroup.Links>
      <mui:Link DisplayName="link 1" />
      <mui:Link DisplayName="link 2" />
      <mui:Link DisplayName="link 3" />
    </mui:LinkGroup.Links>
  </mui:LinkGroup>
</mui:ModernWindow.MenuLinkGroups>
9) Compile and run the application. You should see the following window;

ModernWindow.Menu.png

10) Let's add some actual content. Add a WPF UserControl named Page1

11) Open Page1.xaml and add the following content
<Grid Style="{StaticResource ContentRoot}">
  <TextBlock Text="Hello Modern UI!" />
</Grid>
The ContentRoot style ensures the content is correctly positioned on screen.

12) Go back to MainWindow.xaml and modify the first link so that it refers to Page1.xaml
<mui:Link DisplayName="link 1" Source="/Page1.xaml" />
13) Additionally add a ContentSource attribute to the ModernWindow element
<mui:ModernWindow ...
  ContentSource="/Page1.xaml"
 />
The ContentSource defines the page that is loaded on start. In above case, /Page1.xaml will be loaded upon startup.

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

ModernWindow.FirstPage.png

And that's it. You can now add additional groups and links in the MenuLinkGroups and refer to the various pages in your application. For further details on defining your MetroWindow content see the other tutorials.

Last edited Feb 9, 2015 at 3:05 PM by kozw, version 15

Comments

mdsabz Feb 2, 2015 at 2:47 PM 
Good Component.....Is it possible to load existing content through code....
Thanks
mdsabz

SmallSpeak Oct 11, 2014 at 8:51 AM 
@icelava I think is a problem of vs

surendermalik Feb 26, 2014 at 6:29 PM 
@Friesen Hi, I guess you forgot to define namespace prefix mui.
For example in following code 4th line define prefix mui.
<mui:ModernWindow x:Class="MuiTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mui="http://firstfloorsoftware.com/ModernUI"
Title="MainWindow" Height="350" Width="525">
</mui:ModernWindow>

Friesen Feb 22, 2014 at 7:25 PM 
It would be nice if this example worked in vs2013, but following instructions doesn't work this time around.

Friesen Feb 22, 2014 at 7:13 PM 
the namespace prefix "mui" is not defined.........

kitanddaniel Feb 12, 2014 at 4:23 AM 
Can I add more Buttons to the navigation? For example i would like to add the home button instead of the back arrow. Any ideas?

icelava Dec 27, 2013 at 6:38 AM 
Is it normal for Visual Studio designer surface to not reflect what is really supposed to be rendered?

MainWindow.xaml just shows a blank regular window in Visual Studio, and needs to be run in order for the modern UI elements to be rendered visible.

peah Nov 8, 2013 at 4:41 AM 
hi, why ModernWindow syntax does not work in my work?it keep pop up error while running.Im using VS2010 and also try in Powerbuilder.net

GreenLion Oct 29, 2013 at 9:56 AM 
Hey,

great component.
But how is it possible to add content without creating new Pages and link to them?
Thanks & regards
Greenlion

acidsnake20 Sep 4, 2013 at 5:14 AM 
hi how to remove the expander on the top