Modern UI For WPF Application by Example (Blank Window)


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


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, here it is possible to get the WPF app that demostrates the features provided by “mui”.


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:

  1. <Window x:Class="ModernUIForWPFSample.BlankWindow.MainWindow1"  
  2.         xmlns=""  
  3.         xmlns:x=""  
  4.         Title="MainWindow1" Height="300" Width="300">  
  5.     <Grid>  
  7.     </Grid>  
  8. </Window>  
That looks as:

main window form

Using the Modern UI, we will have something like:
  1. <mui:ModernWindow x:Class="ModernUIForWPFSample.BlankWindow.MainWindow"  
  2.                   xmlns=""  
  3.                   xmlns:x=""  
  4.                   xmlns:mui=""  
  5.                   Title="Blank Window"  
  6.                   Width="525"  
  7.                   Height="350"  
  8.                   Style="{StaticResource BlankWindow}">  
  9.     <Grid>  
  11.     </Grid>  
  12. </mui:ModernWindow>  
That requires the following resources in App.xaml:
  1. <Application x:Class="ModernUIForWPFSample.BlankWindow.App"  
  2.              xmlns=""  
  3.              xmlns:x=""  
  4.              StartupUri="MainWindow.xaml">  
  5.     <Application.Resources>  
  6.         <ResourceDictionary>  
  7.             <ResourceDictionary.MergedDictionaries>  
  8.                 <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />  
  9.                 <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml" />  
  10.             </ResourceDictionary.MergedDictionaries>  
  11.         </ResourceDictionary>  
  12.     </Application.Resources>  
  13. </Application>  
And when we run the app, we will get:

blank windo

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:
  1. AppearanceManager.Current.AccentColor = Colors.Orange;  
To select the first view that will show we need to do something like:
  1. 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)