当前位置: 首页 > article >正文

Card View 卡片视图

Goto 数据网格和视图入门

Card View 卡片视图

The Card View displays data records as cards, arranged down and then across. Card fields are always arranged in a single column. The Card View is represented by the CardView class.
Card View (卡片视图) 将数据记录显示为卡片,先向下排列,然后再横向排列。卡片字段始终排列在单个列中。Card View 由 CardView 类表示。
在这里插入图片描述

Features include: 功能包括:

  • Basic card field arrangement (in a single column)
    基本卡字段排列(在单列中)
  • Arrangement of cards down and then across
    卡片向下排列,然后穿过
  • Card sort and filter 卡片排序和筛选
  • Multiple card selection 多卡选择
  • Split presentation mode 拆分演示模式
  • In-place cell editing using various data editors
    使用各种数据编辑器进行就地单元格编辑
  • Runtime card field layout customization (toggle card field visibility)
    运行时卡字段布局自定义(切换卡字段可见性)

Card and Layout Views Card 和 Layout 视图

In Card View (CardView class), data source records are displayed as cards arranged down and then across. The Layout View (LayoutView class) offers more layout modes and is significantly more advanced in terms of features and customization flexibility.
在 Card View(CardView 类)中,数据源记录显示为先向下排列再横向排列的卡片。Layout View (LayoutView 类) 提供了更多的布局模式,并且在功能和自定义灵活性方面明显更先进。

Common Information 通用信息

  • Cards 卡
  • Multiple Card Selection 多张卡选择

Card View 卡片视图

  • Run Demo 运行 Demo
  • Field Captions and Value Cells
    字段标题和值单元格
  • Layout 布局
  • Scrolling 滚动
  • Customization Panel 自定义面板

Layout View 布局视图

  • Run Demo 运行 Demo
  • Layout View 布局视图

Cards 卡

两个视图中的卡都显示带有嵌入式折叠/展开按钮的标题,供用户最小化和恢复卡。如果卡片不适合当前视图高度,用户可以滚动它们。相邻卡片由分隔线在视觉上分隔,允许用户调整卡片大小(仅在卡片视图中)。
在这里插入图片描述

(Card View) (卡片视图)(Layout View) (布局视图)Description 描述
CardOptionsView.ShowCard Caption 视图。显示卡片标题LayoutViewOptionsView.Show布局视图选项视图。显示卡片标题允许您隐藏卡片标题或更改其默认的“记录 N {0}”格式。
CardView.CardCaptionFormat 卡片视图)。卡片字幕格式LayoutView.CardCaptionFormat 布局视图。卡片字幕格式
CardView.CustomCardCaptionImage 自定义卡片标题图像LayoutView.CustomCardCaptionImage 自定义卡片标题图像处理此事件以提供卡片标题的图标。
CardView.VertScrollVisibility 顶点滚动可见性LayoutViewOptionsBehavior.AllowPanCards 允许pan卡当卡片无法垂直适应视图时,用户可以使用嵌入式滚动按钮(Card View)或切换到 Panning 模式(Layout View)来滚动卡片内容。
CardOptionsView.ShowLines x显示线条LayoutViewOptionsView.ShowCardLines 显示卡片线在 Card View 中,这些设置指定卡宽度和卡拆分器的可用性。Layout View 中的卡宽只能在自定义窗口中更改。
CardOptionsBehavior.Sizeable 行为。可观
CardOptionsBehavior.AutoHorzWidth AutoHorzWidth (自动水平宽度)
CardOptionsView.ShowCardExpandButton 按钮LayoutViewOptionsView.ShowCardExpandButton布局视图选项视图。ShowCard Expand按钮允许您禁用或隐藏卡展开/折叠按钮。
CardOptionsBehavior.AllowExpandCollapse 允许展开折叠LayoutViewOptionsBehavior.AllowExpandCollapse 允许展开折叠

Multiple Card Selection 多张卡选择

