Modern UI For WPF Application by Example (Default Window)

Scope

The purpose of this article is to show how to create a basic default Window in WPF using the Modern UI.

Introduction

The Modern UI is a set of controls and styles converting our WPF application into a great looking Modern UI app. The Modern UI project can be found in mui.codeplex.com. Here it is possible to get the WPF app that demostrates the features provided by “mui”.

Description

In the article My first Modern UI app it is possible to create the default Window from “mui”, that is defined by default with a back button and some options/sub options that show the respective content.

Here is the look:

group 1

Whoever wants to run a simple sample based in the article above, see the sample in github.

Here the MainWindows is defined by:

<mui:ModernWindow x:Class="ModernUIForWPFSample.DefaultModernUI.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="Default Modern UI Window"
Width="650"
Height="450"
IsTitleVisible="True">
<mui:ModernWindow.TitleLinks>
<mui:Link DisplayName="ModernUI Project" Source="https://mui.codeplex.com/" />
<mui:Link DisplayName="ModernUI For WPF Sample" Source="https://github.com/saramgsilva" />
</mui:ModernWindow.TitleLinks>
<mui:ModernWindow.MenuLinkGroups>
<mui:LinkGroup DisplayName="Helper">
<mui:LinkGroup.Links>
<mui:Link DisplayName="Steps" Source="/Views/StepsControl.xaml" />
<mui:Link DisplayName="Other resources" Source="/Views/ResourcesControl.xaml" />
</mui:LinkGroup.Links>
</mui:LinkGroup>
</mui:ModernWindow.MenuLinkGroups>
</mui:ModernWindow>

There are two title links at the top based in the Web URL and there is a menu link group that contains only two link groups, Steps and Resources, that are UserControls.

Notes

TitleLink and LinkGroup allow definition of a path for a Web URL or for a Control/User Control/Window.
It is necessary to add the themes from the Modern UI to the App.xaml.

When we run the sample we will have something like:

helper

Note: the image above has the entire procedure.

other resource

To define the theme color for the window, we need to define the color in the constructor, by doing:

AppearanceManager.Current.AccentColor = Colors.Green;

To select the first view that will show we need to do something like:

ContentSource = MenuLinkGroups.First().Links.First().Source;

Source Code

Get the source code for this sample in github.

Visual Studio Extension used