WPF 使用MahApps.Metro UI库

Posted 2020-07-26 ExplorerMan

在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>
17.  

引入之后几乎我们所有的控件都具备了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.  
14.     <Grid>
15.         <StackPanel>
16.             <Label Margin="20">www.wxzzz.com</Label>
17.             <TextBox Margin="40,10,40,10"></TextBox>
18.             <Button>Metro Style Button</Button>
19.         </StackPanel>
20.     </Grid>
21. </controls:MetroWindow>

 

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

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

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

 

 

本文示例源码下载：MetroWPF

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

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

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