WPF uses the Mahapps.metro UI library

It's easy to use metro style in WPF, you can draw it yourself.

But in order to save time, ha, today we recommend a foreign Metro style control library.

This article only plays the role, has the interest or the recommendation everybody official Officer Net, Thanks, the website address I will send at the bottom.

Achieve results

In fact, the following is just a simple setup of the form, as well as put some simple buttons, this is the example of the sample program, in fact, there are a lot of fun style, including animation effects.

Installing Mahapps.metro

It is still recommended to use NuGet for installation, as shown in.

Then search for Mahapps.metro in NuGet and install it as shown in.

The installation has been completed in our references.

Achieve Metro Style Trilogy

1. First introduce resources to App.xaml

2. <application x:class="Metrowpf.app"
4. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
6. xmlns:x="Http://schemas.microsoft.com/winfx/2006/xaml"
8. StartupUri="MainWindow.xaml">
10. <Application.Resources>
12. <ResourceDictionary>
14. <ResourceDictionary.MergedDictionaries>
16. <resourcedictionary Source="pack://application:,,,/mahapps.metro;component/styles/ Controls.xaml " />
18. <resourcedictionary Source="pack://application:,,,/mahapps.metro;component/styles/ Fonts.xaml " />
20. <resourcedictionary Source="pack://application:,,,/mahapps.metro;component/styles/ Colors.xaml " />
22. <resourcedictionary Source="pack://application:,,,/mahapps.metro;component/styles/ Accents/blue.xaml " />
24. <resourcedictionary Source="pack://application:,,,/mahapps.metro;component/styles/ Accents/baselight.xaml " />
26. </ResourceDictionary.MergedDictionaries>
28. </ResourceDictionary>
30. </Application.Resources>
32. </Application>

After introduction, almost all of our controls have the Metro style.

2. Replace the form with Metro style

The following xmlns references are made in a XAML-like body.

1. xmlns:controls="Clr-namespace:mahapps.metro.controls;assembly=mahapps.metro"

Then replace the window tag with the following label

1. <controls:metrowindow ...

It's OK.

Look at the XAML complete code for my form, I added three controls to do the example, as shown below.

2. <controls:metrowindow x:class="Metrowpf.mainwindow"
4. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
6. xmlns:x="Http://schemas.microsoft.com/winfx/2006/xaml"
8. xmlns:controls="Clr-namespace:mahapps.metro.controls;assembly=mahapps.metro"
10. Glowbrush="{DynamicResource Accentcolorbrush}"
12. Title="MainWindow" Height="=" Width="525">
14. <controls:MetroWindow.RightWindowCommands>
16. <controls:WindowCommands>
18. <button Content="Settings" />
20. <button Content="Settings" />
22. </controls:WindowCommands>
24. </controls:MetroWindow.RightWindowCommands>
28. <Grid>
30. <StackPanel>
32. <label Margin=">www.wxzzz.com</Label>
34. <textbox Margin="40,10,40,10"></TextBox>
36. <Button>Metro Style Button</Button>
38. </StackPanel>
40. </Grid>
42. </controls:MetroWindow>

3. Last step modify inheritance in form CS code

2. Reference
4. Using Mahapps. Metro. Controls;
8. namespace metrowpf
10. {
12. // <summary>
14. /// MainWindow.xaml's interactive logic
16. // </summary>
18. public partial class MainWindow : metrowindow
20. {
22. public MainWindow()
24. {
26. InitializeComponent();
28. }
30. }
32. }

Now that our example is complete, let's take a look at the official form example! In fact, are very simple settings, very useful.

This article sample source code download: METROWPF

Official Example Address: http://mahapps.com/guides/quick-start.html

Official Control Example Address: http://mahapps.com/controls/

Mahapps.metro Project Source: Https://github.com/MahApps/MahApps.Metro

WPF uses the Mahapps.metro UI library