August 7, 2017

Styling the Window

Styling the Window

In the previous post we have learn the basic for mahApps. In this post we will learn how to make a widow look good.

That's simple:
  • You can use the included MetroWindow control.
For now we’ll use MetroWindow, as this approach will work for a good percentage of apps and is the quickest and easiest way to get going. 

Modifying the XAML file

After installing MahApps.Metro:
  • open up MainWindow.xaml
  • add this attribute inside the opening Window tag. (It’s how you reference other namespaces in XAML):
    xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
    or
    xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
  • change  tag to  (remember to change the closing tag too!)
 

    
        
    

You’ll also need to modify the MainWindow.xaml.cs file so that the base class for MainWindow matches the MetroWindow class of the XAML file.

public partial class MainWindow : MetroWindow

Using Built-In Styles

All of MahApp.Metro’s resources are contained within separate resource dictionaries. In order for most of the controls to adopt the MahApps.Metro theme, you will need to add the ResourceDictionaries to your App.xaml.
App.xaml
 x:Class="WpfApplication.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
                 
         Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
         Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
         Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
        
         Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
         Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />   
The end result will look something like this. If you want to know more about how the control works, more information can be found below.



In the next post we will give border to Windows Form