Share via

Modern UI for WPF application by example (Default Window)

  • Article

Scope

This article has the goal to show how to create a basic default Window in WPF usingModern 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 demostrate the features provided by “mui”.

Description

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

Here are the look

http://download-codeplex.sec.s-msft.com/Download?ProjectName=mui&DownloadId=890183

For who that 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 Web url, and there is a menu link group which contain only two link group:Steps and Resources, which are UserControls. 

Note:

1. TitleLink and LinkGroup allow to define a path for a Web Url or for a Control/User Control/Window.

2. Is required to add the themes from Modern UI to the App.xaml. 

When we run the sample we will have something like

http://i1.wp.com/s13.postimg.org/9j8a8061j/image.png?w=584

Note: the image above contains all steps need. 
and

http://i2.wp.com/s10.postimg.org/8jab5b7qx/image.png?w=584

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

AppearanceManager.Current.AccentColor = Colors.Green;

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