一、名词解释

使用MahApps.Metro扁平化UI控件库,可以使界面呈现更加美观。本文将总结MahApps.Metro的使用方法,及如何自定义修改其主题颜色等。

详细内容可参考官网:https://mahapps.com/

二、安装

推荐使用NuGet进行安装:

选中要添加MahApps.Metro的项目,右键单击,选择Manage NuGet Packages,搜索MahApps.Metro,如下图,选中后安装。

或在Package Manager Console(Tools→NuGet Package Manager)中,输入指令:Install-Package MahApps.Metro 进行安装,如下图。

三、实现

1. 将资源引入App.xaml,注意安装的Metro版本不同对应的App.xaml中写法不同。

 <Application x:Class="WpfApplication.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>
<!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<!-- Accent and AppTheme setting -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

App.xaml(v2.0.0 and newer)

 <Application x:Class="WpfApplication.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>
<!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
<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" />
<!-- Accent and AppTheme setting -->
<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>

App.xaml(v1.6.5 and older)

2. 修改窗体的.xaml文件:

添加引用:xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

修改标签:<controls:MetroWindow ……

示例:

 <controls:MetroWindow x:Class="DemoMachine.UI.Views.ShellView"
xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"> </controls:MetroWindow>

<control:MetroWindow

3. 修改窗体的.xaml.cs文件,继承自MetroWindow类:

 using MahApps.Metro.Controls;

 namespace DemoMachine.UI.Views
{
public partial class ShellView : MetroWindow
{
public ShellView()
{
InitializeComponent();
}
}
}

四、修改主题样式

Metro有一些预设的主题风格和主题色可以使用,在App.xaml的<Application.Resources>中改设置:

1. 有这些可供选择的accents:

“Red”, “Green”, “Blue”, “Purple”, “Orange”, “Lime”, “Emerald”, “Teal”, “Cyan”, “Cobalt”, “Indigo”, “Violet”, “Pink”, “Magenta”, “Crimson”, “Amber”, “Yellow”, “Brown”, “Olive”, “Steel”, “Mauve”, “Taupe”, “Sienna”

2. 有这些可供选择的themes:

“BaseLight”, “BaseDark”

也可以自定义的设置主题颜色:

新建Resources文件夹,添加两个类文件SelfAccent.cs和SelfAppTheme.cs,分别写入代码:

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="options"> <Color x:Key="HighlightColor">#FF000000</Color> <Color x:Key="AccentColor">#</Color>
<!--DataGrid中是选中行的底色-->
<!--%-->
<Color x:Key="AccentColor2">#</Color>
<!--DataGrid中是初始选中行的底色,固定是那一行-->
<!--%-->
<Color x:Key="AccentColor3">#</Color>
<!--DataGrid中是鼠标悬停行的底色-->
<!--%-->
<Color x:Key="AccentColor4">#</Color> <!-- re-set brushes too -->
<SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource HighlightColor}" options:Freeze="True" />
<SolidColorBrush x:Key="AccentColorBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
<SolidColorBrush x:Key="AccentColorBrush2" Color="{StaticResource AccentColor2}" options:Freeze="True" />
<SolidColorBrush x:Key="AccentColorBrush3" Color="{StaticResource AccentColor3}" options:Freeze="True" />
<SolidColorBrush x:Key="AccentColorBrush4" Color="{StaticResource AccentColor4}" options:Freeze="True" /> <SolidColorBrush x:Key="WindowTitleColorBrush" Color="{StaticResource AccentColor}" options:Freeze="True" /> <LinearGradientBrush x:Key="ProgressBrush" EndPoint="0.001,0.5" StartPoint="1.002,0.5" options:Freeze="True">
<GradientStop Color="{StaticResource HighlightColor}" Offset="" />
<GradientStop Color="{StaticResource AccentColor3}" Offset="" />
</LinearGradientBrush> <SolidColorBrush x:Key="CheckmarkFill" Color="{StaticResource AccentColor}" options:Freeze="True" />
<SolidColorBrush x:Key="RightArrowFill" Color="{StaticResource AccentColor}" options:Freeze="True" /> <Color x:Key="IdealForegroundColor">White</Color>
<SolidColorBrush x:Key="IdealForegroundColorBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />
<SolidColorBrush x:Key="IdealForegroundDisabledBrush" Color="{StaticResource IdealForegroundColor}" Opacity="0.4" options:Freeze="True" />
<SolidColorBrush x:Key="AccentSelectedColorBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" /> <!-- DataGrid brushes -->
<SolidColorBrush x:Key="MetroDataGrid.HighlightBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
<SolidColorBrush x:Key="MetroDataGrid.HighlightTextBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />
<SolidColorBrush x:Key="MetroDataGrid.MouseOverHighlightBrush" Color="{StaticResource AccentColor3}" options:Freeze="True" />
<SolidColorBrush x:Key="MetroDataGrid.FocusBorderBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
<SolidColorBrush x:Key="MetroDataGrid.InactiveSelectionHighlightBrush" Color="{StaticResource AccentColor2}" options:Freeze="True" />
<SolidColorBrush x:Key="MetroDataGrid.InactiveSelectionHighlightTextBrush" Color="{StaticResource IdealForegroundColor}" options:Freeze="True" />
</ResourceDictionary>

