WPF优秀组件推荐之MahApps
概述
MahApps是一套基于WPF的界面组件,通过该组件,可以使用较小的开发成本实现一个相对很好的界面效果。
官方网站:MahApps.Metro - Home
开源代码:MahApps · GitHub
本文代码基于Stylet开发,如果您还不了解Stylet,请参阅:
WPF优秀组件推荐之Stylet(一) - seabluescn - 博客园 (cnblogs.com)
WPF优秀组件推荐之Stylet(二) - seabluescn - 博客园 (cnblogs.com)
环境需求
通过Nuget引用下列组件。(还需引用Stylet相关组件)
基本操作
修改APP.xaml文件,如下:


<Application x:Class="NiceComponents.Others.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:NiceComponents.Others"
xmlns:s="https://github.com/canton7/Stylet" >
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<s:ApplicationLoader>
<s:ApplicationLoader.Bootstrapper>
<local:Bootstrapper />
</s:ApplicationLoader.Bootstrapper>
</s:ApplicationLoader> <!-- 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.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
修改MainView.Xaml将顶级标记Window修改为:mah:MetroWindow ,如下:
<mah:MetroWindow x:Class="NiceComponents.Others.Pages.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro">
<Grid> </Grid>
</mah:MetroWindow>
修改MainView.Xaml.cs文件,将其父类修改为:MetroWindow,如下:
public partial class MainView : MetroWindow
{
public MainView()
{
InitializeComponent();
}
}
此时运行程序,就可以看到一个漆黑的窗口,因为还没有设置样式。修改App.xaml.cs文件,如下:
public partial class App : Application
{
protected override void OnStartup(StartupEventArgs e)
{
base.OnStartup(e);
ThemeManager.Current.ChangeTheme(this, "Light.Cyan");
}
}
Light表示背景颜色,支持Light和Dark两种,Cyan为前景色,系统自带的可选颜色请参考官方文档。另外,框架支持用户自定义皮肤,具体方法官方文档讲得也比较详细了。
工具栏
工具栏左侧:
<mah:MetroWindow.LeftWindowCommands>
<mah:WindowCommands>
<Image Source="/Images/App.png" ToolTip="XXX" Margin="2"/>
</mah:WindowCommands>
</mah:MetroWindow.LeftWindowCommands>
工具栏右侧:
<mah:MetroWindow.RightWindowCommands>
<mah:WindowCommands>
<Button ToolTip="Setting" Command="{s:Action DoSetting}" ToolTipService.ShowOnDisabled="True">
<Button.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="/Images/Menu.png" Width="20" Height="20" />
</StackPanel>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</mah:WindowCommands>
</mah:MetroWindow.RightWindowCommands>
状态栏
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="300"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions> <!--状态栏-->
<StatusBar Grid.Row="1">
<StatusBarItem Content="Ready" Width="188" Margin="10 0 0 0"/>
<StatusBarItem Content="V1.0.0" HorizontalAlignment="Right" Width="120"/>
</StatusBar>
</Grid>
弹窗
Xaml:
<mah:MetroWindow.Flyouts>
<mah:FlyoutsControl>
<mah:Flyout Header="设置" Position="Left" IsModal="True" Width="450" Theme="Adapt"
IsOpen="{Binding IsSettingFlyoutOpen}" >
<TabControl Style="{DynamicResource MahApps.Styles.TabControl.Animated}"
TabStripPlacement="Left"
mah:TabControlHelper.Underlined="SelectedTabItem" >
<TabItem Header="主题">
</TabItem> <TabItem Header="关于">
<Grid >
</Grid>
</TabItem>
</TabControl>
</mah:Flyout>
</mah:FlyoutsControl>
</mah:MetroWindow.Flyouts>
通过IsSettingFlyoutOpen控制窗口的显示与隐藏,代码如下:
Code:
public bool IsSettingFlyoutOpen { get; set; }
public void DoSetting()
{
IsSettingFlyoutOpen = !IsSettingFlyoutOpen;
}
常用的功能大致介绍得差不多了,框架对常用控件的样式进行了修改,另外还增加了一些控件,增加的控件不多,常用的有:<mah:NumericUpDown />、<mah:SplitButton />、<mah:ToggleSwitch />等。
具体的使用需要用户进一步去探索了,下载并运行官方开源代码是一个比较好的学习手段。
以上代码下载地址:NiceComponents · Bruce/Learn WPF - 码云 - 开源中国 (gitee.com)
WPF优秀组件推荐之MahApps的更多相关文章
- WPF优秀组件推荐之LiveCharts
概述 LiveCharts是一个比较漂亮的WPF图表控件,在数据变化时还会有动画切换的效果,并且样式也可以控制. 官方网站:Live Charts (lvcharts.net) 开源代码:GitHub ...
- WPF优秀组件推荐之FreeSpire
概述 Spire是一套可以轻松处理Word.Excel和PDF的商业组件,需要收费,但是他有一套对应的免费组件FreeSpire可以使用,免费组件在功能上有一些限制(比如:excel的sheet数量不 ...
- WPF优秀组件推荐之Stylet(一)
一.简介 Stylet是基于WPF的一款MVVM组件,虽然WPF本身是自带MVVM功能的,但实现起来不是很方便 ,通过Stylet,用户可以用很少的代码就能享受MVVM带来的舒适体验. 目前Style ...
- WPF优秀组件推荐之Stylet(二)
上一篇文章介绍了Stylet的一些基本功能,本篇将介绍一些深入一点的功能. 依赖注入 在Bootstrapper 类中注入需要的对象: public class Bootstrapper : Boot ...
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- 优秀工具推荐:超实用的 CSS 库,样板和框架
当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间.在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效. 您可能感兴趣的相关文章 精 ...
- 【转】JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- HP-Socket国产优秀socket通信组件推荐
来源:http://blog.csdn.net/clb929/article/details/51085983 * HP-Socket 官方网站:http://www.jessma.org * HP- ...
- vue组件推荐
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
随机推荐
- Java 锁 概念介绍
一 Java中的锁是什么? /* * 一 Java锁定义? * 在计算机科学中,锁(lock)或互斥(mutex)是一种同步机制,用于在有许多执行线程的环境中强制对资源的访问限制. * 锁旨在强制 ...
- CSS之 sass、less、stylus 预处理器的使用方式
更详细区别参考文档:https://blog.csdn.net/pedrojuliet/article/details/72887490 使用变量: sass: 使用 $ 符号定义变量,如: $ba ...
- Codeforces Round #738 (Div. 2)
Codeforces Round #738 (Div. 2) 跳转链接 A. Mocha and Math 题目大意 有一个长度为\(n\)的数组 可以进行无数次下面的操作,问操作后数组中的最大值的最 ...
- 在终端或idea编译工具中的terminal中运行mvn install 失败
原因是因为操作系统的差异导致,把所有参数加上引号即可. 如下所示: mvn install:install-file "-Dfile=cobra.jar" "-Dgrou ...
- Web:移动端阻止默认行为的小坑
问题 移动端 web 开发中,使用 addEventListener 阻止了 touchstart 事件的默认行为却发现没有生效 描述 再移动端 web 开发中,我们一般会用 addEventList ...
- Nginx实现跨域配置详解
主要给大家介绍了关于Nginx跨域使用字体文件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 问题描述 今天在使用子域名访问根域名的CSS时,发现字体无法显示,在确保CSS和Font字 ...
- 帆软报表(finereport)鼠标悬停背景变色
在报表中,为了突出鼠标所在单元格,当鼠标悬浮时突出背景色(字体),鼠标离开后恢复原有的背景色(字体). 在设计器 模板>模板 Web 属性>填报页面设置,去除填报当前编辑行背景设置的勾选, ...
- Idea个人配置
Intellij IDEA配置 1. 优化导包配置 2. 取消tab页单行显示 多行显示更多的文件,方便查看. 3. 双斜杠注释改成紧跟代码头 4. 选中复制整行 原本只会复制你选中的代码,改完配置后 ...
- Vue脚手架报错 Component name "Student" should always be multi-word vue/multi-word-component-names
报错信息分析: 新手在第一个次使用脚手架的时候难免会遇到各种各样奇怪的问题,最近在学习Vue的过程中就出现了如下问题 通过阅读报错信息可知: 是我们的组件名有一些问题,(报错信息翻译过来大概就是组件名 ...
- MySQL中的严格模式
很多集成的PHP环境(PHPnow WAMP Appserv等)自带的MySQL貌似都没有开启MySQL的严格模式,何为MySQL的严格模式,简单来说就是MySQL自身对数据进行严格的校验(格式.长度 ...