WPF優秀元件推薦之MahApps

seabluescn發表於2022-03-08
元件APP

概述

MahApps是一套基於WPF的介面元件，通過該元件，可以使用較小的開發成本實現一個相對很好的介面效果。

官方網站：MahApps.Metro - Home

開原始碼：MahApps · GitHub

 

本文程式碼基於Stylet開發，如果您還不瞭解Stylet，請參閱：

WPF優秀元件推薦之Stylet（一） - seabluescn - 部落格園 (cnblogs.com)

WPF優秀元件推薦之Stylet（二） - seabluescn - 部落格園 (cnblogs.com)

 

環境需求

 通過Nuget引用下列元件。（還需引用Stylet相關元件）

 

基本操作

修改APP.xaml檔案，如下：

WPF優秀元件推薦之MahApps 
<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>
View Code

 修改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)

相關文章