blend界面设计操作手册

1、界面设计规范用户操作手册编号：版本：V1.0作者 林贤旺 完成日期2013-12-03签收人 签收日期_1修改情况记录序号 修改批准人序号 修改批准人修改人修改日期签收人2 HYPERLINK l _TOC_250020 引言4 HYPERLINK l _TOC_250019 编写目的4 HYPERLINK l _TOC_250018 背景4 HYPERLINK l _TOC_250017 运行环境4 HYPERLINK l _TOC_250016 硬件设备4 HYPERLINK l _TOC_250015 支持软件4 HYPERLINK l _TOC_250014 使用过程4 HYPERLI

2、NK l _TOC_250013 安装与创建项目43.2.1 Blend 安装43.2.1 Blend 创建项目5 HYPERLINK l _TOC_250012 常用控件说明9 HYPERLINK l _TOC_250011 Grid9 HYPERLINK l _TOC_250010 StackPanel10 HYPERLINK l _TOC_250009 Canvas10DockPanel11GridSplitter.12 HYPERLINK l _TOC_250008 Button13 HYPERLINK l _TOC_250007 TextBox13 HYPERLINK l _TOC_

3、250006 Label14 HYPERLINK l _TOC_250005 TextBlock1415DataGrid16GridControl18GroupBox21 HYPERLINK l _TOC_250004 引用三方控件24 HYPERLINK l _TOC_250003 界面设计模板25 HYPERLINK l _TOC_250002 单表模板25 HYPERLINK l _TOC_250001 主从表模板26 HYPERLINK l _TOC_250000 主从从表模板273引言编写目的编写本报告的目的是为了说明blend 这款软件对于界面设计的制作过程，提高用户的工作效率和工

4、作质量。背景软件系统名称：blend 界面设计软件运行环境硬件设备Blend 硬件要求(建议)如下：CPU: P4 以上内存：4G硬盘：60G以上支持软件Blend 软件要求(建议)如下：操作系统：WINDOWS XP/7/8使用过程安装与创建项目Blend 安装点击setup程序，选择安装路径，然后选择“下一步4Blend 创建项目选择打开 blend 界面选择”wpf 控件库”，填写名称，选择位置路径，然后点击“确定”，生成一个wpf 控件库:5弹出如下窗口：选择”usercontrol”类型，然后输入名称(可为中文),点击“确定”，生成一个用户控件类文件拖拉控件，点击选择控件库，如下图所

5、示：6输入控件名，获取所要拖入工作区的控件，如下图所示：将控件拖入工作区,如下图所示：7点开右边属性栏，设置控件名称,如下图所示位置：注：布局控件：文本控件：内容控件和带标题的内容控件实线（实线：与右边框的实际距离，虚线：与右边框没有任何关系，如下图所示：这样可以防止，控件在自定8义平台中，出现变形，控件位置不一致的问题常用控件说明Grid（ 高：480）设置grid的行和列（锁死，点击grid控件，如下图所示：和列，如下图所示：注：Width 与 height 有三种设置方式：,如 2*:1* 分配宽度或高度固定长度：将宽度与高度设为绝对值自动长度：宽度与高度按照界面大小，自动分配UserC

6、ontrol在布局里面设置固定宽和高9StackPanel,如下图所示：布局Orientation:决定容器内的元素是竖排还是横排(Horizontal, Vertical)竖排：横排：Canvas：画布控件可以准确定位到容器内的任何位置，如下图所示：10DockPanel：锁定面板布局 LastChildFill：True 与 False11FalseTrueGridSplitter：网格分离控件实现 grid 里面拖拽功能，如下图所示：将gridsplitter放在grid的其中一个列里面，然后将griddplitter的VerticalAlignment 属性设为 Stretch,如下图

7、所示：12Button:75 21公共属性Content:可以设置按钮内容，如下图所示：TextBox：文本框控件公共属性text：设置textbox 控件的文本内容13Label:标签控件公共属性 Content：设置label 的标签文本TextBlock：标签控件公共属性Text：设置 TextBlock 的文本内容14TabControl:多选项卡控件公共属性Header：设置tabitem 的标题15DataGrid：数据网格控件公共属性Column（集合：可以人工添加列（自动产生，步骤如下图所示：点击“”，弹出如下界面：16（一般选择datagridtextcolum：通过Head

8、er 可以修改列名，如下图所示：17得到最后效果，如下图所示：GridControl：dev 的数据网格控件数据 Columns(集合)：可以人工添加列（生，步骤如下图所示：点击“”，弹出如下窗口：18点击“添加另一项”,弹出如下窗口：19gridcolumn 来添加列，选择对应的gridcolumn,然后通过Header 列名，如下图所示：得到最后效果，如下图所示：20GroupBox：分组控件，可以对界面内容进行分组，可以通过设置属性公共属性Header：设置groupbpx 的标题，如下图所示：21注：groupbox 中要加入一个grid 控件ComboBox:下拉控件，可以选择某一个

9、字段内容公共属性Items：添加下拉框的选择项22点击 Items 集合按钮,弹出如下界面：点击“添加另一项”，弹出如下窗体：23comboboxItemcomboboxitem content属性值，如下图所示：ListBox:单列列表控件公共属性Items：添加单列列表控件的选择项同上，不过这个是添加listboxitem引用三方控件选择“引用”文件夹，右击“添加引用24选择你要引用的组件，点击“打开”，就会显示到引用文件夹当中，如下图所示：得到你想要拖放的三方控件，如下图所示：界面设计模板单表模板单表模板(参考)，如下图所示：25,其中要关联的窗口是一个如下图所示的录入窗口：主从表模板主

10、从表模板（参考）,如下图所示：26这个界面左边是一棵树,右边是根据选择的地区信息来展示各地区的用户信息的grid 数据网格控件，grid 上方是做添加，删除，修改和查询的按钮，下方是grid 的分页控件,他们通过groupbox 进行分隔。与此界面关联的录入窗口如下：主从从表模板主从从表模板(参考)，如下图所示：27左边是树，右边是选项卡控件，选择卡控件中一个放着地区的详细信息，另一个放着各地区用户信息管理功能，底下放着，根据点击不同的用户来得到各用户的备忘录,这里面关联着如下两个录入界面：28双面选择器双面选择器（参考，如下图所示：先将 grid 隔出两个列来，先放在两个groupbox 称，如下图所示：29groupbox treeview groupbox datagrid 图所示：30点击datagrid，添加列（操作方法参见如下图所示：左 边 点 击treeview控 件 的 子 结 点 ， 右 边