Getting started without templates

Creating a MUI app manually from scratch. For a step-by-step tutorial on creating a MUI app using Visual Studio project and item templates see Getting started

1) Create project

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

2) Modify MainWindow

Derive MainWindow from ModernWindow, open MainWindow.xaml, add the MUI 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 MainWindow.xaml.cs, add the ModernUI using clause and replace the Window base class with ModernWindow.

using FirstFloor.ModernUI.Windows.Controls;
public partial class MainWindow : ModernWindow {  ..  }

If you're using Visual Basic;

Imports FirstFloor.ModernUI.Windows.Controls
Partial Public Class MainWindow
    Inherits ModernWindow

3) Modify App.xaml

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>

4) Run

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

5) Add navigation

Go back to MainWindow.xaml and remove the Grid content. Important: the ModernWindow.Content property is ignored, all content is rendered by specifying page links as is demonstrated below.

Define the main menu by adding 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>

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

6) Add page

Let's add some actual content. Add a WPF UserControl named Page1. 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. 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" />

Additionally add a ContentSource attribute to the ModernWindow element. The ContentSource defines the page that is loaded on start. In above case, /Page1.xaml will be loaded upon startup.

<mui:ModernWindow ...
  ContentSource="/Page1.xaml" />

7) Run

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

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 ModernWindow content see the other tutorials.