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

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

嘉龙

327人浏览 · 2023-09-18 16:28:43

嘉龙 · 2023-09-18 16:28:43 发布

ViewModelLocator.cs 说明

构建前言

这二篇对于大佬可以直接跳过了，毕竟没啥技术含量都是对着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"