如果启用了 ColumnViewOptionsSelection.MultiSelect 选项,则用户可以在按下“Ctrl”或“Shift”键的情况下单击卡片,以一次选择多条记录。此外,布局视图还支持选取框选择。
在这里插入图片描述
在代码中,调用 ColumnView.SelectRange 方法手动选择多个卡片,或调用 ColumnView.GetSelectedRows 方法检索所有当前选定的卡片。

Card View: Field Captions and Value Cells 卡片视图:字段标题和值单元格

卡片以 “Caption: Value” 格式显示数据。
在这里插入图片描述

  • A caption displays the GridColumn.Caption property value. To hide the caption, disable the CardOptionsView.ShowFieldCaptions property.
    标题显示 GridColumn.Caption 属性值。若要隐藏标题,请禁用 CardOptionsView.ShowFieldCaptions 属性。
  • A value is the data source value displayed by the in-place editor assigned to the related grid column.
    值是分配给相关网格列的就地编辑器显示的数据源值。
  • You can specify different appearance settings for captions and values with the CardViewAppearances.FieldCaption and CardViewAppearances.FieldValue properties, respectively.
    您可以分别使用 CardViewAppearances.FieldCaption 和 CardViewAppearances.FieldValue 属性为标题和值指定不同的外观设置。

Card View: Layout 卡片视图:布局

Card View 中卡的布局取决于行数和列数、卡大小设置和卡缩进。

Rows and columns 行和列

  • CardView.MaximumCardRows — Allows you to limit the number of card rows.
  • CardView.MaximumCardRows — 允许您限制卡片行数。
  • CardView.MaximumCardColumns — Allows you to limit the number of columns.
  • CardView.MaximumCardColumns — 允许您限制列数。

Card size 卡片大小

  • CardView.CardWidth — 指定默认卡宽度(200 像素)。如果启用了 CardOptionsBehavior.AutoHorzWidth 选项,则卡片会在“MaximumCardColumns”设置限制内水平拉伸以占据 View 的工作区。
  • 卡片高度是根据卡片内容自动确定的 — 卡片垂直拉伸,直到达到最大可用行高(“MaximumCardRows”设置)或当前视图的工作区高度。
  • 如果禁用 CardOptionsView.ShowEmptyFields 选项,则卡片不会显示空值,这可能会导致卡片具有不同的高度。

待续…


http://www.kler.cn/a/315775.html

相关文章:

  • 【121. 买卖股票的最佳时机】——贪心算法/动态规划
  • openSUSE 环境下通过 zypper 安装软件
  • 【初阶数据结构与算法】链表刷题之移除链表元素、反转链表、找中间节点、合并有序链表、链表的回文结构
  • Scala入门基础(17.1)Set集习题
  • 如何用WordPress和Shopify提升SEO表现?
  • python装饰器的使用以及私有化
  • 软媒市场新探索:软文媒体自助发布,开启自助发稿新篇章
  • 算法练习题24——leetcode3296移山所需的最小秒数(二分模拟)
  • Mysql删库跑路,如何恢复数据?
  • HDFS性能优化高频面试题及答案
  • AWS 将 OpenSearch 纳入 Linux 基金会旗下
  • 四十一、完成内容添加功能(使用go测试方法)
  • 全栈项目小组【算法赛】题目及解题
  • How do you send files to the OpenAI API?
  • 1.量化第一步,搭建属于自己的金融数据库!
  • 鸿蒙设置,修改APP图标和名称
  • Android Choreographer 监控应用 FPS
  • 如何在Chrome最新浏览器中调用ActiveX控件?
  • 什么时候用synchronized,什么时候用Reentrantlock
  • 高等数学——微分学
  • 5.《DevOps》系列K8S部署CICD流水线之K8S通过Yaml部署GitLab
  • C++从入门到起飞之——多态 全方位剖析!
  • 通信工程学习:什么是NFVI网络功能虚拟化基础设施层
  • Apache HttpComponents HttpClient
  • Blender软件三大渲染器Eevee、Cycles、Workbench对比解析
  • mysql学习教程,从入门到精通,SQL 删除数据(DELETE 语句)(18)