SelfAccent.cs

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="options"> <Color x:Key="BlackColor">#FFFFFFFF</Color>
<Color x:Key="WhiteColor">#00FFFFFF</Color> <Color x:Key="Gray1">#00FFFFFF</Color>
<Color x:Key="Gray2">#00FFFFFF</Color>
<Color x:Key="Gray7">#FF6487c8</Color> <!--关联按钮点击时的颜色-->
<Color x:Key="Gray8">#FF6487c8</Color> <!--关联按钮悬停颜色-->
<Color x:Key="Gray10">#00FFFFFF</Color> <Color x:Key="GrayNormal">#00FFFFFF</Color>
<Color x:Key="GrayHover">#00FFFFFF</Color> <Color x:Key="FlyoutColor">#00FFFFFF</Color> <!-- re-set brushes too -->
<SolidColorBrush x:Key="BlackBrush" Color="{StaticResource BlackColor}" options:Freeze="True" />
<SolidColorBrush x:Key="TextBrush" Color="{StaticResource BlackColor}" options:Freeze="True" />
<SolidColorBrush x:Key="LabelTextBrush" Color="{StaticResource BlackColor}" options:Freeze="True" />
<SolidColorBrush x:Key="BlackColorBrush" Color="{StaticResource BlackColor}" options:Freeze="True" />
<SolidColorBrush x:Key="TextBoxMouseOverInnerBorderBrush" Color="{StaticResource BlackColor}" options:Freeze="True" />
<SolidColorBrush x:Key="TextBoxFocusBorderBrush" Color="{StaticResource BlackColor}" options:Freeze="True" />
<SolidColorBrush x:Key="ButtonMouseOverBorderBrush" Color="{StaticResource BlackColor}" options:Freeze="True" />
<SolidColorBrush x:Key="ButtonMouseOverInnerBorderBrush" Color="{StaticResource BlackColor}" options:Freeze="True" />
<SolidColorBrush x:Key="ComboBoxMouseOverBorderBrush" Color="{StaticResource BlackColor}" options:Freeze="True" />
<SolidColorBrush x:Key="ComboBoxMouseOverInnerBorderBrush" Color="{StaticResource BlackColor}" options:Freeze="True" /> <SolidColorBrush x:Key="ControlBackgroundBrush" Color="{StaticResource WhiteColor}" options:Freeze="True" />
<SolidColorBrush x:Key="WhiteBrush" Color="{StaticResource WhiteColor}" options:Freeze="True" />
<SolidColorBrush x:Key="WhiteColorBrush" Color="{StaticResource WhiteColor}" options:Freeze="True" />
<SolidColorBrush x:Key="DisabledWhiteBrush" Color="{StaticResource WhiteColor}" options:Freeze="True" />
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="{StaticResource WhiteColor}" options:Freeze="True" /> <SolidColorBrush x:Key="{x:Static SystemColors.WindowBrushKey}" Color="{StaticResource WhiteColor}" options:Freeze="True" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="{StaticResource BlackColor}" options:Freeze="True" /> <SolidColorBrush x:Key="GrayBrush1" Color="{StaticResource Gray1}" options:Freeze="True" />
<SolidColorBrush x:Key="GrayBrush2" Color="{StaticResource Gray2}" options:Freeze="True" />
<SolidColorBrush x:Key="GrayBrush7" Color="{StaticResource Gray7}" options:Freeze="True" />
<SolidColorBrush x:Key="GrayBrush8" Color="{StaticResource Gray8}" options:Freeze="True" />
<SolidColorBrush x:Key="GrayBrush10" Color="{StaticResource Gray10}" options:Freeze="True" /> <SolidColorBrush x:Key="GrayNormalBrush" Color="{StaticResource GrayNormal}" options:Freeze="True" />
<SolidColorBrush x:Key="GrayHoverBrush" Color="{StaticResource GrayHover}" options:Freeze="True" /> <SolidColorBrush x:Key="SliderValueDisabled" Color="#FF535353" options:Freeze="True" />
<SolidColorBrush x:Key="SliderTrackDisabled" Color="#FF383838" options:Freeze="True" />
<SolidColorBrush x:Key="SliderThumbDisabled" Color="#FF7E7E7E" options:Freeze="True" />
<SolidColorBrush x:Key="SliderTrackHover" Color="#FF737373" options:Freeze="True" />
<SolidColorBrush x:Key="SliderTrackNormal" Color="#FF6C6C6C" options:Freeze="True" /> <SolidColorBrush x:Key="FlyoutBackgroundBrush" Color="{StaticResource FlyoutColor}" options:Freeze="True" />
<SolidColorBrush x:Key="FlyoutForegroundBrush" Color="{StaticResource BlackColor}" options:Freeze="True" /> <SolidColorBrush x:Key="FlatButtonPressedBackgroundBrush" Color="#444444" options:Freeze="True" /> <!-- menu brushes -->
<SolidColorBrush x:Key="MenuBackgroundBrush" Color="{StaticResource WhiteColor}" options:Freeze="True" />
<SolidColorBrush x:Key="ContextMenuBackgroundBrush" Color="{StaticResource WhiteColor}" options:Freeze="True" />
<SolidColorBrush x:Key="SubMenuBackgroundBrush" Color="{StaticResource WhiteColor}" options:Freeze="True" />
<SolidColorBrush x:Key="MenuItemBackgroundBrush" Color="{StaticResource WhiteColor}" options:Freeze="True" /> <SolidColorBrush x:Key="ContextMenuBorderBrush" Color="{StaticResource BlackColor}" options:Freeze="True" />
<SolidColorBrush x:Key="SubMenuBorderBrush" Color="{StaticResource BlackColor}" options:Freeze="True" /> <SolidColorBrush x:Key="MenuItemSelectionFill" Color="#313131" options:Freeze="True" />
<SolidColorBrush x:Key="MenuItemSelectionStroke" Color="#313131" options:Freeze="True" /> <SolidColorBrush x:Key="TopMenuItemPressedFill" Color="#313131" options:Freeze="True" />
<SolidColorBrush x:Key="TopMenuItemPressedStroke" Color="#E0717070" options:Freeze="True" />
<SolidColorBrush x:Key="TopMenuItemSelectionStroke" Color="#90717070" options:Freeze="True" /> <!-- original #FF9A9A9A" -->
<SolidColorBrush x:Key="DisabledMenuItemForeground" Color="{StaticResource Gray7}" options:Freeze="True" />
<SolidColorBrush x:Key="DisabledMenuItemGlyphPanel" Color="#848589" options:Freeze="True" /> <SolidColorBrush x:Key="{x:Static SystemColors.MenuTextBrushKey}" Color="{StaticResource BlackColor}" options:Freeze="True" /> <Color x:Key="MenuShadowColor">#FFFFFFFF</Color> <!-- DataGrid brushes -->
<SolidColorBrush x:Key="MetroDataGrid.DisabledHighlightBrush" Color="{StaticResource Gray7}" options:Freeze="True" />
</ResourceDictionary>

