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文件，如下：

"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" >
    
        
            
                
                    
                        
                    
                         

                
                "pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                "pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
            
        
    

View Code

 修改MainView.Xaml将顶级标记Window修改为：mah:MetroWindow ，如下：

"NiceComponents.Others.Pages.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"      
        xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro">
    
        
    

 修改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为前景色，系统自带的可选颜色请参考官方文档。另外，框架支持用户自定义皮肤，具体方法官方文档讲得也比较详细了。

 

工具栏

工具栏左侧：

    
        
            "/Images/App.png" ToolTip="XXX" Margin="2"/>
        
    

 

工具栏右侧：

    
        
            "Setting" Command="{s:Action DoSetting}" ToolTipService.ShowOnDisabled="True">
                
                    
                        "Horizontal">
                            "/Images/Menu.png" Width="20" Height="20" />
                        
                    
                
                       
        
    

  

状态栏

    
        
            "*" MinHeight="300"/>
            "25"/>
             

        
        "1">
            "Ready" Width="188" Margin="10 0 0 0"/>          
            "V1.0.0" HorizontalAlignment="Right" Width="120"/>
        
    

  

弹窗

Xaml：

    
        
            "设置" Position="Left" IsModal="True" Width="450" Theme="Adapt" 
                         IsOpen="{Binding IsSettingFlyoutOpen}"   >
                "{DynamicResource MahApps.Styles.TabControl.Animated}" 
                            TabStripPlacement="Left" 
                            mah:TabControlHelper.Underlined="SelectedTabItem" >
                    "主题">                       
                    

                    "关于">
                                                    
                        
                    
                
            
        
    

 通过IsSettingFlyoutOpen控制窗口的显示与隐藏，代码如下：

Code：

        public bool IsSettingFlyoutOpen { get; set; }
        public void DoSetting()
        {
            IsSettingFlyoutOpen = !IsSettingFlyoutOpen;
        }

  

常用的功能大致介绍得差不多了，框架对常用控件的样式进行了修改，另外还增加了一些控件，增加的控件不多，常用的有：、、等。

具体的使用需要用户进一步去探索了，下载并运行官方开源代码是一个比较好的学习手段。

以上代码下载地址：NiceComponents · Bruce/Learn WPF - 码云 - 开源中国 (gitee.com)