blend界面设计操作手册

编号： ****002 版本： V1.0

界面设计规范

用户操作手册

????

??????

作??????者?__ 林贤旺___ __ 完成日期?____2013-12-03____???签??收?人?____ _____ ____?签收日期?___ _________ _ ?

1

修改情况记录 序号 修改批准人

修改人 修改日期 签收人 ?

2

1引言 ............................................................................................................................................... 4 1.1编写目的 ................................................................................................................................. 4 1.2背景......................................................................................................................................... 4 2运行环境 ....................................................................................................................................... 4 2.1硬件设备 ................................................................................................................................. 4 2.2支持软件 ................................................................................................................................. 4 3使用过程 ....................................................................................................................................... 4 3.1安装与创建项目 ..................................................................................................................... 4 3.2.1 Blend安装 ....................................................................................................................... 4 3.2.1 Blend创建项目 ............................................................................................................... 5 3.2 常用控件说明 ........................................................................................................................ 9 3.2.1 Grid .................................................................................................................................. 9 3.2.2 StackPanel ...................................................................................................................... 10 3.2.3 Canvas ............................................................................................................................ 10 3.2.4 DockPanel ...................................................................................................................... 11 3.2.5 GridSplitter..................................................................................................................... 12 3.2.6 Button ............................................................................................................................. 13 3.2.7 TextBox .......................................................................................................................... 13 3.2.8 Label .............................................................................................................................. 14 3.2.9 TextBlock ....................................................................................................................... 14 3.2.10 TabControl .................................................................................................................... 15 3.2.11 DataGrid ....................................................................................................................... 16 3.2.12 GridControl .................................................................................................................. 18 3.2.13 GroupBox ..................................................................................................................... 21 3.3 引用三方控件 ...................................................................................................................... 24 3.4 界面设计模板 ...................................................................................................................... 25 3.4.1 单表模板 ....................................................................................................................... 25 3.4.2 主从表模板 ................................................................................................................... 26 3.4.3 主从从表模板 ............................................................................................................... 27

3

1引言

1.1编写目的

编写本报告的目的是为了说明blend这款软件对于界面设计的制作过程，提高用户的工作效率和工作质量。

1.2背景

软件系统名称：blend界面设计软件

2运行环境

2.1硬件设备

Blend硬件要求(建议)如下： (1) CPU: P4 以上 (2) 内存：4G

(3) 硬盘：60G以上

2.2支持软件

Blend软件要求(建议)如下：

(1) 操作系统：WINDOWS XP/7/8

3使用过程

3.1安装与创建项目 3.1.1 Blend安装

(1) 点击setup程序，选择安装路径，然后选择“下一步”， (2) 最后点“完成”。

4

3.1.2 Blend创建项目

(1) 选择

(2) 选择“新建项目”,跳出如下窗口：

打开blend界面

选择”wpf控件库”，填写名称，选择位置路径，然后点击“确定”，生成一个wpf控件库

(3) 创建界面文件，右击项目，从弹出菜单中，选择“添加新项”，如下图所示:

5

弹出如下窗口：

选择”usercontrol”类型，然后输入名称(可为中文),点击“确定”，生成一个用户控件类文件

(4) 拖拉控件，点击选择控件库，如下图所示：

6

输入控件名，获取所要拖入工作区的控件，如下图所示：

将控件拖入工作区,如下图所示：

7

点开右边属性栏，设置控件名称,如下图所示位置：

注： ? ? ?

：布局控件 ：文本控件

：内容控件和带标题的内容控件

? 拖位控件时，会出现四个点，四个点的连线，右边与下边，要用虚线，不能用

实线（实线：与右边框的实际距离，虚线：与右边框没有任何关系），如下图所示：

8

这样可以防止，控件在自定

义平台中，出现变形，控件位置不一致的问题

3.2 常用控件说明 3.2.1 Grid

?

：网格控件，主要是为了让控件可以按表格方式排列（宽：640

高：480）

设置grid的行和列（锁死），点击grid控件，如下图所示：

然后鼠标移动到上边框和左边框上，会出现一条灰色的线，由这条线来划分行和列，如下图所示：

注：

Width与height有三种设置方式：

? *:宽度与高度按比例大小来分配长度,如 2*:1* 表示按2：1的比例关系来

分配宽度或高度

? 固定长度：将宽度与高度设为绝对值

? 自动长度：宽度与高度按照界面大小，自动分配 ? UserControl在布局里面设置固定宽和高

9

3.2.2 StackPanel

? ：水平或垂直容器，可以横排或竖排控件,如下图所示：

布局Orientation:决定容器内的元素是竖排还是横排(Horizontal, Vertical)

竖排：

横排：

3.2.3 Canvas

?

：画布控件

