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组件框架开发,并投入正 ...
随机推荐
- Protobuf 动态加载 .pb 文件并操作 Message
之前写了<Protobuf 动态加载 .proto 文件并操作 Message>.除了直接读取 .proto 文件之外,还有一种类似的方法.先把 .proto 文件编译成 .pb 文件,再 ...
- STL常用容器用法
-1. 本文章中所有函数原型均为C++98的标准. 通用的操作 //遍历容器--以vector,map为例 vector<int> vt; map<int,int> mp; f ...
- 在树莓派上开发SpringBoot 之使用VSCode远程开发
一些运行在ARM单板电脑上的IoT应用通常会提供RESTful风格的API接口.本次的文章记录如何在本地电脑上通过VS Code的远程开发功能,在树莓派端创建一个SpringBoot工程,并实现调试和 ...
- 好用的 NPL 词库分类。
## 好用的 NPL 词库分类. 专业的词库分类技术. 主要服务于金融领域的词库划分. 上图!对比一下我们的分词和jie等模型的效果.做的就是专业! 向量、矩阵与列表
在第二章介绍了 R 语言中的基本数据类型,本章会将其组装起来,构成特殊的数据结构,即向量.矩阵与列表.这些数据结构在社交网络分析中极其重要,本质上对图的分析,就是对邻接矩阵的分析,而矩阵又是由若干个向 ...
- Android Studio 插件(不定期更新)
GsonFormat 根据JSONObject格式的字符串,自动生成实体类参数. 安装 1.Android studio File->Settings-->Plugins -->in ...
- C语言中的单引号和双引号的区别
首先肯定地说,二者是有区别的,不是说用谁都一样. 1.实质区别,代表的含义不同 'A'代表的是一个整数,而且这个整数对应的是编译器所采用的字符集中的字符序列对应的数值.所以'A'跟ASCII中的65意 ...
- redis lua脚本学习
语法格式(常见) a = 5 -- 全局变量 local b = 5 -- 局部变量 Eval的使用 EVAL script numkeys key [key ...] arg [arg ...] 首 ...
- SpringCloud微服务实战——搭建企业级开发框架(三十六):使用Spring Cloud Stream实现可灵活配置消息中间件的功能
在以往消息队列的使用中,我们通常使用集成消息中间件开源包来实现对应功能,而消息中间件的实现又有多种,比如目前比较主流的ActiveMQ.RocketMQ.RabbitMQ.Kafka,Stream ...
- opencv笔记---contours
一 Contour Finding Contours使用 STL-style vector<> 表示,如 vector<cv::Point>, vector<cv::Po ...