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

zls366發表於2022-04-11
UI

概述

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

目前支援的NET Framework 4.6.2及更高版本、.NET Core 3.1, .NET 5 and .NET 6 (on Windows)。官網學習文件地址：https://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="http://metro.mahapps.com/winfx/xaml/controls"

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

    <mah:MetroWindow x:Class="WpfApp8.StartView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
         xmlns:cal="http://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風格。

    執行結果

          

原始碼下載

百度網盤連結：https://pan.baidu.com/s/1dD8HaoVDz6G8xeipRWaQ-Q

提取碼：6666

技術群：新增小編微信並備註進群
小編微信：mm1552923   公眾號：dotNet程式設計大全    

 

相關文章