SelfAppTheme.cs

然后在App.xaml.cs中添加代码:

 using MahApps.Metro;
using System;
using System.Windows; namespace DemoMachine.UI
{
/// <summary>
/// Interaction logic for App.xaml
/// </summary>
public partial class App : Application
{
protected override void OnStartup(StartupEventArgs e)
{
AddAppTheme();
AddAccent();
ThemeManager.ChangeAppStyle(Application.Current,
ThemeManager.GetAccent("SelfAccent"),
ThemeManager.GetAppTheme("SelfAppTheme")); // or appStyle.Item1 base.OnStartup(e);
} private void AddAppTheme()
{
MahApps.Metro.ThemeManager.AddAppTheme("SelfAppTheme", new Uri("pack://application:,,,/Resources/SelfAppTheme.xaml"));
}
private void AddAccent()
{
MahApps.Metro.ThemeManager.AddAccent("SelfAccent", new Uri("pack://application:,,,/Resources/SelfAccent.xaml"));
}
}
}

App.xaml.cs

完成以后,修改SelfAccent.cs和SelfAppTheme.cs文件中的颜色,就可以一定程度上的更改控件中与主题绑定了的颜色。

五、写基于Metro的样式

使用Metro类库后,控件会具有一些已写好集成好的样式,如何基于这些样式添加自己的样式修改呢,举例说明:

