Modern UI For WPF Application by Example (Blank Window)

Scope

The purpose of this article is to show how to create a blank window in WPF using Modern UI.

Introduction

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

A blank window is a WPF window that is defined by a style that only makes the window beautiful and the content is defined like in a simple window in WPF. It is based in a root control (Grid / StackPanel) that will contain all content.

If we create a Window for WPF we wil have something like:

<Window x:Class="ModernUIForWPFSample.BlankWindow.MainWindow1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow1" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>

That looks as:



Using the Modern UI, we will have something like:

<mui:ModernWindow x:Class="ModernUIForWPFSample.BlankWindow.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="Blank Window"
                  Width="525"
                  Height="350"
                  Style="{StaticResource BlankWindow}">
    <Grid>

    </Grid>
</mui:ModernWindow>

That requires the following resources in App.xaml:

<Application x:Class="ModernUIForWPFSample.BlankWindow.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <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>
</Application>

And when we run the app, we will get:



Note: The preceding image contains the entire procedure.

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

AppearanceManager.Current.AccentColor = Colors.Orange;

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


<< Modern UI for WPF Application by Example (Default Window)