(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端

“这虽然是游戏,但可不是闹着玩儿的”

  • 前言
    • 效果预览
    • WPF Blend入门之新建工程并修改为自定义窗口
    • 控件样式模板
    • C#连接服务器端

前言

首先在这里先自己庆祝一下,历时接近一年半,终于考上北航的研究生了555。复试完以后想着没啥事情做感到空虚,而且前段时间下文件的时候着实被百度云给恶心到了,就想着自己做一个私有云盘。受SAO utils的启发,正好,目前距离桐老爷播出还有20天就满8周年了,做个SAO风格的界面岂不美滋滋(此处非常感谢SAO utils的制作团队,我从你们这里扒了好多资源-_-!)。好了,废话不多说,我们直接开始。

效果预览

先来看看成果:
(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第1张图片
(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第2张图片
(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第3张图片
(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第4张图片
(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第5张图片
再来看看跟动漫中的对比:
(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第6张图片
(其实登陆界面我还做了那个NERvGear登录时的样式,然而GIF图太大了传不上来。。。)

WPF Blend入门之新建工程并修改为自定义窗口

因为窗口并不是windows传统窗体,所以首先要做的就是如何用blend设计一个自定义窗体。

  1. 首先打开Blend for Visual Studio 2019,新建一个WPF应用工程:
    (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第7张图片
  2. 建好工程后在左侧对象和时间线一栏中点击Window,左边会出现属性窗口,修改Width和Height属性可以自行调整窗口大小(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第8张图片
  3. 在属性栏中外观一栏,将WindowStyle属性修改为None,并勾选AllowsTransparency属性来将传统的窗体边框去掉(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第9张图片
  4. 在画笔栏中选择Background属性,将其修改为无画笔,就会去掉窗体白底,留下一个框。改为纯色画笔,就会为窗体添加一个纯色背景。改为渐变画笔会添加一个渐变背景。而选择平铺画笔则可以从系统中选取一张图片作为窗体背景。(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第10张图片
    (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第11张图片
    (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第12张图片
    (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第13张图片
  5. 在属性栏的外观中找到Opacity属性,调整它的百分比可以调整窗体的透明程度(对控件也是一样)。(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第14张图片
    (由于直接使用Background属性不方便实现桐老爷面前的窗口样式,所以我选择了无画笔,通过Rectangle控件自行对背景进行编辑,各位也可以按照自己的想法自行设计。)

控件样式模板

WPF在设计控件上比WinForm不知道要简单到哪里去了,WinForm想要设计自定义控件就只有通过GDI+绘图接口对控件进行重绘。多重绘几个控件CPU的占用率就奔着80%去了,这也是为什么许多人说WinForm拿来写写作业啥的就行了,真正干活还是要用WPF。接下来我们以Button为例,来看看如何设计一个自定义样式模板。

  1. 长按设计器左边工具栏中的矩形,在弹出栏中选择椭圆型,然后在窗体中按住shift键绘制一个正圆(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第15张图片
  2. 点击画好的圆,选择上方工具-构成控件,在弹出窗口中选择Button,名称按照自己习惯的方式进行命名,然后选择定位位置(三个都可以,但是我建议新建一个资源字典文件,将所有的样式模板都放到这个文件中去),点击确定,进入模板编辑界面
    (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第16张图片
  3. 在左侧对象和时间线中,可以看到一个ButtonStyle1(Button Template),代表进入了ButtonStyle1模板编辑界面。选择Ellipse,修改其Fill属性为平铺画笔,ImageSource选择想要的按键样式图片
    (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第17张图片
  4. 点击ButtonStyle1(Button Template)左边的向上箭头,退出模板编辑界面,可以看到我们开始添加的椭圆形已经变成了Button控件,并且样式变成了我们修改后的样式
    (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第18张图片
  5. 将该Button的Content属性中的内容删掉,修改Cursor属性为Hand,点击运行。将鼠标移到按键上时,鼠标变成了手的样式。只不过我们点击的时候没有反应,这是因为我们没有为该控件模板添加点击动画,接下来我们就来解决这个问题
    (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第19张图片
  6. 右键单击对象和时间线中的Button,选择编辑模板-编辑当前项,进入模板编辑界面(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第20张图片
  7. 点击下图位置新建一个故事板,按自己习惯进行命名,点击确定后会出现时间线栏
    (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第21张图片
  8. 在时间线栏中,0时刻时保持不变,什么也不需要改变,0.1ms时刻时,修改Ellipse对象的Opacity属性为35%,以此动画作为按键按下时的动画
    (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第22张图片
  9. 新建第二个故事板作为按键松开时的动画。0时刻时Ellipse对象的Opacity属性设置为35%,0.1ms时刻时恢复原状,变为100%
    (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第23张图片
    (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第24张图片
  10. 编辑好两个故事板后,点击触发器,选择IsPressed事件,点击激活时的操作右边的加号,选择按下动画的故事板。再点击停用时的操作,选择松开动画的故事板。
    (C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第25张图片
  11. 退出模板编辑界面,点击启动,会发现Button的按下松开动画被设置成功。(C# WPF Blend for Visual Studio 2019)设计一个刀剑神域风格的云盘客户端_第26张图片
  12. 其实不只是IsPressed事件,还有IsMouseOver事件也可以添加动画,这个事件是鼠标悬浮在控件上的事件,通俗来讲,就是当鼠标进入控件范围时,该事件触发,离开控件范围时,该事件停止。此处就不演示如何添加这个动画了,请大家自行尝试。

C#连接服务器端

因为我的服务器就是个树莓派,挂在本地局域网内的,所以我采用的方式就是SSH登录的方式。现在网上有专门针对C#进行SSH链接的开源库SharpSSH,大家可以自行查阅一下文档,使用起来非常方便,此处因为和WPF无关,就不再赘述了。

你可能感兴趣的:(WPF应用,windows,wpf)