Category Archives: Default

Modern UI for WPF

In this post, i will try to tell you about how to create WPF applications using Modern UI Theme.

There may be several ways to include Modern UI to a project but i will concentrate on much a simpler way without using NuGET or something else. In this context, Visual Studio 2015 Community Edition is used as IDE and codes are generated using C# with Net Framework 4.5.

1. Create Project

Create a new WPF using File > New > Project dialog and select WPF Application template under Visual C# > Windows category. Give your project a name and click OK to create your demo project. Then we need to add an assembly reference to the FirstFloor.ModernUI.dll which is the main library file for the Modern UI.

2. Modify MainWindow

Open MainWindow.xaml file and replace all of the page content with the following definition.

<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 { }

3. Modify App.xaml

Open App.xaml file and replace the <Application.Resources> part as shown below:

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

For Net Framework 4.0 you need to add Microsoft.Windows.Shell.dll library reference to the project.

4. Add navigation

Open MainWindow.xaml and remove the Grid content if exists. 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>

5. Add page

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” />

6. Run

Compile and run the application.

Click to download: Demo Project

References:

https://github.com/firstfloorsoftware/mui

https://github.com/firstfloorsoftware/mui/wiki/Getting-started-without-templates