blend界面设计操作手册

编号：****002版本：V1.0界面设计规范用户操作手册作者__林贤旺_____完成日期____2013-12-03____签收人_____________签收日期_____________修改情况记录序号修改批准人修改人修改日期签收人TOC\o"1-3"\h\z1引言 41.1编写目的 41.2背景 42运行环境 42.1硬件设备 42.2支持软件 43使用过程 43.1安装与创建项目 43.2.1Blend安装 43.2.1Blend创建项目 53.2常用控件说明 83.2.1Grid 83.2.2StackPanel 93.2.3Canvas 103.2.4DockPanel 103.2.5GridSplitter 113.2.6Button 123.2.7TextBox 133.2.8Label 133.2.9TextBlock 143.2.10TabControl 143.2.11DataGrid 153.2.12GridControl 173.2.13GroupBox 203.3引用三方控件 213.4界面设计模板 223.4.1 单表模板 223.4.2 主从表模板 233.4.3 主从从表模板 241引言1.1编写目的编写本报告的目的是为了说明blend这款软件对于界面设计的制作过程，提高用户的工作效率和工作质量。1.2背景软件系统名称：blend界面设计软件2运行环境2.1硬件设备Blend硬件要求(建议)如下：CPU:P4以上内存：4G硬盘：60G以上2.2支持软件Blend软件要求(建议)如下：操作系统：WINDOWSXP/7/83使用过程3.1安装与创建项目3.1.1Blend安装点击setup程序，选择安装路径，然后选择“下一步”，最后点“完成”。3.1.2Blend创建项目选择打开blend界面选择“新建项目”,跳出如下窗口：选择”wpf控件库”，填写名称，选择位置路径，然后点击“确定”，生成一个wpf控件库创建界面文件，右击项目，从弹出菜单中，选择“添加新项”，如下图所示:弹出如下窗口：选择”usercontrol”类型，然后输入名称(可为中文),点击“确定”，生成一个用户控件类文件拖拉控件，点击选择控件库，如下图所示：输入控件名，获取所要拖入工作区的控件，如下图所示：将控件拖入工作区,如下图所示：点开右边属性栏，设置控件名称,如下图所示位置：注：：布局控件：文本控件：内容控件和带标题的内容控件拖位控件时，会出现四个点，四个点的连线，右边与下边，要用虚线，不能用实线（实线：与右边框的实际距离，虚线：与右边框没有任何关系），如下图所示：这样可以防止，控件在自定义平台中，出现变形，控件位置不一致的问题3.2常用控件说明3.2.1Grid：网格控件，主要是为了让控件可以按表格方式排列（宽：640高：480）设置grid的行和列（锁死），点击grid控件，如下图所示：然后鼠标移动到上边框和左边框上，会出现一条灰色的线，由这条线来划分行和列，如下图所示：注：Width与height有三种设置方式：*:宽度与高度按比例大小来分配长度,如2*:1*表示按2：1的比例关系来分配宽度或高度固定长度：将宽度与高度设为绝对值自动长度：宽度与高度按照界面大小，自动分配UserControl在布局里面设置固定宽和高3.2.2StackPanel：水平或垂直容器，可以横排或竖排控件,如下图所示：布局Orientation:决定容器内的元素是竖排还是横排(Horizontal,Vertical)竖排：横排：3.2.3Canvas：画布控件可以准确定位到容器内的任何位置，如下图所示：3.2.4DockPanel：锁定面板布局LastChildFill：True与FalseTrueFalseTrueFalse3.2.5GridSplitter：网格分离控件实现grid里面拖拽功能，如下图所示：将gridsplitter放在grid的其中一个列里面，然后将griddplitter的VerticalAlignment属性设为Stretch,如下图所示：3.2.6Button:按钮控件，宽75高21公共属性Content:可以设置按钮内容，如下图所示：3.2.7TextBox：文本框控件公共属性text：设置textbox控件的文本内容3.2.8Label:标签控件公共属性Content：设置label的标签文本3.2.9TextBlock：标签控件公共属性Text：设置TextBlock的文本内容3.2.10TabControl:多选项卡控件公共属性Header：设置tabitem的标题3.2.11DataGrid：数据网格控件公共属性Columns（集合）：可以人工添加列（如果不添加的话，由系统内部自动产生），步骤如下图所示：点击“…”，弹出如下界面：点击“添加另一项”，选择列类型，如下图所示（一般选择datagridtextcolumn）：通过Header可以修改列名，如下图所示：得到最后效果，如下图所示：3.2.12GridControl：dev的数据网格控件数据Columns(集合)：可以人工添加列（如果不添加的话，由系统内部自动产生），步骤如下图所示：点击“…”，弹出如下窗口：点击“添加另一项”,弹出如下窗口：选择gridcolumn来添加列，选择对应的gridcolumn,然后通过Header可以修改列名，如下图所示：得到最后效果，如下图所示：3.2.13GroupBox：分组控件，可以对界面内容进行分组，可以通过设置属性公共属性Header：设置groupbpx的标题，如下图所示：注：groupbox中要加入一个grid控件3.2.14ComboBox:下拉控件，可以选择某一个字段内容公共属性Items：添加下拉框的选择项点击Items集合按钮,弹出如下界面：点击“添加另一项”，弹出如下窗体：选择comboboxItem，点击确定，选择comboboxitem选项，然后修改content属性值，如下图所示：3.2.15ListBox:单列列表控件公共属性Items：添加单列列表控件的选择项同上，不过这个是添加listboxitem3.3引用三方控件选择“引用”文件夹，右击“添加引用”，弹出如下窗口：选择你要引用的组件，点击“打开”，就会显示到引用文件夹当中，如下图所示：得到你想要拖放的三方控件，如下图所示：3.4界面设计模板单表模板单表模板(参考)，如下图所示：这是一个管理界面，里面的功能包括有添加，删除，修改和查询,里面是由按钮，grid，分页共同组成的界面,其中要关联的窗口是一个如下图所示的录入窗口：主从表模板主从表模板（参考）,如下图所示：这个界面左边是一棵树,右边是根据选择的地区信息来展示各地区的用户信息的grid数据网格控件，grid上方是做添加，删除，修改和查询的按钮，下方是grid的分页控件,他们通过groupbox进行分隔。与此界面关联的录入窗口如下：主从从表模板主从从表模板(参考)，如下图所示：左边是树，右边是选项卡控件，选择卡控件中一个放着地区的详细信息，另一个放着各地区用户信息管理功能，底下放着，根据点击不同的用户来得到各用户的备忘录,这里面关联着如下两个录入界面：双面选择器双面选择器（参考），如下图所示：先将grid隔出两个列来，先放在两个groupbox，拉至适当宽度，修改groupbox的名称，如下图所示：在第一个groupbox拖入treeview控件，在第二个groupbox拖入datagrid控件,如下图所示：点击datagrid，添加列（操作方法参见3.2.11）,如下图所示：左边点击treeview控件的子结点，右边显示子结点