WPF ModernUI Tutorial Part 1

Introduction

ModernUI is a nice WPF theme and a styling framework which let you build a modern, beautiful application easily. Are you poor in designing skill and have problem with designing GUI for your WPF applicaiotn? If so, you have to try ModernUI, it is the best choice for you. In web design, there is Bootstrap for building great UI. And for WPF, it is Modern UI.

Screenshots

Mordern UI Screenshots

WPF ModernUI Screenshots

Installation

The installation is really easy, just search “ModernUI” in Manage NuGet Package Window, and select “ModernUI for WPF” item and click “Install”

Install ModernUI for WPF in NuGet Package Manager

Or run following command in Package Manager Console

 Install-Package ModernUI.WPF

Create a ModernUI Window

First create a new WPF Application Project named “ModernUISample”. After creating project, select MainWindow.xaml, change the XAML as following:

<mui:ModernWindow x:Class="ModernUISample.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">

The ModernWindow class is defined under FirstFloor.ModernUI.Windows.Controls, so add following line to MainWindow.xaml.cs to import this namespace

using FirstFloor.ModernUI.Windows.Controls;

Then let MainWindow inherit from class ModernWindow

public partial class MainWindow : ModernWindow

Click “Debug” button to run the program, we will see a black rectangle with a light blue border is shown. What’s wrong with it? It’s because that we have not applied the theme files to our application.

Open App.xaml, and add following code:

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

Run the program again, you will see a modern window is shown

The post WPF ModernUI Tutorial Part 1 appeared first on Redino blog.