WPF开发总结之基础篇

基础篇主要争对C#初学者,巩固C#常用知识点;

中级篇主要争对WPF布局与MaterialDesign美化设计,在减轻代码量的情况做出漂亮的应用;

终极篇为框架应用实战,包含MVVM框架Prism,ORM框架EntityFramework Core,开源数据库Postgresql。

目录

Prism+MaterialDesign+EntityFramework Core+Postgresql WPF开发总结 之 基础篇

Prism+MaterialDesign+EntityFramework Core+Postgresql WPF开发总结 之 中级篇

Prism+MaterialDesign+EntityFramework Core+Postgresql WPF开发总结 之 终极篇(待续)

前言

WPF的发布同时伴随着MVVM框架的发布,此篇将围绕MVVM框架做表示与数据分离设计,包含基础UI设计以及MaterialDesign的高端设计。MVVM框架细节请参照终极篇。其中的一个效果图如下,其他效果图请往下看。

基础UI设计

用Windows Presentation Foundation (WPF),可以创建具有非凡视觉效果的桌面Windows 应用程序。目前.NET Core 3.0 支持使用 Windows Presentation Foundation (WPF) Windows 桌面应用程序,以后有可能扩展到其他OS平台。

WPF设计中使用的XAML标记语言,类似XML标记语言。XAML以及WPF自带的基础控件此处不做介绍可以参照微软文档。

一、常见布局

布局关键点就是不管什么像素下都能适应窗体大小。WPF内部提供了一套强大的布局系统,设计人员只需要使用相对定位布局就可以。

通用布局:网格,堆叠,停靠。掌握这三种差不多可以应对所有开发。

1、网格布局

也就是常用的Grid布局。通过行列把界面划分为网格,子控件指定相应的行列号布局到指定格子。

行与列的高宽可以使用【*】按比例划分,也可以使用【Auto】根据内容自动调整。默认情况下,行和列占用的空间量最少,以容纳给定行或列中包含的任何单元内的最大内容。

View Code

效果如图:大小随窗体自动调整。

2、堆叠

控件按指定方向排列,显示不下的时候根据所使用的控件不同会有区别。

StackPanel:子控件按垂直或水平堆叠,超出空间不换行。

VirtualizingStackPanel:子控件在水平或垂直的行上虚拟化并排列,超出空间不换行。(大量数据绑定时常用)

WrapPanel:子控件按从左到右的顺序定位,在当前行上的控件超出允许的空间时,换行到下一行。(列表模板常用)

View Code

效果如下:

StackPanel与VirtualizingStackPanel布局效果一样。WrapPanel比较特殊:指定水平方向堆叠时,水平放不下自动换成下一行显示;指定垂直方向堆叠时,垂直放不下时自动换成下一列显示。

3、停靠

DockPanel:子控件与面板的边缘对齐。这个分模块布局时用的最多。

View Code

效果如下:与Grid类似,不过是固定区域按方向自动延展。

二、式样与模板

通过定义式样和模板,重复使用它能让应用代码量下降,同时也方便以后维护修改。

1、式样 Style

View Code

自定义式样效果图:

2、模板 Template

WPF的所有控件都提供了默认的模板ControlTemplate,模板一般和式样结合使用。模板中需要特别学习VisualState和Trigger,通过VisualState可以设计在不同状态(鼠标按下,松开等)时控件显示样式,而通过Trigger可以让控件跟随参照对象数据或者绑定的数据做式样变化,内容比较多此篇不详细介绍。

如下是一个根据绑定的数据内容显示不同控件的例子。

View Code

效果如下:

 高端UI设计 MaterialDeisgn

它是Google开源的一套UI设计系统,用它可以设计出非常美观的Web页面,App,桌面程序,尤其是图标非常全面。有它你不用懂Photoshop也可以设计出高端的界面。

官网地址:https://material.io/

一、引入MaterialDesign

WPF专用的MaterialDesign开源代码地址:https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit

项目介绍网站:http://materialdesigninxaml.net/

1、添加MaterialDesignThemes包

2、编辑App.xaml添加资源 

全局引入MaterialDesign的资源文件

View Code

3、配置MaterialDesign参照和字体

添加命名空间和字体(字体对图标显示很重要),这样就可以使用它里面的控件了。

View Code

卡片效果:

二、使用MaterialDesign

场景一:登录界面

简单又美丽,图标都是MaterialDesign自带的。

猜你喜欢

转载自www.cnblogs.com/jsbuxgs/p/12671012.html