【愚公系列】2023年05月 .NET CORE工具案例-MahApps.Metro基于WPF的UI控件库

原创

愚公搬代码 2023-05-20 23:59:27 博主文章分类：.NET CORE 工具案例 ©著作权

文章标签 插入图片控件 github 文章分类 .Net 后端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者愚公搬代码的原创作品，请联系作者获取转载授权，否则将追究法律责任

(文章目录)

前言

MahApps.Metro是一个用于开发Windows应用程序的开源.NET库，它可以提供一种简单的方式来为WPF应用程序添加丰富的用户界面元素。

MahApps.Metro官方文档：https://mahapps.com/docs/

在这里插入图片描述

MahApps.Metro源码网址：https://github.com/MahApps/MahApps.Metro

在这里插入图片描述

一、MahApps.Metro基于WPF的UI控件库

1.安装包

MahApps.Metro

在这里插入图片描述

2.添加资源

在app.xaml中添加资源

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

在这里插入图片描述

3.主视图改造

主视图的cs文件需要继承MetroWindow

public partial class StartView : MetroWindow
{
    public StartView()
    {
        InitializeComponent();
    }
}

在这里插入图片描述

<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.视图的数据源

因为使用的是cm框架，相关数据代码如下：

class StartViewModel : Screen
{ 
    public StartViewModel()
    {
        ListBoxItems = new ObservableCollection<string>() { };
        ListBoxItems.Add("愚公一号");
        ListBoxItems.Add("愚公二号");
        ListBoxItems.Add("愚公三号");
    }
    public ObservableCollection<string> ListBoxItems { get; set; }
    public string TextContent { get; set; }
    public void testBtn()
    {
        TextContent = "hello world!";
        NotifyOfPropertyChange(()=> TextContent);
    }

    public void ListBoxItems_MouseUp(object sender, MouseButtonEventArgs e)
    {
        ListBox listbox = sender as ListBox;
        MessageBox.Show("当前操作的控件名称是:"+ listbox.Name);
    }

    public void ListBoxItems_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        TextContent = (sender as ListBox).SelectedItem.ToString();
        NotifyOfPropertyChange("TextContent");
    }
}

在这里插入图片描述