WPF仿网易云搭建笔记(2):组件化开发

文章目录

  • 前言
  • 专栏和Gitee仓库
  • 依赖属性
  • 实战:缩小,全屏,关闭按钮
    • 依赖属性操作封装
    • 主窗口传递this本身给TitleView标题控件
    • 主要代码
      • MainWindow.xmal
      • MainWindow.cs
      • 依赖属性方法封装
      • TitleView.cs
      • TitleViewModel
      • TitleViewModel
      • 实现效果

前言

这次我们来讲解一下WPF 的组件化开发流程,组件化开发是是可以极大降低我们页面开发难度,降低代码耦合的方法。这让我们可以将任意WPF界面进行拆解。因为我写过Vue,所以我会按照Vue的逻辑将WPF进行组件化开发。

专栏和Gitee仓库

WPF仿网易云 Gitee仓库

WPF仿网易云 CSDN博客专栏

依赖属性

WPF为了提高性能,限制了Binding的使用。需要将属性提前注册为依赖属性或者附加属性,才能解决使用Binding语法。原因是每个能binding的属性需要在内存中开辟存储空间。WPF默认不能Binding,需要主动声明才可以。

这个就是为什么Elelctron,Fullter等内存开销那么大,是因为他们的将可能没用的的内存空间也设置了。

博客园 痕迹g WPF依赖属性详解

B站 十月的寒流 WPF 中依赖属性及附加属性的概念及用法

B站 微软系列技术教程 WPF依赖属性详解

实战:缩小,全屏,关闭按钮

这里我讲解一下Window和UserControl两者的区别。Window就是整个窗口,UserControl就是控件。Window负责窗口的一些方法,比如拖拽,缩小放大。而我们是组件化开发,我们就需要将主窗口的this传给子组件

依赖属性操作封装

这里先去看我这个总结的博客。

WPF 用户控件依赖属性赋值

主窗口传递this本身给TitleView标题控件

因为我们是View和ViewModel开发,所有的View只有传递参数和暴露依赖属性的作用,实际的业务是ViewModel去做的。
所以我们传递的方向是

MainWindow
MainWindowViewModel
TitleView的MainWindow依赖属性
TitleViewModel的MainWindow

主要代码

MainWindow.xmal


<Window x:Class="BlankApp1.Views.MainWindow"......><!--需要主动设置名称,不然会Binding错误--><Window.DataContext><ViewModels:MainWindowViewModel x:Name="MainWindowViewModel" /></Window.DataContext><DockPanel LastChildFill="True"><!--其它代码--><Grid DockPanel.Dock="Top"MouseLeftButtonDown="Grid_MouseLeftButtonDown"Height="auto"><!--手动指定DataContext--><Views:TitleView  MainWindow="{Binding MainWindow, ElementName=MainWindowViewModel}"  /></Grid></DockPanel>
</Window>

