当前位置: 首页 > news >正文

WPF仿网易云搭建笔记(1):项目搭建

文章目录

  • 前言
  • 项目地址
  • 动态样式
  • 组合样式
  • 批量样式覆盖
  • Prism新建UserControler
  • 修改Material Design 笔刷
  • 收放列表
    • 可以滚动的StackPanel
    • 列表
    • 点击展开或折叠
  • 实现效果

前言

今天接着继续细化代码,把整体框架写出来

项目地址

WPF仿网易云 Gitee仓库

动态样式

【WPF】C#代码动态改变控件的样式

声明个Style变量

public class IconButton
{public string Name { get; set; }public string Icon { get; set; }public RelayCommand RelayCommand { get; set; }public Style Style { get; set; }
}

引入资源字典,通过Key查找样式

public ResourceDictionary StyleResource { get; set; }public TitileViewModel() {StyleResource = new ResourceDictionary(){//Uri路径是"/项目;componet/文件路径"Source = new Uri("/BlankApp1;component/ViewStyles/TitleStyle.xaml",UriKind.RelativeOrAbsolute)};IconButton = new IconButton(){Name = "EmailBox",Icon = "EmailBox",RelayCommand = new RelayCommand(() =>{Debug.WriteLine("按钮测试");}),Style = (Style)StyleResource["SelectIcon"]};
}

组合样式

但是我发现我用不了,这个好像不好用

[WPF]控件应用多个样式

批量样式覆盖

由于WPF的Style没有Css 的类选择器,而且WPF 不允许同时设置多个样式,所以WPF的样式写起来很啰嗦

批量样式设置可以设置某个控件的Resource,在里面添加Style

<Grid Background="#FF6666"><Grid.Resources><!--你的样式覆盖,这个会对所有的Grid里面的控件生效--><Style TargetType="TextBlock"BasedOn="{StaticResource TitleText}"></Style></Grid.Resources>
</Grid>

但是对于Materail Design 控件无效,需要特殊方法覆盖样式。但是根据我的测试,无法覆盖,只能硬写。要么就用数据模板批量赋值。我折腾了两天,想想还是放弃了,WPF 的Style 的缺陷没办法避免,写起来就是麻烦。

根据实际测试,只能覆盖原生的控件,不能覆盖Material Design的控件样式。

Overriding Material Design Styles

Prism新建UserControler

在这里插入图片描述

修改Material Design 笔刷

C# WPF Material Design MaterialDesignFlatButton Hint\HighLight Color

使用的Key覆盖的方法,将Material Design 的笔刷的Key覆盖。这也说明了为什么Material Design不能直接全局覆盖

在这里插入图片描述

在这里插入图片描述
为什么这么设置,就可能需要看源码了。这里面的Style依赖太过于复杂,我暂时就不去琢磨了。

根据我的测试,修改SolidColorBrush就可以了。

收放列表

在这里插入图片描述
这个分为两部分,按钮事件和列表展开收缩。

可以滚动的StackPanel

<!--在外侧添加一个ScrollViewer,我这里使用了VerticalScrollBarVisibility来隐藏滚动条-->
<ScrollViewer VerticalScrollBarVisibility="Hidden">
</ScrollViewer>

列表

新建一个List<`String>存放歌单

public List<string> MusicItems { get; set; }
.......MusicItems = new List<string>() {"五月天","夜曲","Deep Dark","Link Park","JoJo"
};

使用数据模板绑定数据源

<!--指定数据源-->
<ItemsControl ItemsSource="{Binding MusicItems}" Visibility="{Binding Visibility}"><!--数据容器选择StackPanel--><ItemsControl.ItemsPanel><ItemsPanelTemplate><StackPanel /></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate><Button><StackPanel Orientation="Horizontal"><MD:PackIcon Kind="MusicNoteSixteenth"Width="12"Height="12"VerticalAlignment="Center" /><!--如果是基本元素列表,直接Binding就好了--><TextBlock Text="{Binding}"FontSize="12"Margin=" 10 0 0 0" /></StackPanel></Button></DataTemplate></ItemsControl.ItemTemplate>
</ItemsControl>

点击展开或折叠

我这里没做动画,动画太难了,先实现基本逻辑

public partial class  LeftListViewModel : ObservableObject
{public List<string> MusicItems { get; set; }/// <summary>/// 歌单列表展开或者关闭/// </summary>public RelayCommand MusicItemsOpenOrClose { get; set; }/// <summary>/// 通过是否可见来设置列表/// </summary>[ObservableProperty]private Visibility visibility;public LeftListViewModel(){Visibility = Visibility.Hidden;MusicItems = new List<string>() {"五月天","夜曲","Deep Dark","Link Park","JoJo"};MusicItemsOpenOrClose = new RelayCommand(() => {if(Visibility == Visibility.Visible){Visibility = Visibility.Hidden;}else{Visibility = Visibility.Visible;}});}
}

然后在按钮上面添加点击事件

<Button Command="{Binding MusicItemsOpenOrClose}"><StackPanel Orientation="Horizontal"><MD:PackIcon Kind="FormatListBulleted"VerticalAlignment="Center" /><TextBlock Text="歌曲列表"Margin=" 10 0 0 0" /></StackPanel>
</Button>

完整代码可以看我的Gitee仓库

WPF仿网易云 Gitee仓库

实现效果

在这里插入图片描述

相关文章:

WPF仿网易云搭建笔记(1):项目搭建

文章目录 前言项目地址动态样式组合样式批量样式覆盖Prism新建UserControler修改Material Design 笔刷收放列表可以滚动的StackPanel列表点击展开或折叠 实现效果 前言 今天接着继续细化代码&#xff0c;把整体框架写出来 项目地址 WPF仿网易云 Gitee仓库 动态样式 【WPF】C#…...

DDOS 攻击是什么?有哪些常见的DDOS攻击?

DDOS简介 DDOS又称为分布式拒绝服务&#xff0c;全称是Distributed Denial of Service。DDOS本是利用合理的请求造成资源过载&#xff0c;导致服务不可用&#xff0c;从而造成服务器拒绝正常流量服务。就如酒店里的房间是有固定的数量的&#xff0c;比如一个酒店有50个房间&am…...

未来应用从何而来:认知力延伸、边界突破、回归云与产业

文 | 智能相对论 作者 | 沈浪 或许&#xff0c;谁也没想到未来应用来的如此之快&#xff0c;现如今传统应用从开发到体验&#xff0c;已经进入了一个前所未有的颠覆性改革阶段。 不久前&#xff0c;美国人工智能公司OpenAI举办开发者大会。在现场&#xff0c;公司创始人Sam …...

vue零基础

vue 与其他框架的对比 框架设计模式数据绑定灵活度文件模式复杂性学习曲线生态VueMVVM双向灵活单文件小缓完善ReactMVC单向较灵活all in js大陡丰富AngularMVC双向固定多文件较大较陡&#xff08;Typescript&#xff09;独立 更多对比细节&#xff1a;vue 官网&#xff1a;ht…...

html中一个div中平均一行分配四个盒子,可展开与收起所有的盒子

html中一个div中平均一行分配四个盒子&#xff0c;可展开与收起所有的盒子 1.截图显示部分 2.代码展示部分 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"wid…...

Python虚拟环境指南:告别依赖地狱

一、背景 在SAAS&#xff08;软件即服务&#xff09;平台中&#xff0c;用户使用自行定制的Python脚本已经成为司空见惯的做法&#xff0c;然而&#xff0c;由于不同用户对Python三方库的需求各不相同&#xff0c;而底层服务器一般只安装了一个Python版本。举例来说&#xff0…...

【Jeecg Boot 3 - 第二天】第2节 前后端docker部署云服务器

更新完成&#xff0c;点击下面章节进入 一、后端部署 1.1、后端 docker-compose 部署 JEECGBOOT 1.2、jar 包和 lib 依赖分离&#xff0c;部署包缩小100倍 二、前端部署 2.1、nginx 部署 JEECGBOOT VUE3 2.2、开启Nginx压缩&#xff0c;解决前端访问慢问题...

2020年第九届数学建模国际赛小美赛A题自由泳解题全过程文档及程序

2020年第九届数学建模国际赛小美赛 A题 自由泳 原题再现&#xff1a; 在所有常见的游泳泳姿中&#xff0c;哪一种最快&#xff1f;哪个冲程推力最大&#xff1f;在自由泳项目中&#xff0c;游泳者可以选择他们的泳姿&#xff0c;他们通常选择前面的爬行。然而&#xff0c;游泳…...

双端队列和优先级队列

文章目录 前言dequedeque底层设计迭代器设计 priority仿函数数组中的第k个最大元素优先级队列模拟实现pushpop调整仿函数存储自定义类型 前言 今天要介绍比较特殊的结构&#xff0c;双端队列。 还有一个适配器&#xff0c;优先级队列。 deque 栈的默认容器用了一个deque的东西…...

c#读取CSV文件跟Excel导入成DataTble

1.读取CSV文件 /// <summary>/// 读取CSV文件/// </summary>/// <param name"fileName">文件路径</param>public static DataTable ReadCSV(string fileName){DataTable dt new DataTable();FileStream fs new FileStream(fileName, FileM…...

Python编程技巧 – 单字符函数

Python编程技巧 – 单字符函数 Python Programming Skills – Single Character Function By JacksonML 0. 前言 Python有其内建(built-in)的一系列函数&#xff0c;其中&#xff0c;有两个函数为长度为一的字符设计。这样的函数是单字符函数&#xff0c;尽管它们操作的对象…...

xcode-文件

IOSDeviceSupoprt 共享缓存库 当你使用新的 iOS 设备连接到 Xcode 时&#xff0c;Xcode 会自动下载并存储相应版本的设备支持文件。 每个 iOS 版本都有一个对应的设备支持文件集&#xff0c;这些文件包含有关设备架构和操作系统的信息&#xff0c;以便 Xcode 能够正确地调试和…...

云原生之深入解析网络服务Istio、eBPF和RSocket Broker

一、服务治理 ① “服务治理”简介 在微服务时代&#xff0c;一个复杂的应用程序被分解为多个组件化、协作和连接的单元&#xff0c;服务往往会承担越来越多的业务责任&#xff0c;这使得服务治理的难度前所未有&#xff0c;仅仅依靠微服务框架级的治理是不够的&#xff0c;构…...

文件系统和磁盘调度

文件系统 概述 文件系统&#xff1a;一种用于持久性存储的系统抽象 在存储器上&#xff1a;组织、控制、导航、访问和检索数据大多数计算机包含文件系统 文件&#xff1a;文件系统中一个单元的相关数据在操作系统中的抽象 文件系统功能 分配文件磁盘空间 管理文件块管理空…...

C++ stringOJ练习题

目录 把字符串转换成整数 反转字符串 字符串中的第一个唯一字符 字符串最后一个单词的长度 找出字符串中第一个只出现一次的字符 字符串相加 字符串最后一个单词长度 字符串相乘 反转字符串3 反转字符串2 验证回文串 把字符串转换成整数 通过遍历字符串并逐位转换…...

解决问题:ImportError: cannot import name ‘_update_worker_pids‘

在复现一些较早年份文献时&#xff0c;网络架构是较早的Pytorch模型&#xff0c;现阶段的高版本不兼容&#xff0c;所以就得安装比如低版本的torch0.4.0以解决问题。 目录 一、问题1.1 问题分析 二、解决办法2.1 Pytorch安装2.2 torchvision安装2.3 测试是否安装成功 三、总结…...

【面试总结】Java面试题目总结(一)

&#xff08;以下仅为个人见解&#xff0c;如果有误&#xff0c;欢迎大家批评并指出错误&#xff0c;谢谢大家&#xff09; 1.项目中的验证码功能是如何实现的&#xff1f; 第一步&#xff1a;在项目的pom.xml文件中导入 EasyCaptcha 的依赖&#xff1b; <dependency>…...

大白话数据中台,何为数据中台

文章目录 一、数据中台二、本质三、构建数据中台的几个方面四、总结 最近一直在研发Ai平台&#xff0c;忙碌非凡。 在之余&#xff0c;有小伙伴质疑数据中台其实就是一个web系统&#xff0c;无法就是添加一些业务逻辑的增删改查。 答曰&#xff1a; 回去好好把科普下什么是数…...

escapeshellarg参数绕过和注入的问题

escapeshellcmd escapeshellcmd(string $command): string command--要转义的命令。 escapeshellcmd() 对字符串中可能会欺骗 shell 命令执行任意命令的字符进行转义。 此函数保证用户输入的数据在传送到 exec() 或 system() 函数&#xff0c;或者 执行操作符 之前进行转义。 …...

CSS——标准流、浮动、Flex布局

1、标准流 标准流也叫文档流&#xff0c;指的是标签在页面中默认的排布规则&#xff0c;例如&#xff1a;块元素独占一行&#xff0c;行内元素可以一行显示多个。 2、浮动 作用&#xff1a;让块元素水平排列 属性名&#xff1a;float 属性值&#xff1a; left&#xff1a;…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...