WPF优秀组件推荐之MahApps

概述

MahApps是一套基于WPF的界面组件，通过该组件，可以使用较小的开发成本实现一个相对很好的界面效果。

官方网站：MahApps.Metro - Home

开源代码：MahApps · GitHub

本文代码基于Stylet开发，如果您还不了解Stylet，请参阅：

环境需求

通过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

最新文章

热门文章