宝妈的需求“一仔播放器” WPF 的开源项目（二 构建项目引用HandyControl、MwvmLight）

目录

构建前言

新建项目

引用组件

MwvmLight 使用说明

ViewModelLocator.cs 说明

MainWindow.xaml 绑定

App.xaml 配置

HandyControl 使用说明

App.xaml 配置

MainWindow.xaml 使用

MainWindow.xaml.cs 

运行效果

查找图标

界面引用图标

exe 文件引用图标

最终效果

---

构建前言

        这二篇对于大佬可以直接跳过了，毕竟没啥技术含量都是对着HandyControl官方文档做一遍 ，对于小白可以瞅瞅，毕竟我会写点心得共勉。

新建项目

        这里使用 Visual Studio 2022 ，创建 WPF ，如图并采用 框架 4.8 ，项目名称就叫 YiZiPlayer

引用组件

        建好项目后，优先引用 HandyControl 、MwvmLight ，项目开发过程中少不了打印日志或者打印对象json等操作，所以可以多引用一些组件如： NLog、 Newtonsoft ，类似的常用组件很多，比如 二维码生成 ThoughtWorks、本地数据库操作 SQLite、网络通信 DotNetty.....，不过咱们现阶段暂时也用不到这些，以后要是扩展了再引入

MwvmLight 使用说明

        MWVM 模式的出现，确实是让咱们开发工作省了不少事，通俗的说就是数据联动的框架，后端数据绑定到前端界面，数据变动界面也跟着变，界面上修改了数值，后端数据也会自动跟着变，省去了 来回赋值的麻烦。

        引用 MwvmLight 框架后，vs 项目文件会多出 ViewModel 文件夹，这里就是咱们要存放和界面联动的 数据模型，通常模型和界面命名对应。这里还会多出一个 ViewModelLocator 文件，作用就是注册要联动的数据及界面，不然 MwvmLight 也不知道你要联动啥，后期我们每增加一个界面都要对应去注册一下

ViewModelLocator.cs 说明

using CommonServiceLocator;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Ioc;
using YiZiPlayer.View;
//using Microsoft.Practices.ServiceLocation;

namespace YiZiPlayer.ViewModel
{
    public class ViewModelLocator
    {
        /// <summary>
        /// 注册登记
        /// </summary>
        public ViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
            
            //注册主窗体界面
            SimpleIoc.Default.Register<MainWindow>();

            //注册主窗体对应的数据模型
            SimpleIoc.Default.Register<MainViewModel>();
        }

        /// <summary>
        /// 界面绑定时用的方法名
        /// </summary>
        public MainViewModel Main
        {
            get
            {
                return ServiceLocator.Current.GetInstance<MainViewModel>();
            }
        }
        
        public static void Cleanup()
        {
            // TODO Clear the ViewModels
        }
    }
}

MainWindow.xaml 绑定

        界面如何关联数据模型？加上这句就好了  “DataContext = {.........}”

<Window x:Class="YiZiPlayer.View.MainWindow"          
        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:hc="https://handyorg.github.io/handycontrol" 
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
          
        DataContext="{Binding Source={StaticResource Locator},Path=Main}"  
         
        WindowState="Maximized" WindowStartupLocation="CenterScreen"
        Icon="/Resource/logo32.ico"        
        mc:Ignorable="d"
        Title="一仔播放器" Height="768" Width="1366">

App.xaml 配置

        配置本是手动写的，不过在引用 MwvmLight 时系统自动就加了 ViewModelLocator , 指明数据模型在哪个命名空间里，并定义了Key ="Locator" 便于界面引用

<Application x:Class="YiZiPlayer.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:YiZiPlayer" 
             StartupUri="View/MainWindow.xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" d1p1:Ignorable="d" xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006">
    <Application.Resources>
        <ResourceDictionary>
            <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" xmlns:vm="clr-namespace:YiZiPlayer.ViewModel" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

HandyControl 使用说明

        HandyControl 就是UI控件库，按钮呀、输入框呀、文本呀都给你美化一下，目的就是没有UI设计师也能开发出漂亮的软件，嘿嘿！

        各种各样的按钮、进度条、文本框提供你使用，如图。实在没有你要的效果只能自己画了

App.xaml 配置

        万事开头都是配置，HandyControl 也不例外，官方文档写得很清楚了，引用 资源文件，加入两行

ResourceDictionary.......皮肤
ResourceDictionary.......主题

<Application x:Class="YiZiPlayer.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:YiZiPlayer" 
             StartupUri="View/MainWindow.xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" d1p1:Ignorable="d" xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" xmlns:vm="clr-namespace:YiZiPlayer.ViewModel" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

MainWindow.xaml 使用

引用 xmlns:hc="https://handyorg.github.io/handycontrol"   并且把  Window 改成 hc:Window 就那么简单

<hc:Window x:Class="YiZiPlayer.View.MainWindow"          
        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:hc="https://handyorg.github.io/handycontrol" 

        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"           
        DataContext="{Binding Source={StaticResource Locator},Path=Main}"           
        WindowState="Maximized" WindowStartupLocation="CenterScreen"             
        mc:Ignorable="d"
        Title="一仔播放器" Height="768" Width="1366">

MainWindow.xaml.cs 

        由于窗体采用了 HandyControl 控件，就不需要继承 Window了，去掉 ：Window

using System.Windows.Shapes;
using YiZiPlayer.ViewModel;

namespace YiZiPlayer.View
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow //:Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

运行效果

没有引用 HandyControl 的默认效果

引用后 比较扁平的风格

图标来源

        虽然是家里宝妈用的软件，但也不能太 lou 吧！何况加入图标也好识别，图标设计这当事和百度 AI 商量了一下，它给我生成了几个图，最终选了个兔子

        至于怎么抠图，生成ico 自己想想办法, 网上在线生成就好了

界面引用图标

        在项目中创建一个文件夹 放入图标，在 MainWindow.xaml 加入 Icon="/Resource/favicon32.ico"  即可，
同时我加了两项设置，打开窗口时居中，默认就最大化   WindowState="Maximized" 
   WindowStartupLocation="CenterScreen"

exe 文件引用图标

        生成的 执行文件咱们统一的也加上图标，像个样子嘛！！如图 项目目录右键属性....

最终效果

有点点效果了哦！