Mastering Modern UI: A Step-by-Step Guide to Creating Metro UI in WPF
To create metro ui you first have to install
"Mahapps.metro" from NuGet.To install it right click on project and
click on manage NuGet and type Mahapps.metro you will get this package you have
to install from here.Now you are ready to create metro ui.Now open you
Mainwindow.xaml and add one namespace like bellow
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
and replace Window to Controls:MetroWindow
Now your Mainwindow.xaml become
<Controls:MetroWindow x:Class="ProjectName.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
Title="MainWindow"
Height="600"
Width="800">
<!-- your content -->
</Controls:MetroWindow>
Now you have to modify Mainwindow.xaml.cs file
in wpf application before it was inherited from Window.Now to make it metro you
have to replace Window to MetroWindow like
public partial class MainWindow :MetroWindow
{
public MainWindow()
{
InitializeComponent();
}
}
Now add some Button and
run the application it will display window with black
background.To apply metro
default style you have to add some resources.
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
<Application 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">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!-- MahApps.Metro resource
dictionaries. Make sure that all file names are Case Sensitive! -->
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/
Controls.xaml"/>
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/
Fonts.xaml"/>
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/
Colors.xaml"/>
<!-- Accent and AppTheme setting -->
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml"
/>
<ResourceDictionary
Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml"
/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
Now if you run the application
you will get metro window with default style.
Watch video for more detail
Watch video for more detail
Comments
Post a Comment