WPF 使用MahApps.Metro UI库

在WPF中要想使用Metro风格是很简单的，可以自己画嘛..

但是为了节省时间，哈，今天给大家推荐一款国外Metro风格的控件库。

本文只起到抛砖引玉的作用，有兴趣还是推荐大家上官网，Thanks，官网地址 我会在底部发出。

实现效果

其实下面仅仅是对窗体的一个简单设置，以及放了些简单的按钮，这是本文抛砖引玉的示例程序，其实还有非常多的好玩的样式，包括动画效果。

安装 MahApps.Metro

这里依然推荐使用NuGet来进行安装，如下图所示。

然后在NuGet中搜索 MahApps.Metro ，然后进行安装即可，如下图所示。

安装好之后就已经在我们的引用中完成了。

实现Metro样式三部曲

1.首先将资源引入App.xaml

1. <Application x:Class="MetroWPF.App"
2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4. StartupUri="MainWindow.xaml">
5. <Application.Resources>
6. <ResourceDictionary>
7. <ResourceDictionary.MergedDictionaries>
8. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
9. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
10. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
11. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
12. <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
13. </ResourceDictionary.MergedDictionaries>
14. </ResourceDictionary>
15. </Application.Resources>
16. </Application>

引入之后几乎我们所有的控件都具备了Metro样式了。

2.再把窗体换成Metro风格

在XAML状体中进行如下 xmlns 引用。

1. xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

然后将Window标签替换为如下标签

1. <controls:MetroWindow ...

就ok了。

看看我的窗体的XAML完整代码吧，我加了三个控件做示例，如下所示。

1. <controls:MetroWindow  x:Class="MetroWPF.MainWindow"
2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4. xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
5. GlowBrush="{DynamicResource AccentColorBrush}"
6. Title="MainWindow" Height="350" Width="525">
7. <controls:MetroWindow.RightWindowCommands>
8. <controls:WindowCommands>
9. <Button Content="settings" />
10. <Button Content="设置" />
11. </controls:WindowCommands>
12. </controls:MetroWindow.RightWindowCommands>
13. <Grid>
14. <StackPanel>
15. <Label Margin="20">www.wxzzz.com</Label>
16. <TextBox Margin="40,10,40,10"></TextBox>
17. <Button>Metro Style Button</Button>
18. </StackPanel>
19. </Grid>
20. </controls:MetroWindow>

3.最后一步修改窗体cs代码中的继承

1. //引用
2. using MahApps.Metro.Controls;
3. namespace MetroWPF
4. {
5. /// <summary>
6. /// MainWindow.xaml 的交互逻辑
7. /// </summary>
8. public partial class MainWindow : MetroWindow
9. {
10. public MainWindow()
11. {
12. InitializeComponent();
13. }
14. }
15. }

至此，我们的示例就完成了，我们顺便再来看看官方的窗体示例吧！其实都是很简单的设置，非常好用。

本文示例源码下载：MetroWPF

官方示例地址：http://mahapps.com/guides/quick-start.html

官方控件示例地址：http://mahapps.com/controls/

MahApps.Metro 项目源码：https://github.com/MahApps/MahApps.Metro