新建名为DataGridStyle的样式,基于Metro的DataGrid的样式AzureDataGrid,加上BasedOn="{StaticResource AzureDataGrid}",

     <!--DataGrid样式-->
<Style x:Key="DataGridStyle" TargetType="{x:Type DataGrid}" BasedOn="{StaticResource AzureDataGrid}">
<Setter Property="AutoGenerateColumns" Value="false"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>

DataGrid样式

然后在界面上的DataGrid中引用自己的DataGrid样式,标签内引入样式Style="{StaticResource DataGridStyle}":

 <DataGrid x:Name="Cell1TaskList" Style="{StaticResource DataGridStyle}">
<DataGrid.Columns>
<DataGridTextColumn Header="进料口" Binding="{Binding Path=SOURCE_LOCATION}" Width="*"/>
<DataGridTextColumn Header="目标库位" Binding="{Binding Path=TARGET_LOCATION}" Width="*"/>
<DataGridTextColumn Header="状态" Binding="{Binding Path=MOVE_STATUS}" Width="*"/>
</DataGrid.Columns>
</DataGrid>

View中DataGrid使用样式

那么怎么知道Metro的各控件的各种样式名称呢:

1. 去官网找,一些经典的样式名称;

2. 下载Metro的源代码,有个名为Style的文件夹,包含各种样式的代码文本,可以查看各种样式的详细代码设置,如下图文件夹。

后续有新的使用经验会及时添加,欢迎大家一起补充。

