• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言

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

效果预览

先来看看成果:





再来看看跟动漫中的对比:

(其实登陆界面我还做了那个NERvGear登录时的样式,然而GIF图太大了传不上来。。。)

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

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

  1. 首先打开Blend for Visual Studio 2019,新建一个WPF应用工程:
  2. 建好工程后在左侧对象和时间线一栏中点击Window,左边会出现属性窗口,修改Width和Height属性可以自行调整窗口大小
  3. 在属性栏中外观一栏,将WindowStyle属性修改为None,并勾选AllowsTransparency属性来将传统的窗体边框去掉
  4. 在画笔栏中选择Background属性,将其修改为无画笔,就会去掉窗体白底,留下一个框。改为纯色画笔,就会为窗体添加一个纯色背景。改为渐变画笔会添加一个渐变背景。而选择平铺画笔则可以从系统中选取一张图片作为窗体背景。


  5. 在属性栏的外观中找到Opacity属性,调整它的百分比可以调整窗体的透明程度(对控件也是一样)。
    (由于直接使用Background属性不方便实现桐老爷面前的窗口样式,所以我选择了无画笔,通过Rectangle控件自行对背景进行编辑,各位也可以按照自己的想法自行设计。)

控件样式模板

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

  1. 长按设计器左边工具栏中的矩形,在弹出栏中选择椭圆型,然后在窗体中按住shift键绘制一个正圆
  2. 点击画好的圆,选择上方工具-构成控件,在弹出窗口中选择Button,名称按照自己习惯的方式进行命名,然后选择定位位置(三个都可以,但是我建议新建一个资源字典文件,将所有的样式模板都放到这个文件中去),点击确定,进入模板编辑界面
  3. 在左侧对象和时间线中,可以看到一个ButtonStyle1(Button Template),代表进入了ButtonStyle1模板编辑界面。选择Ellipse,修改其Fill属性为平铺画笔,ImageSource选择想要的按键样式图片
  4. 点击ButtonStyle1(Button Template)左边的向上箭头,退出模板编辑界面,可以看到我们开始添加的椭圆形已经变成了Button控件,并且样式变成了我们修改后的样式
  5. 将该Button的Content属性中的内容删掉,修改Cursor属性为Hand,点击运行。将鼠标移到按键上时,鼠标变成了手的样式。只不过我们点击的时候没有反应,这是因为我们没有为该控件模板添加点击动画,接下来我们就来解决这个问题
  6. 右键单击对象和时间线中的Button,选择编辑模板-编辑当前项,进入模板编辑界面
  7. 点击下图位置新建一个故事板,按自己习惯进行命名,点击确定后会出现时间线栏
  8. 在时间线栏中,0时刻时保持不变,什么也不需要改变,0.1ms时刻时,修改Ellipse对象的Opacity属性为35%,以此动画作为按键按下时的动画
  9. 新建第二个故事板作为按键松开时的动画。0时刻时Ellipse对象的Opacity属性设置为35%,0.1ms时刻时恢复原状,变为100%

  10. 编辑好两个故事板后,点击触发器,选择IsPressed事件,点击**时的操作右边的加号,选择按下动画的故事板。再点击停用时的操作,选择松开动画的故事板。
  11. 退出模板编辑界面,点击启动,会发现Button的按下松开动画被设置成功。
  12. 其实不只是IsPressed事件,还有IsMouseOver事件也可以添加动画,这个事件是鼠标悬浮在控件上的事件,通俗来讲,就是当鼠标进入控件范围时,该事件触发,离开控件范围时,该事件停止。此处就不演示如何添加这个动画了,请大家自行尝试。

C#连接服务器端

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
C#图解教程 第十三章 委托发布时间:2022-07-10
下一篇:
在C#中如何将数据到出到Excel12.0(Office2007)中.发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap