在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

最新文章

  1. UI控件（UITextField）
  2. 【Win 10应用开发】多窗口视图
  3. ReSharper 配置及用法(转)
  4. SocketTcpClient
  5. 常用基础OC 集合
  6. Date and Time Pattern
  7. web处理jsp文件的三个阶段
  8. x265
  9. Android编程: MVC模式、应用的生命周期
  10. JS读取client端的文件的代码片段
  11. collectionView代码创建
  12. cocos2dx Menu
  13. android中关于ListView的卡位说明
  14. Windows、Linux -- 远程登录、文件传输、文件共享
  15. 2017最新技术java高级架构、千万高并发、分布式集群、架构师入门到精通视频教程
  16. 阿里云服务器 ubuntu14.04 配置ftp
  17. CentOS7 源码编译安装Tengine
  18. [SQL]查询整个数据库中某个特定值所在的表和字段的方法
  19. Vuejs——（4）v-if、v-for
  20. zyb的面试

热门文章

  1. torch 深度学习(4)
  2. 继承AbstractRoutingDataSource再通过AOP实现动态数据源切换
  3. logback配置日志输出
  4. Spring3.0 核心jar包详解
  5. IOS-相机、相册
  6. Day34 设计模式
  7. 简单粗暴地理解js原型链–js面向对象编程
  8. JDK的KeyTool和KeyStore等加密相关
  9. 快速切题 sgu 112. a^b-b^a 大数 次方 难度:0 非java:1
  10. 微信授权网页获取用户openiid