MahApps.Metro扁平化UI控件库(可修改主题色等)的更多相关文章

  1. UI控件库

    UI控件库分享:DWZ(j-UI).LigerUI.Linb DWZ(j-UI): 在线演示地址:http://demo.dwzjs.com 在线文档:http://demo.dwzjs.com/do ...

  2. winform项目中开发的一套UI控件库

    https://github.com/houyhea/winform-control-lib winform-control-lib 曾经在一个winform项目中开发的一套UI控件库 类图:  效果 ...

  3. FineUI(专业版)v3.2.0 发布(ASP.NET UI控件库)!

    +2016-08-20 v3.2.0 +表格增强. +表格列RenderField增加属性ClientHtmlEncode,用于在客户端进行HTML编码. -增加示例:单元格编辑->杂项-> ...

  4. andorid 控件 Bootstrap3.0风格的控件 精美UI控件库

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...

  5. AndroidUI开源组件库BottomView 第三方自定义UI控件

    这里分享一个Android的非常经典实用而且简单方便的第三方UI控件库:BottomView(小米的米UI也用到了这个) 原文  http://blog.csdn.net/opzoonzhuzheng ...

  6. 国内开源C# WPF控件库Panuon.UI.Silver推荐

    国内优秀的WPF开源控件库,Panuon.UI的优化版本.一个漂亮的.使用样式与附加属性的WPF UI控件库,值得向大家推荐使用与学习. 今天站长(Dotnet9,站长网址:https://dotne ...

  7. 国内开源C# WPF控件库Panuon.UI.Silver强力推荐

    国内优秀的WPF开源控件库,Panuon.UI的优化版本.一个漂亮的.使用样式与附加属性的WPF UI控件库,值得向大家推荐使用与学习. 今天站长(Dotnet9,站长网址:https://dotne ...

  8. 很漂亮的Wince开发控件库Beemobile简介【转】

    https://blog.csdn.net/xiaoyong_net/article/details/80467653 官网地址:http://beemobile4.net/products/ipac ...

  9. C# WPF开源控件库:MahApps.Metro

    其实站长很久之前就知道这个开源WPF控件库了,只是一直欣赏不了这种风格,但也star了该项目.每次浏览该仓库时,发现star越来越多,也看到很多网友对它的褒奖,所以今天就向大家推荐这款WPF控件库. ...

随机推荐

  1. 利用Google Chrome开发插件,在网页中植入js代码

    Google Chrome是一个很强大的浏览器,提供了各种各样的插件,大大提升了使用了的效率,比如vimium.honx等. Google在提供这些插件的同时还允许用户开发自己的插件. 最近在写js的 ...

  2. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  3. IIS6.0创建新网站后,浏览显示需输入用户名和密码

    1.首先我们需要创建一个用于匿名访问的账号. 我的电脑右键,电脑管理->本地用户和组->用户->新用户 注意勾选(用户不能更改密码和密码永不过期这两项)   2.右键新创建的用户-& ...

  4. Devexpress系列一 之 ChartControl 柱形图BarSideBySideSeries2D

    这一篇是讲的是简单的柱形图, 柱形图运行效果如下图: 新建WPF窗体应用程序后(WPF用户控件也可以),工程引用DevExpress.Xpf.Charts.v17.1.dll, 在XAML头部引用名称 ...

  5. eclipse中导入dtd文件实现xml的自动提示功能

    以mybatis为例 1.mybatis的xml文件头: (1)config文件: <?xml version="1.0" encoding="UTF-8" ...

  6. Laravel 5.4+Vue.js 初体验:Laravel下配置运行Vue.js

    生产材料PHP:PHP 5.6+Laravel 5.4:https://github.com/laravel/laravel/releases/Composer:http://getcomposer. ...

  7. org.apache.hadoop.ipc.RemoteException: java.io.IOException:XXXXXXXXXXX could only be replicated to 0 nodes, instead of 1

    原因:Configured Capacity也就是datanode 没用分配容量 [root@dev9106 bin]# ./hadoop dfsadmin -report Configured Ca ...

  8. 28. Bad Influence of Western Diet 西式饮食的消极影响

    28. Bad Influence of Western Diet 西式饮食的消极影响 ① The spread of Western eating habits around the world i ...

  9. 在windows7下创建ftp服务站点

    1.开始->控制面板->程序(点击“卸载程序”)->启动或关闭windows功能->Internet Information Services(Internet信息服务)-&g ...

  10. 使用async-http-client实现异步批量http请求

    最近项目中需要在微服务中调用rest接口,而且需要调用得次数很多,所以同步得http客户端已经不满足要求,在网上查阅资料后发现了async-http-client这个包得性能不错,所以写了个demo测 ...