MahApps.Metro扁平化UI控件库（可修改主题色等）

一、名词解释

使用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控件库（可修改主题色等）的更多相关文章

UI控件库
UI控件库分享:DWZ(j-UI).LigerUI.Linb DWZ(j-UI): 在线演示地址:http://demo.dwzjs.com 在线文档:http://demo.dwzjs.com/do ...
winform项目中开发的一套UI控件库
https://github.com/houyhea/winform-control-lib winform-control-lib 曾经在一个winform项目中开发的一套UI控件库类图: 效果 ...
FineUI（专业版）v3.2.0 发布（ASP.NET UI控件库）！
+2016-08-20 v3.2.0 +表格增强. +表格列RenderField增加属性ClientHtmlEncode,用于在客户端进行HTML编码. -增加示例:单元格编辑->杂项-> ...
andorid 控件 Bootstrap3.0风格的控件精美UI控件库
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...
AndroidUI开源组件库BottomView 第三方自定义UI控件
这里分享一个Android的非常经典实用而且简单方便的第三方UI控件库:BottomView(小米的米UI也用到了这个) 原文 http://blog.csdn.net/opzoonzhuzheng ...
国内开源C# WPF控件库Panuon.UI.Silver推荐
国内优秀的WPF开源控件库,Panuon.UI的优化版本.一个漂亮的.使用样式与附加属性的WPF UI控件库,值得向大家推荐使用与学习. 今天站长(Dotnet9,站长网址:https://dotne ...
国内开源C# WPF控件库Panuon.UI.Silver强力推荐
国内优秀的WPF开源控件库,Panuon.UI的优化版本.一个漂亮的.使用样式与附加属性的WPF UI控件库,值得向大家推荐使用与学习. 今天站长(Dotnet9,站长网址:https://dotne ...
很漂亮的Wince开发控件库Beemobile简介【转】
https://blog.csdn.net/xiaoyong_net/article/details/80467653 官网地址:http://beemobile4.net/products/ipac ...
C# WPF开源控件库：MahApps.Metro
其实站长很久之前就知道这个开源WPF控件库了,只是一直欣赏不了这种风格,但也star了该项目.每次浏览该仓库时,发现star越来越多,也看到很多网友对它的褒奖,所以今天就向大家推荐这款WPF控件库. ...

随机推荐

一个性能较好的JVM参数配置
一个性能较好的web服务器jvm参数配置: -server//服务器模式-Xmx2g //JVM最大允许分配的堆内存,按需分配-Xms2g //JVM初始分配的堆内存,一般和Xmx配置成一样以避免每次 ...
Ugly number丑数2，超级丑数
［抄题］: ［思维问题］: ［一句话思路］:Long.valueOf(2)转换为long型再做［输入量］:空: 正常情况:特大:特小:程序里处理到的特殊情况:异常情况(不合法不合理的输入): ［画图 ...
discuz回贴通知插件实现-获取邮件内容
//自定义钩子函数,命名:模块_函数名_output()或模块_函数名() //一个是模块执行完,模板输出前执行.一个是模块执行前 //post_reply_output函数会在所有post操作中都会 ...
iframe父窗口和子窗口之间的调用
1>父窗口获取子窗口 js方法 document.getElementById('if1').contentWindow.document: window.frames["if1&qu ...
2014.1.14 struts 的default.properties 配置文件详述
转自 http://justsee.iteye.com/blog/723993 Struts 2框架有两个核心配置文件:struts.xml和struts.properties 其中struts.x ...
2018.09.30 bzoj2223: [Coci 2009]PATULJCI（主席树）
传送门主席树经典题目. 直接利用主席树差分的思想判断区间中数的个数是否合法然后决定左走右走就行了. 实际上跟bzoj3524是同一道题. 代码: #include<bits/stdc++.h& ...
Linux 系统运维常用命令
1 文件管理2 软件管理3 系统管理4 服务管理5 网络管理6 磁盘管理7 用户管理8 脚本相关9 服务配置==================================------------ ...
HDU 1242 Rescue （BFS+优先队列）
题意:X代表卫兵,a代表终点,r代表起始点,.代表路,#代表墙,走过.要花费一秒,走过x要花费2秒,求从起点到终点的最少时间. 析:一看到样例就知道是BFS了吧,很明显是最短路径问题,不过又加了一个条 ...
(网络流匹配 KM) Going Home --poj -- 2195
链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82835#problem/D 有n个人有n栋房子,每栋房子里能进一个人,但每走一格 ...
Robotframework 之常用断言关键字简介
任何自动化测试框架或实例中断言是必不可少的,Robotframework同样如此,那下面就介绍下其常用断言关键字. 1.Should Be Empty 判断是否为空,如果不为空,执行失败,示例: ...

MahApps.Metro扁平化UI控件库（可修改主题色等）

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

随机推荐

热门专题