wpf教程-metro扁平化样式UI控件库推荐:MahApps.Metro
wpf虽然做出来的ui效果已经很好了,但是还是会有很多客户要求在完善。不如在win8出来后,很多用户就喜欢metro的样式。
今天给大家推荐metro扁平化样式UI控件库:MahApps.Metro 。
官方地址:http://mahapps.com/guides/quick-start.html
效果图:
支持控件:
Buttons
DataGrid
Dialogs
FlipView
Flyouts
MetroWindow
NumericUpDown
ProgressBar
ProgressRing
RangeSlider
Slider
SplitButton and DropDownButton
TabControl
TextBox
Tile
ToggleButton
ToggleSwitch
TransitioningContentControl
这里不一一截图了。大家直接去官网看。
安装使用步骤:
通过NuGet GUI(右键单击您的项目,点击NuGet包管理中,选择在线和搜索MahApps.Metro)或包管理器控制台:
PM> Install-Package MahApps.Metro
如果你想使用MahApps的预发布包 ,您需要启用包括预映GUI:
或使用包管理器控制台:
pm> Install-PackageMahApps.Metro -Pre
样式的窗口
有两种方法可以使用MahApps.Metro样式窗口:
您可以使用包括在内MetroWindow
控制或,
设计你自己的窗口
现在我们将使用MetroWindow
,因为这种方法将一个好的比例的应用程序和工作是最快和最容易的方法。 如果你想了解自己的窗口,查看该指南。
使用MetroWindow控制
修改XAML文件
在安装MahApps.Metro:
开放MainWindow.xaml
添加该属性在打开窗口标记。 (这是你如何引用其他在XAML命名空间):
xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
改变<Window ...
标签<controls:MetroWindow ...
(记得改变关闭标签!)
1 |
|
修改后台代码文件
你还需要修改MainWindow.xaml.cs
文件的基类MainWindow
匹配的MetroWindow
XAML文件的类。 访问MetroWindow
首先,添加以下参考。
using MahApps.Metro.Controls public partial class MainWindow : MetroWindow { }
但在大多数情况下你可以把基类(因为这是一个partial
类的XAML应该照顾):
public partial class MainWindow { }
最终的结果会是这样的:
使用内置的样式
所有MahApp.metro的资源都包含在单独的资源字典。 为了让大多数的控制采用MahApps。 地铁主题,您将需要添加以下ResourceDictionaries你App.xaml
app.xaml
<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <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" /> <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>
最后的结果看起来是这样的。 如果你想知道更多关于控制是如何工作的,下面可以找到更多的信息。
什么是MetroWindow ?
默认的MetroWindow
由几部分组成:
如果你不喜欢的元素标签,不要害怕,他们都是可选的。
titlebar是集MetroWindow
除了你自己的。ShowTitleBar="true|false"
不是大小的控制只有方法来调整MetroWindow
——所有的棱角都可以抓住,但考虑到MetroWindow
没有明显的窗口“铬”像一个航空窗口,调整控制可以帮助安抚用户。
而不是使用静态图像、最小化、最大化/关闭的图标字体Marlett。 解释为什么这是如此需要重温记忆,或者至少访问维基百科的文章关于它。
你甚至可以隐藏标题栏上的图标设置ShowIconOnTitleBar="true|false"
定制
WindowCommands
WindowCommands
最小化、最大化/还原、关闭按钮。 您可以添加自己的控制WindowsCommands
——默认情况下,按钮样式自动应用到他们让他们适应的其余部分WindowsCommands
。 0.9,你不再局限于按钮,但任何控制。 请注意,你负责样式按钮。
包括这MetroWindow
标签:
<Controls:MetroWindow.RightWindowCommands> <Controls:WindowCommands> <Button Content="settings" /> <Button> <StackPanel Orientation="Horizontal"> <Rectangle Width="20" Height="20" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"> <Rectangle.OpacityMask> <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_cupcake}" /> </Rectangle.OpacityMask> </Rectangle> <TextBlock Margin="4 0 0 0" VerticalAlignment="Center" Text="deploy cupcakes" /> </StackPanel> </Button> </Controls:WindowCommands> </Controls:MetroWindow.RightWindowCommands>
一定要包括图标把蛋糕
产生这个窗口titlebar:
前台(链接)的颜色WindowCommands
永远是白色,除非titlebar是禁用的,在这种情况下,它将是您选择相反的任何主题。 例如,使用白色/光主题,前景颜色是黑色的。
还有LeftWindowCommands
,orientates titlebar左边的命令。
在WPF中要想使用Metro风格是很简单的,可以自己画嘛..
但是为了节省时间,哈,今天给大家推荐一款国外Metro风格的控件库。
本文只起到抛砖引玉的作用,有兴趣还是推荐大家上官网,Thanks,官网地址 我会在底部发出。
实现效果
其实下面仅仅是对窗体的一个简单设置,以及放了些简单的按钮,这是本文抛砖引玉的示例程序,其实还有非常多的好玩的样式,包括动画效果。
安装 MahApps.Metro
这里依然推荐使用NuGet来进行安装,如下图所示。
然后在NuGet中搜索 MahApps.Metro ,然后进行安装即可,如下图所示。
安装好之后就已经在我们的引用中完成了。
实现Metro样式三部曲
1.首先将资源引入App.xaml
- <Application x:Class="MetroWPF.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>
- <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" />
- <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>
引入之后几乎我们所有的控件都具备了Metro样式了。
2.再把窗体换成Metro风格
在XAML状体中进行如下 xmlns 引用。
- xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
然后将Window标签替换为如下标签
- <controls:MetroWindow ...
就ok了。
看看我的窗体的XAML完整代码吧,我加了三个控件做示例,如下所示。
- <controls:MetroWindow x:Class="MetroWPF.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"
- GlowBrush="{DynamicResource AccentColorBrush}"
- Title="MainWindow" Height="350" Width="525">
- <controls:MetroWindow.RightWindowCommands>
- <controls:WindowCommands>
- <Button Content="settings" />
- <Button Content="设置" />
- </controls:WindowCommands>
- </controls:MetroWindow.RightWindowCommands>
- <Grid>
- <StackPanel>
- <Label Margin="20">www.wxzzz.com</Label>
- <TextBox Margin="40,10,40,10"></TextBox>
- <Button>Metro Style Button</Button>
- </StackPanel>
- </Grid>
- </controls:MetroWindow>
3.最后一步修改窗体cs代码中的继承
- //引用
- using MahApps.Metro.Controls;
- namespace MetroWPF
- {
- /// <summary>
- /// MainWindow.xaml 的交互逻辑
- /// </summary>
- public partial class MainWindow : MetroWindow
- {
- public MainWindow()
- {
- InitializeComponent();
- }
- }
- }
至此,我们的示例就完成了,我们顺便再来看看官方的窗体示例吧!其实都是很简单的设置,非常好用。
本文示例源码下载:MetroWPF
官方示例地址:http://mahapps.com/guides/quick-start.html
官方控件示例地址:http://mahapps.com/controls/
MahApps.Metro 项目源码:https://github.com/MahApps/MahApps.Metro
wpf教程-metro扁平化样式UI控件库推荐:MahApps.Metro相关推荐
- wpf项目源代码_C# WPF开源控件库:MahApps.Metro
C# WPF开源控件库:MahApps.Metro ❝ 其实站长很久之前就知道这个开源WPF控件库了,只是一直欣赏不了这种风格,但也star了该项目.每次浏览该仓库时,发现star越来越多,也看到很多 ...
- C# WPF开源控件库:MahApps.Metro
❝ 其实站长很久之前就知道这个开源WPF控件库了,只是一直欣赏不了这种风格,但也star了该项目.每次浏览该仓库时,发现star越来越多,也看到很多网友对它的褒奖,所以今天就向大家推荐这款WPF控件库 ...
- MahApps.Metro扁平化UI控件库(可修改主题色等)
一.名词解释 使用MahApps.Metro扁平化UI控件库,可以使界面呈现更加美观.本文将总结MahApps.Metro的使用方法,及如何自定义修改其主题颜色等. 详细内容可参考官网:https:/ ...
- UI控件库分享:DWZ(j-UI)、LigerUI、Linb
DWZ(j-UI): 在线演示地址:http://demo.dwzjs.com 在线文档:http://demo.dwzjs.com/doc/dwz-user-guide.pdf DWZ框架Ajax开 ...
- winfrom窗体, C#开源第三方控件库推荐~
DevExpress和DotnetBar是我们最常用的控件库,但是有些时候想到会涉及到版权以及收费的烦恼.寻找了两个开源控件库希望可以帮助大家! 1.HZHControls:https://githu ...
- FineUI(专业版)v3.2.0 发布(ASP.NET UI控件库)!
+2016-08-20 v3.2.0+表格增强.+表格列RenderField增加属性ClientHtmlEncode,用于在客户端进行HTML编码.-增加示例:单元格编辑->杂项->客户 ...
- 很棒的WPF控件库 Newbeecoder.UI
Newbeecoder.UI是一个强大的WPF基于MVVM框架和控件库实用程序.它支持窗口边框阴影,窗口圆角,包含许多优雅的控件.它让开发人员更高效.更快地创建漂亮的WPF构建应用程序.它支持从4.0 ...
- WPF源码控件库《Newbeecoder.UI》轮播
轮播控件是一种强大且视觉上吸引人的方式来呈现多个数据项,本文讨论Newbeecoder.UI轮播控件的原理和一个简单的演示应用程序. 轮播控件是包含Canvas控件的 WPF 用户控件,项目控件是的子 ...
- 《Dotnet9》系列-开源C# WPF控件库2《Panuon.UI.Silver》强力推荐
国内优秀的WPF开源控件库,Panuon.UI的优化版本.一个漂亮的.使用样式与附加属性的WPF UI控件库,值得向大家推荐使用与学习. 今天站长(Dotnet9,站长网址:https://dotne ...
最新文章
- w3wp.exe内存占用过高(网站打不开,应用程序池回收就正常)
- Android11怎么截屏,对标IOS?Android11或无缘屏幕长截图
- vfp : 顶层表单附加菜单
- SQL查询语句 select
- 如何用 5 天攻克产品困境?Sprint 硅谷创新冲刺告诉你!
- win11网络怎么优化 Windows11优化网速的步骤教程
- python入门基础教程-Python入门基础教程:WSGI
- matlab2c使用c++实现matlab函数系列教程-cosh函数
- SQL Server修改数据
- 在word、ppt中输入矩阵转置符号
- SecureCRT for mac 破解安装
- 英语词性的分类及用法详述
- 解决MAC上网速度慢的原因
- 模板的实例化与具体化
- HDU 2081:手机短号 (C语言)
- svn: E155019: Can't upgrade as it is not a pre-1.7 work解决办法
- 计算机辅助教育相关论文,教学计算机辅助论文,关于计算机辅助教学在现代教育改革中的作用相关参考文献资料-免费论文范文...
- 计算机什么专业适合男生,内向的男生适合什么专业
- 小米平板4能装Linux系统吗,还在考虑小米平板4要不要入手?看完这十个问题你就有答案了...
- Uniapp自定义相机界面
热门文章
- 数据分析+数据挖掘告诉你:电商销售额与哪些因素有关?
- 2020 HDU多校 第一场 04-Distinct Sub-palindromes(思维)
- 计算机和美术之间有什么联系,你和绘画大师之间,或许就差这样一款给力的平板电脑...
- HC-05蓝牙模块,主从一体机原理总结
- Vue中的侦听器watch
- Windows 7引导Ubuntu 13.10 双系统安装
- 天龙八部TLBB系列 - 网单服务端Server/Config目录文件说明
- 分布式锁redisson的使用 看门狗原理
- vb.net 弹出对话框 修改按钮名_无需越狱!iOS12修改运营商名称方法和技巧
- Rumor谣传路由协议