介紹一款倍受歡迎的.NET 開源UI庫

• 2022 年 4 月 11 日
• 筆記
• .NET 6, c#, caliburn.Micro, WPF

概述

      今天要帶大家了解的是一款WPF的開源控制項庫MahApps.Metro。MahApps.Metro是用於創建現代WPF應用程式的工具包，它許多開箱即用的好東西。

目前支援的NET Framework 4.6.2及更高版本、.NET Core 3.1, .NET 5 and .NET 6 (on Windows)。官網學習文檔地址：//mahapps.com/docs/　　　　

風格賞析(部分展示)

• Theme有兩款，深色和淺色：下面只展示淺色主題

• ​Progress進度條：這裡提供了好幾款，樣式很優雅

  

• datagrid：表格控制項

  

• hamburger

  

   

   

   

• Dialogs：消息彈框

用法介紹

     看了上面的控制項風格，想必有很多小夥伴已經迫不及待想知道這套控制項庫如何在自己項目中使用了，接下來小編就帶你正式體驗MahApps.Metro.

     首先，創建項目，然後在github上搜索引用：如果要體驗預先髮型版，可以勾選圖片中紅框部分

1. MahApps內置風格和主題：

    <Application.Resources>
       <ResourceDictionary>
         <ResourceDictionary.MergedDictionaries>
           <!-- 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" />
           <!-- Theme setting -->
           <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
         </ResourceDictionary.MergedDictionaries>
       </ResourceDictionary>
     </Application.Resources>

2. 使用MetroWindows：要開始全面的MahApps造型和全面的窗口支援，您需要將您的普通窗口更改為我們的MetroWindows。

   打開你的主窗口，通常命名為MainWindow.xaml,在打開窗口標記中添加名稱空間屬性

   xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
   或者
   xmlns:mah="//metro.mahapps.com/winfx/xaml/controls"

3. 前台xmal全部程式碼如下：

   <mah:MetroWindow x:Class="WpfApp8.StartView"
           xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
           xmlns:d="//schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="//schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
            xmlns:cal="//www.caliburnproject.org" 
           xmlns:local="clr-namespace:WpfApp8"
           mc:Ignorable="d"
           GlowBrush="{DynamicResource MahApps.Brushes.Accent}"
           ResizeMode="CanResizeWithGrip"
           Title="StartView" Height="300" Width="600" WindowStartupLocation="CenterScreen">
       <StackPanel>
           <TextBox Name="TextContent"/>
           <Button x:Name="testBtn" Content="testBtn"   Background="LightCyan"/>
           <ListBox Name="ListBoxItems"  MinHeight="230" Background="LightGray"
                    cal:Message.Attach="[Event SelectionChanged] = [Action ListBoxItems_SelectionChanged($source,$eventArgs)];
                                        [Event MouseUp]=[ListBoxItems_MouseUp($source,$eventArgs)]"
    />
       </StackPanel>
   </mah:MetroWindow>

4. 您還需要修改窗口文件的程式碼，以便基類與XAML文件的MetroWindow類匹配：

   using MahApps.Metro.Controls;
   ​
   namespace WpfApp8
   {
       /// <summary>
       /// StartView.xaml 的交互邏輯
       /// </summary>
       public partial class StartView : MetroWindow
       {
           public StartView()
           {
               InitializeComponent();
           }
   ​
       
       }
   }

   這樣保存後重新編譯運行，就會看到窗體的樣式已經發生改變，完全變成了Metro風格。

   運行結果

源碼下載

百度網盤鏈接：//pan.baidu.com/s/1dD8HaoVDz6G8xeipRWaQ-Q

提取碼：6666

技術群：添加小編微信並備註進群
小編微信：mm1552923   公眾號：dotNet編程大全