成品效果图

整体由3个部分组成,搜索条件面板、功能按钮面板、数据面板

【主从表】head管理页面的布局设计教程

【主从表】head管理页面的布局设计教程

详细设计步骤如下

  • 在窗体中放入2个原生panel

【主从表】head管理页面的布局设计教程

  • 设置第一个panel的Dock属性为Top、Size.Height属性为50
  • 设置第一个panel的Dock属性为Botton、Size.Height属性为50

设计后的效果如下

【主从表】head管理页面的布局设计教程

  • 在中间空白位置拖放一个toyaGridControl,并设置Dock属性为Fill

【主从表】head管理页面的布局设计教程

  • 在底部的面板中放入ToyaSimpleButton、设置Text属性为审核、设置Location属性为(10,10)、Size.Width属性为70

【主从表】head管理页面的布局设计教程

  • 底部面板中有多个功能按钮的话,直接拷贝第一个按钮进行拖放布局即可

【主从表】head管理页面的布局设计教程

  • 在上面板中拖放一个toyaLabelControl,设置属性Size.Width属性为70,设置Location属性为(10,10),设置Text属性为托运日期

【主从表】head管理页面的布局设计教程

  • 在上面中拖放一个toyaSearchPopEdit,注意布局线即可

【主从表】head管理页面的布局设计教程

  • toyaSearchPopEdit中自带开始日期,结束日期,通用查询选项、查询按钮,可直接通过公共字段访问。txt开头
  • toyaSearchPopEdit在设计页面中需要注意popupContainerControl属性(用于配置搜索明细)和ButtonClick事件(点击查询触发的事件)

【主从表】head管理页面的布局设计教程

至此即可完成Head部分的UI设置,实际环境中的效果图如下

【主从表】head管理页面的布局设计教程

【主从表】head管理页面的布局设计教程

相关文章:

  • 2021-06-10
  • 2021-08-24
  • 2021-11-02
  • 2021-12-05
  • 2021-07-07
  • 2021-08-11
  • 2022-12-23
  • 2021-05-28
猜你喜欢
  • 2022-01-13
  • 2021-08-04
  • 2021-12-05
  • 2022-12-23
  • 2021-06-20
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案