界面设计操作手册.docVIP

编号： ****002 版本： V1.0 界面设计规范 用户操作手册 作??????者? 完成日期?2013-12-03____?? 签??收?人? 签收日期? 修改情况记录 序号 修改批准人 修改人 修改日期 签收人 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 常用控件说明 8 3.2.1 Grid 8 3.2.2 StackPanel 9 3.2.3 Canvas 10 3.2.4 DockPanel 10 3.2.5 GridSplitter 11 3.2.6 Button 12 3.2.7 TextBox 13 3.2.8 Label 13 3.2.9 TextBlock 14 3.2.10 TabControl 14 3.2.11 DataGrid 15 3.2.12 GridControl 17 3.2.13 GroupBox 20 3.3 引用三方控件 21 3.4 界面设计模板 22 3.4.1 单表模板 22 3.4.2 主从表模板 23 3.4.3 主从从表模板 24 1引言 1.1编写目的 编写本报告的目的是为了说明blend这款软件对于界面设计的制作过程，提高用户的工作效率和工作质量。 1.2背景 软件系统名称：blend界面设计软件 2运行环境 2.1硬件设备 Blend硬件要求(建议)如下： CPU: P4 以上 内存：4G 硬盘：60G以上 2.2支持软件 Blend软件要求(建议)如下： 操作系统：WINDOWS XP/7/8 3使用过程 3.1安装与创建项目 3.1.1 Blend安装 点击setup程序，选择安装路径，然后选择“下一步”， 最后点“完成”。 3.1.2 Blend创建项目 选择打开blend界面 选择“新建项目”,跳出如下窗口： 选择”wpf控件库”，填写名称，选择位置路径，然后点击“确定”，生成一个wpf控件库 创建界面文件，右击项目，从弹出菜单中，选择“添加新项”，如下图所示: 弹出如下窗口： 选择”usercontrol”类型，然后输入名称(可为中文),点击“确定”，生成一个用户控件类文件 拖拉控件，点击选择控件库，如下图所示： 输入控件名，获取所要拖入工作区的控件，如下图所示： 将控件拖入工作区,如下图所示： 点开右边属性栏，设置控件名称,如下图所示位置： 注： ：布局控件 ：文本控件 ：内容控件和带标题的内容控件 拖位控件时，会出现四个点，四个点的连线，右边与下边，要用虚线，不能用实线（实线：与右边框的实际距离，虚线：与右边框没有任何关系），如下图所示： 这样可以防止，控件在自定义平台中，出现变形，控件位置不一致的问题 3.2 常用控件说明 3.2.1 Grid ：网格控件，主要是为了让控件可以按表格方式排列 设置grid的行和列，点击grid控件，如下图所示： 然后鼠标移动到上边框和左边框上，会出现一条灰色的线，由这条线来划分行和列，如下图所示： 注： Width与height有三种设置方式： *:宽度与高度按比例大小来分配长度,如 2*:1* 表示按2：1的比例关系来分配宽度或高度 固定长度：将宽度与高度设为绝对值 自动长度：宽度与高度按照界面大小，自动分配 3.2.2 StackPanel ：水平或垂直容器，可以横排或竖排控件,如下图所示： 布局Orientation:决定容器内的元素是竖排还是横排(Horizontal, Vertical) 竖排： 横排： 3.2.3 Canvas ：画布控件 可以准确定位到容器内的任何位置，如下图所示： 3.2.4 DockPanel ：锁定面板 布局LastChildFill：True与False 3.2.5 GridSplitter ：网格分离控件 实现grid里面拖拽功能，如下图所示： 将gridsplitter放在grid的其中一个列里面，然后将griddplitter的VerticalAlignment 属性设为Stretch,如下图所示： 3.2.6 Button :按钮控件， 公共属性Content:可以设置按钮内容，如下图所示： 3.2.7 Text