Share via

Modern UI for WPF application by example (Blank Window)

  • Article

Scope

This article has the goal 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 find in mui.codeplex.com, here is possible to get the WPF app that demonstrate the features provided by “mui”.

Description

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

If we create a Window for WPF we will 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>

which the look is

http://i0.wp.com/s14.postimg.org/3se5s4i8h/image.png?w=584 

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

http://i1.wp.com/s9.postimg.org/5kyi53ovz/image.png?w=584

Note: The above image contains all steps need.

For define the theme color for the Window, we need to define in the constructor the color, by doing

AppearanceManager.Current.AccentColor = Colors.Orange;

For select the firt 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.