您的位置: 首页  >  文章  >  wpf教程-metro扁平化样式UI控件库推荐：MahApps.Metro

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

分类: 文章 • 2024-03-27 11:22:40

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

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

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

效果图：

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

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

支持控件：

  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:

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

或使用包管理器控制台:

pm> Install-PackageMahApps.Metro -Pre

 样式的窗口

有两种方法可以使用MahApps.Metro样式窗口:

您可以使用包括在内MetroWindow控制或,

设计你自己的窗口

现在我们将使用MetroWindow,因为这种方法将一个好的比例的应用程序和工作是最快和最容易的方法。 如果你想了解自己的窗口,查看该指南。

使用MetroWindow控制

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

修改XAML文件

在安装MahApps.Metro:

开放MainWindow.xaml

添加该属性在打开窗口标记。 (这是你如何引用其他在XAML命名空间):

 

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

改变<Window ...标签<controls:MetroWindow ...(记得改变关闭标签!)

 

1

<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 { }

最终的结果会是这样的:

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

使用内置的样式

所有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>

最后的结果看起来是这样的。 如果你想知道更多关于控制是如何工作的,下面可以找到更多的信息。

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

什么是MetroWindow ?

默认的MetroWindow由几部分组成:

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

如果你不喜欢的元素标签,不要害怕,他们都是可选的。

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:

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

前台(链接)的颜色WindowCommands永远是白色,除非titlebar是禁用的,在这种情况下,它将是您选择相反的任何主题。 例如,使用白色/光主题,前景颜色是黑色的。 

还有LeftWindowCommands,orientates titlebar左边的命令。 

 

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

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

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

 

实现效果

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

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

 

安装 MahApps.Metro

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

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

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

wpf教程-metro扁平化样式UI控件库推荐：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. }

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

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

 

 

本文示例源码下载：MetroWPF

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

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

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

 

 

相关推荐