MainWindow.cs

    public partial class MainWindow : Window{public MainWindowViewModel ViewModel { get; set; }public MainWindow(){InitializeComponent();//重定向ViewModelViewModel = (MainWindowViewModel)DataContext;ViewModel.MainWindow = this;}}

依赖属性方法封装

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;namespace BlankApp1.Utils
{public class MyWpfExtension<View> where View : class{/// <summary>/// 简化依赖注入代码/// </summary>/// <typeparam name="View"></typeparam>/// <typeparam name="Value"></typeparam>/// <param name="name"></param>/// <param name="action"></param>/// <returns></returns>public DependencyProperty DependencyPropertySet<Value>(string name, Action<View, Value> action){var res = DependencyProperty.Register(name, typeof(Value), typeof(View), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault,new PropertyChangedCallback((item, res) =>{var model = item as View;var value = (Value)res.NewValue;if (model != null){action(model, value);}else{throw new Exception("model value is null");}})));return res;}}
}

TitleView.cs


namespace BlankApp1.Views
{/// <summary>/// TitleView.xaml 的交互逻辑/// </summary>public partial class TitleView : UserControl{//这个只是为了代码提示,不涉及逻辑public MainWindow MainWindow { get; set; }//初始化依赖属性构造器public  static readonly MyWpfExtension<TitleView> MyWpfExtension = new MyWpfExtension<TitleView>();//这个是简化后的依赖属性public static readonly DependencyProperty MainWindowProperty = MyWpfExtension.DependencyPropertySet<MainWindow>("MainWindow", (view, value) =>{//通过依赖属性来获取MainWindow的对象view.TitileViewModel.MainWindow = value;});/// <summary>/// DataContext的数据/// </summary>public TitileViewModel TitileViewModel { get; set; }public TitleView(){InitializeComponent();//拿到DataContext数据重定向TitileViewModel = (TitileViewModel)DataContext;}}
}

TitleViewModel

using BlankApp1.Models;
using BlankApp1.Views;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;
using System.Windows;namespace BlankApp1.ViewModels
{public partial class TitileViewModel:ObservableObject{public RelayCommand CloseWindow { get; set; }public RelayCommand MaxOrNormalWindow { get; set; }public RelayCommand MiniWindow { get; set; }public MainWindow MainWindow { get; set; }public TitileViewModel() {//.......其它代码CloseWindow = new RelayCommand(() => {MainWindow.Close();Debug.WriteLine("关闭窗口");});MaxOrNormalWindow = new RelayCommand(() => {if(MainWindow.WindowState == WindowState.Normal){MainWindow.WindowState = WindowState.Maximized;MainWindow.MaxHeight = SystemParameters.MaximizedPrimaryScreenHeight;MainWindow.MaxWidth = SystemParameters.MaximizedPrimaryScreenWidth;}else{MainWindow.WindowState = WindowState.Normal;}Debug.WriteLine("最大化或正常窗口");});MiniWindow = new RelayCommand(() => {MainWindow.WindowState = WindowState.Minimized;Debug.WriteLine("缩小窗口");});}}
}

TitleViewModel

就是绑定按钮事件,我就不放了
详细代码看我的Gitee仓库地址

WPF仿网易云 Gitee仓库

实现效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/210753.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于以太坊的智能合约开发Solidity(函数继承篇)

参考教程&#xff1a;【实战篇】1、函数重载_哔哩哔哩_bilibili 1、函数重载&#xff1a; pragma solidity ^0.5.17;contract overLoadTest {//不带参数function test() public{}//带一个参数function test(address account) public{}//参数类型不同&#xff0c;虽然uint160可…

发送、接收消息,界面不及时刷新

发送、接收消息后 UI 没展示&#xff0c;不及时刷新&#xff0c;大概率 是 SDK 的 UI 刷新功能被干扰&#xff0c;参考下面排查&#xff1a; 检查 initWithAppkey 和 connectWithToken 使用的是否是 IMKit 核心类 RCIM 的方法&#xff0c;如果不是&#xff0c;请换成 RCIM 的。…

【刷题】位运算

2 n 2^n 2n 1<<n判断某一位是否为1 s&1<<k将上面两个组合&#xff0c;可以得到判断一个集合中哪些内容包含&#xff0c;遍历所有情况。 100140. 关闭分部的可行集合数目 一个公司在全国有 n 个分部&#xff0c;它们之间有的有道路连接。一开始&#xff0c;…

CentOS 7 离线安装达梦数据库8.0

前期准备工作 确认操作系统的版本和数据库的版本是否一致 ## 查看系统版本&#xff1a;cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core)关闭防火墙和Selinux # 查看selinux是不是disabled / enforce cat /etc/selinux/config## 查看防火墙状态 firewall-cmd …

数据结构之归并排序及排序总结

目录 归并排序 归并排序的时间复杂度 排序的稳定性 排序总结 归并排序 归并排序大家只需要掌握其递归方法即可&#xff0c;非递归方法由于在某些特殊场景下边界难控制&#xff0c;我们一般很少使用非递归实现归并排序。那么归并排序的递归方法我们究竟是怎样实现呢&#xff…

PHP医院手术麻醉系统源码,laravel、vue2 、mysql技术开发,自主知识产权,二开快捷

医院手术麻醉系统全套源码&#xff0c;有演示&#xff0c;自主知识产权 技术架构&#xff1a;PHP、 js 、mysql、laravel、vue2 手术麻醉临床信息管理系统是数字化手段应用于手术过程中的重要组成部分&#xff0c;用数字形式获取并存储手术相关信息&#xff0c;既便捷又高效。…

每日一练2023.12.10—— 倒数第N个字符串【PTA】

题目链接&#xff1a;L1-050 倒数第N个字符串 题目要求&#xff1a; 给定一个完全由小写英文字母组成的字符串等差递增序列&#xff0c;该序列中的每个字符串的长度固定为 L&#xff0c;从 L 个 a 开始&#xff0c;以 1 为步长递增。例如当 L 为 3 时&#xff0c;序列为 { a…

Qt Creator设置IDE的字体、颜色、主题样式

Qt是一款开源的、跨平台的C开发框架&#xff0c;支持Windows、Linux、Mac系统&#xff0c;从1995发布第一版以来&#xff0c;发展迅猛&#xff0c;最开始是用于Nokia手机的Symbian(塞班)系统和应用程序开发&#xff0c;现在是用于嵌入式软件、桌面软件(比如WPS、VirtualBox)、A…

【图论笔记】克鲁斯卡尔算法(Kruskal)求最小生成树

【图论笔记】克鲁斯卡尔算法&#xff08;Kruskal&#xff09;求最小生成树 适用于 克鲁斯卡尔适合用来求边比较稀疏的图的最小生成树 简记&#xff1a; 将边按照升序排序&#xff0c;选取n-1条边&#xff0c;连通n个顶点。 添加一条边的时候&#xff0c;如何判断能不能添加…

Python实现PDF-Excel

轻松解决PDF格式转Excel&#xff08;使用python实现&#xff09; 实现思路&#xff1a; 要将PDF转换为Excel&#xff0c;可以使用以下步骤&#xff1a; 解析PDF内容&#xff1a;首先&#xff0c;需要使用Python中的第三方库&#xff08;如PyPDF2、pdfminer等&#xff09;来解…

西南科技大学C++程序设计实验十二(文件流操作)

一、实验目的 1. 熟悉文件的基本操作; 2. 在类中添加打开文件、保存文件、读取文件等处理函数; 二、实验任务 1. 分析完善程序:主函数创建一个文件对象,每次打开文件,在其尾部添加数据。如果文件不存在,则新建该文件。请将空白处需要完善的功能补充完整。 #include …

mybatis-config.xml的配置

1&#xff1a;MyBatis 的常规配置文件 mybatis-config.xml 包含了对 MyBatis 框架的全局配置&#xff0c;下面是一个常见的示例&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD…

Java代码重构技巧:提高可维护性和可扩展性

引言&#xff1a; 在软件开发过程中&#xff0c;代码重构是一项非常重要的任务。通过对代码进行重构&#xff0c;可以提高代码的可维护性和可扩展性&#xff0c;减少代码的复杂度&#xff0c;增加代码的可读性和可测试性。本文将介绍一些常用的Java代码重构技巧&#xff0c;帮助…

HTML中表格的语法及使用(详解)

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍HTML中表格的语法及详细使用以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xff0c;友友们有任何问题可以在评论区留…

Java集合框架定义以及整体结构

目录 一、Java集合框架1.1 什么是java集合框架1.2 集合与数组 二、集合框架具体内容2.1 整体框架2.2 遗留类和遗留接口1.3 集合框架设计特点 参考资料 一、Java集合框架 1.1 什么是java集合框架 Java集合框架&#xff08;Java Collections Framework&#xff09;是Java平台提…

高云GW1NSR-4C开发板上手使用

1.开发板 核心板&#xff0c;主芯片GW1NSR-LV4CQN48P&#xff0c;丝印文字“奥陶纪Octet&#xff0c;QQ群808770961”&#xff1a; 晶振&#xff1a;27MHz&#xff0c;22引脚 两个按键&#xff1a;靠近中间&#xff0c;23引脚&#xff0c;按下为低电平&#xff1b;靠近外侧&…

Flink 读写 HBase 总结

前言 总结 Flink 读写 HBase 版本 Flink 1.15.4HBase 2.0.2Hudi 0.13.0官方文档 https://nightlies.apache.org/flink/flink-docs-release-1.17/zh/docs/connectors/table/hbase/ Jar包 https://repo1.maven.org/maven2/org/apache/flink/flink-sql-connector-hbase-2.2/1…

[Linux] yum安装分布式LNMP架构

1. 在一台主机安装nginx&#xff08;192.168.136.120&#xff09; 1.1 搭建nginx相关的yum源 cd /yum.repos.d mkdir bak mv *.repo bak vim /etc/yum.repos.d/nginx.repo [nginx-stable] namenginx stable repo baseurlhttp://nginx.org/packages/centos/7/$basearch/ gpgche…

基于Python+Django+mysql图书管理系统

基于PythonDjangomysql图书管理系统 一、系统介绍二、功能展示三、其它系统四、获取源码 一、系统介绍 程序开发软件&#xff1a;Pycharm 数据库&#xff1a;mysql 采用技术&#xff1a; Django(一个MVT框架&#xff0c;类似Java的SSM框架) 人生苦短&#xff0c;我用Python&a…

【rabbitMQ】rabbitMQ的下载,安装与配置

目录 1. 下载Erland 安装步骤&#xff1a; 配置环境变量&#xff1a; 校验环境变量配置是否成功 2.下载MQ 安装步骤&#xff1a; 添加可视化插件 &#xff1a; 启动&#xff1a; 拒绝访问 1. 下载Erland 因为rabbitMQ是基于Erland,所以在安装rabbitMQ之前需要安装Erla…