《注册窗体UI制作》PPT课件.ppt

,项目二WPF布局设计制作图书借阅系统UI,副教授陈郑军,本章导读：,本章的主要内容是学习WPF的项目启动、窗体、布局控件和常规功能控件。然后通过项目“设计制作图书借阅系统UI”为导向，三个任务（登录窗体UI、注册窗体UI、主窗体的制作）为驱动，学习有关WPF的布局控件、功能控件和不规则窗体知识基础，本项目着力使学习者对WPFUI设计有个清晰的认识。,项目二WPF布局设计制作图书借阅系统UI任务二设计图书借阅系统用户注册界面,一、任务描述：,理解并遵循WPF布局的基本原则，选择恰当的布局元素，设计并制作出图书借阅系统的用户注册界面,二、知识准备：,二、知识准备：,1、理解WPF布局,WPF用不同的容器（Container）安排布局。每个容器有它自己的布局逻辑。如果曾经用过窗体编写过程序，就会惊奇地发现在WPF中非常抵制基于坐标的布局。反而更注重创建更灵活的布局，以使布局能够适应内容的变化、不同的语言以及各种窗体尺寸。对于迁移到WPF的大多数开发人员而言，新布局系统是非常令人惊奇的也是第一个真正的挑战。,二、知识准备：,2、WPF布局的原则,为了更好的制作WPF窗口，需要遵循以下几个重要原则：1.不应显式设定元素（例如控件）的尺寸。反而，元素应当可以改变尺寸以适合它们的内容。例如，当添加更多的文本时按钮应当能够展开。可以通过设置最大和最小尺寸来限制可以接受的控件尺寸范围。2.不应使用屏幕坐标指定元素的位置。反而，元素应当由它们的容器，根据它们的尺寸、顺序以及（可选的）其他特定于具休布局容器的信息进行安排。如果需要在元素之间添加空白空间，可以使用Margin属性。,二、知识准备：,2、WPF布局的原则,3.布局容器和它门的子元素“共享”可以使用的空间。如果空间允许，布局容器会（根据元素的内容）尽可能为所含的元素设置更合适的尺寸。它们还会向一个或多个子元素分配多余的空间。4.可以嵌套布局。一个典型的用户界面使用Grid面板作为开始，Grid面板是WPF中功能最强大的布局控件，并且Grid面板可以包含其他布局容器。包含的这些容器以更小的分组安排元素，如带有标题的文本框、列表框中的项目、工具栏上的图标以及一系列的按钮等。,二、知识准备：,3、WPF布局过程,WPF布局包括两个阶段：（1）测量阶段（2）排列阶段。在测量阶段，容器遍历所有子元素，并询问子元素它们所期望的尺寸。在排列阶段，容器在合适的位置放置子元素。,二、知识准备：,4、布局元素Grid,顾名思义，Grid元素会以网格的形式对内容元素们(即它的Children)进行布局。1.Grid的特点（1）可以定义任意数量的行和列，非常灵活。（2）行的高度和列的宽度可以使用绝对数值、相对比例或自动调整的方式进行精确设定，并可设置最大和最小值。（3）内部元素可以设置自己的所在的行和列，还可以设置白己纵向跨几行、横向跨几列。（4）可以设置Children元素的对齐方向。,二、知识准备：,4、布局元素Grid,基于上述特点，Grid适用的场合有:（1）UI布局的大框架设计。（2）大量LJI元素需要成行或者成列对齐的情况。（3）UI整体尺寸改变时，元素需要保持固有的高度和宽度比例。（4）UI后期可能有较大变更或扩展。,二、知识准备：,4、布局元素Grid(1)Grid的行列的定义,二、知识准备：,4、布局元素Grid(1)Grid划分效果：,二、知识准备：,4、布局元素Grid,它的功能是把Grid定义为2行3列，如果去掉高度和宽度属性值，Grid将会平均分布行和列。如果需要动态调整Grid的布局，可以利用后台C#代码进行。假设当前窗体含有一个名为myGrid的Grid元素，通过窗体Loaded事件可以进行如下的行列添加操作。这种操作特别适合一些动态布局，比如围棋棋盘，扫雷等区域会灵活变化的布局。,二、知识准备：,4、布局元素Grid,privatevoidWindow_Loaded(objectsender,RoutedEventArgse)myGrid.Width=250;myGrid.Height=100;myGrid.HorizontalAlignment=HorizontalAlignment.Left;myGrid.VerticalAlignment=VerticalAlignment.Top;myGrid.ShowGridLines=true;/DefinetheColumnsColumnDefinitioncolDef1=newColumnDefinition();ColumnDefinitioncolDef2=newColumnDefinition();ColumnDefinitioncolDef3=newColumnDefinition();,二、知识准备：,4、布局元素Grid,/-接上页myGrid.ColumnDefinitions.Add(colDef1);myGrid.ColumnDefinitions.Add(colDef2);myGrid.ColumnDefinitions.Add(colDef3);/DefinetheRowsRowDefinitionrowDef1=newRowDefinition();RowDefinitionrowDef2=newRowDefinition();myGrid.RowDefinitions.Add(rowDef1);myGrid.RowDefinitions.Add(rowDef2);,二、知识准备：,4、布局元素Grid,实际应用中我们除了定义行列外，最重要的还要设置行的高度和列的宽度才能满足真实项目布局的需要。对行高和列宽我们可以设置三类值：（1）绝对值：数值后加上单位。（2）比例值：数值后加上一个星号。前面案例就是这样的。（3）自动制：Auto。对于控件的高度和宽度不需要改变，或者是该行或列是专门用于精确间隔的时候，应该选用绝对值。而对于比例值，解析器会把所有的数值作为总和，单项的数值作为分子，然后将当前Grid的具体像素值与之相乘得到的结果作为其确切的值。这种方式最大的好处就是UI的整体尺寸变化时，比例值项目的行或列会保持其固有比例，也就是说能自动适应变化。,二、知识准备：,4、布局元素Grid（2）使用Grid布局,一旦Grid进行了行列划分，放入Grid的控件就必须明确其布局归属。Grid中控件的布局行列归属是通过控件属性中的“Grid.Row”（行号）和“Grid.Column”（列号）来设定的。需要注意的是编号范围都是0N-1。如果一个控件需要跨多个行或列，还要结合使用“Grid.RowSpan”（跨行数）和“Grid.ColumnSpan”（跨列数）。,二、知识准备：,4、布局元素Grid（2）使用Grid布局,二、知识准备：,4、布局元素Grid（2）使用Grid布局,二、知识准备：,4、布局元素Grid（2）使用Grid布局,二、知识准备：,4、布局元素Grid（2）使用Grid布局,二、知识准备：,5、布局元素StackPanel,StackPanel可以把内部元素在纵向或横向上紧凑排列、形成栈式布局，通俗地讲就是把内部元素像搭积木一样“撂起来”，当把排在前面的积木块抽掉之后排在它后面的元素会整休向前移动、占领原有元素的空间。StackPanel适合的场合（1）同类元素需要紧凑排列（如制作菜单或者列表）。（2）移除其中的元素后能够自动补缺的布局或者动画。,二、知识准备：,5、布局元素StackPanel（1）StackPanel的属性,StackPanel使用3个属性来控制内部元素的布。（1）Orientation属性，决定内部元素是横向累积还是纵向累积。（2）HorizontalAlignment属性，决定内部元素水平方向上的对齐方式。（3）VerticalAlignment属性，决定内部元素垂直方向上的对齐方式。StackPanel虽然看上去很简单，但是实际应用具有很多不可替代的优势。在内部条目会发生变化的应用场合，StackPanel能让后续内容自动补齐移动开项目的区域，而无需任何编码。同时其内部控件也不需要像Grid一样设定具体行列位置等信息，操作更为简便。,二、知识准备：,5、布局元素StackPanel（1）StackPanel的属性,二、知识准备：,5、布局元素StackPanel（1）StackPanel的案例效果,二、知识准备：,6、布局元素Canvas,Canvas译成中文就是“画布”，显然，在Canvas里布局就像在画布上画控件一样。使用Canvas布局与在WindowsForm窗休上布局基本是一样的，只是在WindowsForm开发时我们通过设置控件的Left和Top等属性来确定控件在窗体上的位置，而WPF的控件没有Left和Top等属性，就像把控件放在Grid里时会被附加上Grid.Column和Grid.Row属性一样，当控件被放置在Canvas里时就会被附加Canvas.X和Canvas.Y属性。Canvas很容易被从WindowsForm迁移过来的程序员所滥用，实际上大多数时候我们都可以使用Grid或StackPanel等布局元素产生更简洁的布局。,二、知识准备：,6、布局元素Canvas1.Canvas适用的场合,（1）一经设计基本上不会再有改动的小型布局（如图标）。（2）艺术性比较强的布局。（3）需要大量使用横纵坐标进行绝对点定位的布局。（4）依赖于横纵坐标的动画。,二、知识准备：,6、布局元素Canvas2.布局案例,二、知识准备：,6、布局元素Canvas2.Canvas布局案例,二、知识准备：,4、布局元素DockPanel（1）使用DockPanel布局,DockPanel内的元素会被附加DockPanel.Dock这个属性，这个属性的数据类型为Dock枚举。Dock枚举可取Left，Top，Right和Bottom四个值。根据Dock属性值。DockPanel内的元素会向指定方向累积、切分DockPanel内部的剩余可用空间，就像船舶靠岸一样。DockPanel还有一个重要属性bool类型的LastChildFill，它的默认值是True当LastChildFill属性的值为True时，DockPanel内最后一个元素的DockPanel.Dock属性值会被忽略，这个元素会把DockPanel内部所有剩余空间充满。这也正好解释了为什么Dock枚举类型没有Fill这个值。,二、知识准备：,7、布局元素DockPanel（2）使用DockPanel布局,二、知识准备：,7、布局元素DockPanel（2）使用DockPanel布局效果,二、知识准备：,8、布局元素WrapPanel（1）WrapPanel属性,WrapPanel内部采用的是流式布局，在流延伸的方向上会排列尽可能多的控件，排不下的控件将会新起一行或一列继续排列。WrapPanel使用Orientation属性来控制流延伸的方向，使用HorizontalAlignment和VerticalAlignment两个属性控制内部控件的对齐。,二、知识准备：,8、布局元素WrapPanel（2）使用WrapPanel布局,二、知识准备：,8、布局元素WrapPanel（2）使用WrapPanel布局效果,三、任务分析：,1、登录窗体的需求分析,本任务要求完成管理用户信息的注册功能，根据图书借阅系统用户表字段需求，确定注册窗体要获得的信息包括：帐号、口令、权限。再结合四大权限（用户管理、读者管理、图书管理、借阅管理），确定窗体需要接受一个用户帐号、二次口令输入和四个权限的组合结果。帐号和口令采用文本框，为防止数据字段越界，限制文本框的最长20个字符，用户权限因为可以多选，就采用复选框来完成。同时对于注册和关闭按钮为了操作更便捷，还要设置它们分别为缺省按钮（IsDefault=true）和取消按钮（IsCancel=true），即能响应回车和Esc按键。,四、任务实施：,1.新增一个WPF窗体命名为frmRegister。2.根据注册信息需求初步设计注册窗体控件需求和布局。因为用户注册窗体的信息都是简单的控件，不会因为内容过多而需要延伸或放缩，所以采用固定的大小模式比较好。Grid布局将窗体分为上下两部分，上面放单位Logo，下面进行注册界面设计。注册界面部分使用Canvas布局，该布局最大的好处是精准的对其方式特别适合固定页面的呈现。对用户权限部分采用GroupBox和StackPanel、WrapPanel搭配的做法，前者实现提示信息的图文显示，后者实现多个权限复选框的水平排列。控件排版中合理利用了Margin来实现内容的规范对齐，特别是不同高度的图文对齐。,四、任务实施：,3.注册窗体主要XAML（1）窗体设置部分,四、任务实施：,3.登录窗体主要XAML（2）Grid布局和Logo图片部分,四、任务实施：,3.登录窗体主要XAML（3）注册控件输入部分,四、任务实施：,3.登录窗体主要XAML（3）注册控件权限部分,四、任务实施：,3.登录窗体主要XAML（3）注册按钮控件部分,四、任务实施：,5.登录窗体运行效果,1本任务介绍了WPF的布局控件及其用法。注意掌握各自的特点，并根据需要合理选用。2本任务演示了利用WPF布局控件进行布局的一些应用。注意吸取这些案例的经验，克服传统C#应用程序设计布局带来的影响，真正掌握WPF布局。,五、任务小结：,谢谢观看,