现在位置首页 / 项目实战 /正文

wpf教程-metro扁平化样式UI控件库推荐:MahApps.Metro

作者: IT小兵 | 2014年7月25日| 热度:℃ | 评论: |参与:

wpf虽然做出来的ui效果已经很好了,但是还是会有很多客户要求在完善。不如在win8出来后,很多用户就喜欢metro的样式。

今天给大家推荐metro扁平化样式UI控件库:MahApps.Metro 。

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

效果图:

支持控件:

  1. Buttons

  2. DataGrid

  3. Dialogs

  4. FlipView

  5. Flyouts

  6. MetroWindow

  7. NumericUpDown

  8. ProgressBar

  9. ProgressRing

  10. RangeSlider

  11. Slider

  12. SplitButton and DropDownButton

  13. TabControl

  14. TextBox

  15. Tile

  16. ToggleButton

  17. ToggleSwitch

  18. 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 ...(记得改变关闭标签!)

 

<controls:MetroWindow x:Class="WpfApplication2.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"     Title="MainWindow"      Height="350"      Width="525"> <!-- your layout here --> </controls:MetroWindow>


修改后台代码文件

你还需要修改MainWindow.xaml.cs文件的基类MainWindow匹配的MetroWindowXAML文件的类。 访问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左边的命令。 

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询