可以准确定位到容器内的任何位置，如下图所示：

10

3.2.4 DockPanel

?

：锁定面板

布局LastChildFill：True与False

11

False True

3.2.5 GridSplitter

?

：网格分离控件

实现grid里面拖拽功能，如下图所示：

将gridsplitter放在grid的其中一个列里面，然后将griddplitter的VerticalAlignment 属性设为Stretch,如下图所示：

12

3.2.6 Button

?

:按钮控件，宽75 高 21

公共属性Content:可以设置按钮内容，如下图所示：

3.2.7 TextBox

? ：文本框控件

公共属性text：设置textbox控件的文本内容

13

3.2.8 Label

?

:标签控件

公共属性 Content：设置label的标签文本

3.2.9 TextBlock

? ：标签控件

公共属性Text：设置TextBlock的文本内容

14

3.2.10 TabControl

?

:多选项卡控件

公共属性Header：设置tabitem的标题

15

3.2.11 DataGrid

?

：数据网格控件

公共属性Columns（集合）：可以人工添加列（如果不添加的话，由系统内部自动产生），步骤如下图所示：

点击“?”，弹出如下界面：

16

点击“添加另一项”，选择列类型，如下图所示（一般选择datagridtextcolumn）：

通过Header可以修改列名，如下图所示：

17

得到最后效果，如下图所示：

3.2.12 GridControl

?

：dev的数据网格控件

数据Columns(集合)：可以人工添加列（如果不添加的话，由系统内部自动产生），步骤如下图所示：

点击“?”，弹出如下窗口：

18

点击“添加另一项”,弹出如下窗口：

19

选择gridcolumn来添加列，选择对应的gridcolumn,然后通过Header可以修改列名，如下图所示：

得到最后效

果，如下图所示：

20

3.2.13 GroupBox

?

：分组控件，可以对界面内容进行分组，可以通过设置属性

公共属性Header：设置groupbpx的标题，如下图所示：

21

注：groupbox中要加入一个grid控件

3.2.14 ComboBox

? :下拉控件，可以选择某一个字段内容

公共属性Items：添加下拉框的选择项

22

点击Items集合按钮,弹出如下界面：

点击“添加另一项”，弹出如下窗体：

23

选择comboboxItem，点击确定，选择comboboxitem选项，然后修改content属性值，如下图所示：

3.2.15 ListBox

? :单列列表控件

公共属性Items：添加单列列表控件的选择项

同上，不过这个是添加listboxitem

3.3 引用三方控件

(1) 选择“引用”文件夹，右击“添加引用”，弹出如下窗口：

24

(2) 选择你要引用的组件，点击“打开”，就会显示到引用文件夹当中，如下图所示：

(3) 得到你想要拖放的三方控件，如下图所示：

3.4 界面设计模板 3.4.1 单表模板

单表模板(参考)，如下图所示：

25

这是一个管理界面，里面的功能包括有添加，删除，修改和查询,里面是由按钮，grid，分页共同组成的界面,其中要关联的窗口是一个如下图所示的录入窗口：

3.4.2 主从表模板

主从表模板（参考）,如下图所示：

26

这个界面左边是一棵树,右边是根据选择的地区信息来展示各地区的用户信息的grid数据网格控件，grid上方是做添加，删除，修改和查询的按钮，下方是grid的分页控件,他们通过groupbox进行分隔。与此界面关联的录入窗口如下：

3.4.3 主从从表模板

主从从表模板(参考)，如下图所示：

27

左边是树，右边是选项卡控件，选择卡控件中一个放着地区的详细信息，另一个放

着各地区用户信息管理功能，底下放着，根据点击不同的用户来得到各用户的备忘录,这里面关联着如下两个录入界面：

28

3.4.4 双面选择器

双面选择器（参考），如下图所示：

(1) 先将grid隔出两个列来，先放在两个groupbox，拉至适当宽度，修改groupbox的名

称，如下图所示：

29

(2) 在第一个groupbox拖入treeview控件，在第二个groupbox拖入datagrid控件,如下

图所示：

30

(3) 点击datagrid，添加列（操作方法参见3.2.11）, 如下图所示：

左边点击treeview控件的子结点，右边显示子

31

结点的具体内容。

３.4.5单窗口深入

单窗口入深入（参考），如下图所示：

32

(1) 先将grid隔成4行2列，如下图所示:

(2) 在第一列拖入label控件，输入对应的标题，在第二列中拖入textblock控件，输入

对应内容，如下图所示：

33

３.4.6列表嵌入

列表嵌入（参考），如下图所示：

(1) 拖入一个dev的gridcontrol放入工作区,设置gridcontrol的数据模板，如下图所示

34

35

本文来源：https://www.bwwdw.com/article/557x.html