《wpfui制作剖析》由会员分享，可在线阅读，更多相关《wpfui制作剖析（44页珍藏版）》请在金锄头文库上搜索。
1、,项目二 WPF布局设计制作图书借阅系统UI,副教授 陈郑军,本章导读：,本章的主要内容是学习WPF的项目启动、窗体、布局控件和常规功能控件。然后通过项目“设计制作图书借阅系统UI”为导向，三个任务（登录窗体UI、注册窗体UI、主窗体的制作）为驱动，学习有关WPF的布局控件、功能控件和不规则窗体知识基础，本项目着力使学习者对WPF UI设计有个清晰的认识。,项目二 WPF布局设计制作图书借阅系统UI 任务三 设计图书借阅系统主窗口, http:/www.xunchi- http:/www.51xiu.org/ http:/www.gz- ,一、任务描述：,应用WPF控件完成图书借阅系统主窗口的
2、设计。,二、知识准备：,二、知识准备：,1、什么是控件？,WPF在组件化的基础上，使用专门的UI设计语言（XAML）并引入了数据驱动UI的理念。所以WPF控件称得上是新一代控件。 在WPF中控件是数据和行为的载体，在WPF中的控件只关注其功能的实现，其外在UI可能和传统控件差异很大。以按钮为例，其作用就是响应用户的单击行为，而它的外观则可以完全不是过去的方正类型，可以是文字，图片，甚至是动画等。,二、知识准备：,2、控件的类型,WPF拥有数量众多的控件，每个控件都有自己特色的功能和UI。根据控件是否可以装载内容、能够装载什么内容，我们可以将WPF的控件划分为八大类。,二、知识准备：,2、控件的
3、类型 （1）ContentControl类型,此类的控件均派生自ContentControl类，它们的内容属性的名称为Content，只能由单一的元素（一个普通内容或一个控件子节）充当其内容。,二、知识准备：,2、控件的类型 （1）ContentControl类型,如果我们希望按钮的内容既包含文本又包含图形则是不行的，这样Button就拥有两个子节了，会导致编译器报错：对象“Button”已经具有子级且无法添加“Image”。“Button”只能接受一个子级。,二、知识准备：,2、控件的类型 （1）ContentControl类型,如果真需要既有文本又有图形，甚至更为复杂的效果，其实解决方法也
4、很简单，我们将几个子内容都整合到一个布局控件中，让布局控件称为按钮的唯一子节，这样就符合要求了。,二、知识准备：,2、控件的类型 （2）HeaderedContentControl类型,此类控件都派生自HeaderedContentControl，而HeaderedContentControl是ContentControl类的派生类。它们主要用于显示带标题的数据，其内容属性为Content和Header。无论是Content还是Header都只能容纳一个元素（一普通内容或一个控件子节）作为其内容。,二、知识准备：,2、控件的类型 （2）HeaderedContentControl类型,二、知识
5、准备：,2、控件的类型 （3）ItemsControl类型,此类型的控件均派生自ItemsControl类，它们主要用于显示列表化的数据，其内容属性为Items或ItemsSource。每种ItemsControl类型控件均有自己的条目容器（ItemsContainer）,条目容器会自动对提交给它的内容进行包装。,二、知识准备：,2、控件的类型 （3）ItemsControl类型,二、知识准备：,2、控件的类型 （3）ItemsControl类型,对于这类集合类型的控件更常见的是用后台程序直接进行集合赋值， 或者绑定。,二、知识准备：,2、控件的类型 （4）HeaderedItemsContr
6、ol类型,此类型的所有控件均派生自HeaderedItemsControl类，主要用于显示列表化的数据，同时还可以显示一个标题。其内容属性为Items、ItemsSource和Header。 这类控件的应用类似于ItemsControl,二、知识准备：,2、控件的类型 （5）Decorator类型,此类型所有的控件均派生自Decorator类，主要用于在UI设计中起装饰效果比如加边框等。其内容属性为Child，只能由单一元素充当内容。 此类型控件较少被用到，其代表有Border、ViewBox等。,二、知识准备：,2、控件的类型 （6）TextBlock和TextBox类型,这两个控件最主要的
7、功能都是显示文本。TextBlock只能显示文本，不能编辑，所以又称为静态文本。 TextBlock的内容属性是Inlines来控制多行文本，同时它也具有Text属性，当简单的单行文本时就采用这个属性。 TextBox既能显示文本又能编辑文本，其内容属性为Text。在WPF下TextBox可以单行也可以多行，但不能在像C#一样设置为密码框了，现在有专门的密码框控件PasswordBox，它获取密码的属性也不再是Text，而是Password。,二、知识准备：,2、控件的类型 （6）TextBlock和TextBox类型,Label和TextBlock都是用于显示静态文本，但是TextBlock
8、直接继承于FrameworkElement,而Label继承于ContentControl 。这样Label就是个性化了的TextBlock有更多的功能和更复杂（禁用、热键等），效率没有TextBlock高。因此作为子级内容显示时优选TextBlock。,二、知识准备：,2、控件的类型 （7）Shape类,这个类型的成员均派生于Shape类，严格意义上并不是控件，它们只是简单的视觉元素，用来在UI上绘制一些2D图形，它们没有自己的内容，但是可以使用Fill属性为它们摄制填充效果，还可以使用Stroke属性为它们设置边线的效果。, http:/www.xunchi- http:/www.51xi
9、u.org/ http:/www.gz- ,二、知识准备：,2、控件的类型 （8）Panel类型,此类型所有控件均派生自Panel抽象类，主要功能是用于UI布局，其内容属性为Children。内容可以是多个元素，Panel元素将控制它们的布局。 虽然Panel类和ItemsControl类的控件的内容都可以是多个元素，但是两者区别很大。ItemsControl强调以列表的形式展现数据，而Panel则强调对包含的元素进行布局。,二、知识准备：,3、常见控件Menu （1）Menu控件的重要属性和行为,（1）Menu标签 作为菜单最外层标签，其主要功能是对菜单进行整体约定，常用属性包括菜单的对其属
10、性（如VerticalAlignment，可以设置菜单在窗体上的出现位置）、高度属性（Height）。,二、知识准备：,3、常见控件Menu （1） Menu控件的重要属性和行为,（2）MenuItem标签 MenuItem 是一个 HeaderedItemsControl，这意味着其标头和对象的集合可以是任何类型（如字符串、图像或面板）。MenuItem可包含子菜单。MenuItem 的子菜单由MenuItem 的 ItemCollection 中的对象组成。通常，MenuItem 会包含其他 MenuItem 对象以创建嵌套子菜单。,二、知识准备：,3、常见控件Menu （2） Menu菜
11、单项图标,二、知识准备：,3、常见控件Menu （2） Menu菜单项热键,二、知识准备：,3、常见控件Menu （2） Menu控件的重要属性和行为,（2）MenuItem标签 Command属性是用系统内置功能实现菜单操作响应，不用编写任何后台代码，比如选中内容的复制、剪切、粘贴和删除。,二、知识准备：,3、常见控件Menu （2） Menu控件的重要属性和行为,（2）MenuItem标签 IsCheckable属性是用于对一些系统菜单进行选择标记，类似复选框效果，可以选中，也可以去掉选中效果。每次状态变化会自动触发选中事件“Checked”和没有选中事件“Unchecked”。,二、知识
12、准备：,3、常见控件Menu （2） Menu控件的重要属性和行为,（2）MenuItem标签 Click事件处理是菜单响应用户选择事件的主要方式，多数情况下菜单项的单击事件我们都要通过后台编写代码来进行响应和处理，灵活性最好。菜单项单击事件的处理方法名称可以使用系统自动生成，也可以用户手动命名。为了程序更好的可读性和可维护性，建议为每个单击事件处理方法手动命名。,二、知识准备：,4、常见控件WPF工具栏和状态栏控件 （1）工具栏控件,ToolBar 控件是一组通常在功能上相关的命令或控件的容器。ToolBar 控件因其按钮或其他控件像条形栏一样排列成一行或一列而得名。ToolBar简单的说就
13、是一个容器，直接在其内部可以放入各种控件和分隔栏，然后就会整体呈现出来。,二、知识准备：,4、常见控件WPF工具栏和状态栏控件 （2）工具栏托盘,WPF ToolBar 控件通常还与相关的 ToolBarTray 控件一起使用，后者提供特殊的布局行为，并支持用户启动的工具栏大小调整和排列。ToolbarTray控件就是ToolBar控件的容器。在ToolBarTray中指定工具栏的位置，使用 Band和BandIndex属性可以在ToolBarTray中定位ToolBar。 Band 指示ToolBar在其父 ToolBarTray中的位置。 BandIndex 指示ToolBar放入其Ban
14、d中的顺序。,二、知识准备：,4、常见控件WPF工具栏和状态栏控件 （3）状态栏,状态栏控件通常置于窗体底部，用于显示一些状态文本信息。在WPF中，StatusBar控件也是一个容器控件，将要显示的信息都作为其下级元素。 为了状态栏信息能根据需要不断变化，其内部元素一般都要命名，以便于后台代码访问控制。同时如果需要状态栏右下角呈现调整区域，可以配置窗体的属性：ResizeMode = “CanResizeWithGrip“即可。,二、知识准备：,5、常见控件滚动条、进展条、滑动条 （1）滚动条、进展条、滑动条介绍,WPF提供了三个使用范围概念的控件（ScrollBar控件、ProgressBa
15、r控件及Slider控件），这些控件使用一个在特定最小值和最大值之间的数值。这些控件都继承自RangeBase类（该类又继承自Control类），不过尽管他们使用相同的抽象概念（范围），它们的外观和工作方式却有很大的区别。, http:/www.xunchi- http:/www.51xiu.org/ http:/www.gz- ,二、知识准备：,5、常见控件滚动条、进展条、滑动条 （2）滚动条、进展条、滑动条外观,三、任务分析：,主窗体由菜单、工具栏、背景和状态栏四个部分组成，本身窗体的用户区域并不设计具体功能，而是实现各个其他窗体的调度功能。 主窗体是整个图书管理系统的核心部分，它根据当前
16、登录用户权限灵活控制相关菜单项有效性，使得用户只能使用自己权限内的功能。同时也为用户提供了系统整体功能的方便接口。,四、任务实施：,1.直接对项目中默认创建的MainWindow窗体进行完善，修改其图标、边框调整模式、启动位置。 2.对主窗体的Grid进行划分，将其分为4行，第一行显示主菜单，第二行显示工具栏，最后一行显示状态栏，余下的显示背景图片。因为主菜单、工具栏和状态栏高度都不变，所以只有第三行设置为动态的宽度。,四、任务实施：,3.主窗体主要XAML （1）窗体部分,四、任务实施：,3.主窗体主要XAML （2）Grid布局部分,四、任务实施：,3.主窗体主要XAML （3）主菜单部分, , http:/www.xunchi- http:/www.51xiu.org/
