Layout View 布局视图

missingzlp

已于 2024-11-13 22:38:25 修改

阅读量292

点赞数 2

分类专栏： Data Grid 数据网格文章标签： layout view

于 2024-07-15 21:33:40 首次发布

本文链接：https://blog.csdn.net/missingzlp/article/details/140449684

版权

Data Grid 数据网格专栏收录该内容

55 篇文章

订阅专栏

GoTo Data Grid 数据网格

Layout View 布局视图

本文档仅概述特定于LayoutView的功能。有关常用卡和选择功能的信息，请参阅根卡和布局视图一文。

Template Card 模板卡

布局视图使用布局控件来排列卡片内的内容。对于每个网格列，都会生成一个LayoutViewField对象。切换到数据网格设计器中的“Layout | Template Card”选项卡，重新排列数据字段，重命名字段标题，添加分隔符和空格项，设置卡对齐选项等。
在这里插入图片描述

Related API 相关 API

LayoutView.TemplateCard - 提供对模板卡的访问，并允许您在代码中对其进行修改。
LayoutView.Items - 提供对可见和隐藏的卡片布局项（字段、空白区域项、分隔符等）的访问。
LayoutView.HiddenItems - 仅提供对隐藏的卡片布局项的访问。

View Designer 视图设计师

在数据网格设计器中，切换到 “ 布局 |View Layout“选项卡设置最重要的视图选项 - 卡片布局模式、卡片间隔、标题可见性、展开/折叠按钮的可用性等。

在这里插入图片描述

Card Layout Modes 卡片布局模式

有六种卡片布局模式可用。您可以通过更改 LayoutViewOptionsView.ViewMode 属性来设置所需的模式，而在运行时，最终用户可以通过点击顶部的 View 面板在这些模式之间切换（见下文）。

在这里插入图片描述
您可以禁用此面板上的特定按钮（修改通过 LayoutView.OptionsHeaderPanel 集合访问的属性），也可以完全隐藏面板（禁用 LayoutViewOptionsView.ShowHeaderPanel 属性）。

Single Record 单条记录

在这里插入图片描述

视图一次仅显示一张卡片。
如果卡片占用的空间少于 View 的工作区，则卡片位置由 LayoutViewOptionsSingleRecordMode.CardAlignment 属性管理。

Single Row 单排

在这里插入图片描述

所有卡片在一行中垂直对齐。
同时可见的卡片的最大数量由 LayoutViewOptionsMultiRecordMode.MaxCardColumns 属性管理。

Single Column 单柱

在这里插入图片描述

卡片垂直排列在一列中。
同时可见的卡片的最大数量由 LayoutViewOptionsMultiRecordMode.MaxCardRows 属性管理。

Multi Row and Multi Column 多行和多列

在这里插入图片描述

在多行模式下，卡片排列在多列上，然后向下排列。在多列模式下，卡片依次放置在多行中，然后交叉放置。
您可以使用 LayoutViewOptionsMultiRecordMode.MaxCardRows 和 LayoutViewOptionsMultiRecordMode.MaxCardColumns 设置来限制同时可见的卡片数量。
两种布局都支持垂直和水平方向模式。要更改该属性并旋转嵌入的滚动条，请使用 LayoutViewOptionsMultiRecordMode.MultiRowScrollBarOrientation 或 LayoutViewOptionsMultiRecordMode.MultiColumnScrollBarOrientation 属性。

Carousel 旋转木马

在这里插入图片描述

卡片沿椭圆形路径排列。当前选定的卡片显示在曲线的中间，相邻的卡片逐渐淡出。
Access 属性由 LayoutView.OptionsCarouselMode 对象提供，用于修改曲线。

Stretching Cards 拉伸卡

您可以垂直或水平拉伸卡片，以使其适合当前的 View 工作区。为此，请启用所需的 StretchCardToView…性能。

对于单记录模式 - LayoutViewOptionsSingleRecordMode.StretchCardToViewHeight、LayoutViewOptionsSingleRecordMode.StretchCardToViewWidth。
对于多记录模式 - LayoutViewOptionsMultiRecordMode.StretchCardToViewHeight、LayoutViewOptionsMultiRecordMode.StretchCardToViewWidth。
对于轮播模式 - LayoutViewOptionsCarouselMode.StretchCardToViewHeight、LayoutViewOptionsCarouselMode.StretchCardToViewWidth。

运行 Layout View 演示以测试此功能。
在这里插入图片描述

Panning 平移

布局视图不提供嵌入的滚动按钮来滚动大于视图工作区的卡片。相反，最终用户可以单击顶部面板中的手形图标以进入平移模式。在此模式下，用户单击视图内的任意位置，然后沿所需方向拖动它，这与触摸输入设备上非常相似。

在这里插入图片描述

Related API 相关 API

LayoutViewOptionsBehavior.AllowPanCards - 获取或设置最终用户是否可以激活平移模式。
LayoutView.PanModeSwitch - 打开或关闭 Panning 模式。
LayoutViewOptionsHeaderPanel.ShowPanButton - 显示或隐藏“平移”按钮。

Runtime Customization 运行时定制

最终用户可以单击顶部面板中的“自定义”按钮来重新排列字段、添加辅助 UI 元素（标签、空格和分隔符）、修改卡片大小和缩进等。可用选项的数量取决于调用的对话框是标准对话框还是高级对话框。

在这里插入图片描述

Related API 相关 API

LayoutViewOptionsBehavior.AllowRuntimeCustomization - 指定是否允许最终用户自定义默认布局。
LayoutViewOptionsHeaderPanel.ShowCustomizeButton - 显示或隐藏“自定义”按钮。
LayoutViewOptionsCustomization.UseAdvancedRuntimeCustomization - 激活高级自定义模式。
LayoutView.OptionsCustomization - 提供对自定义相关属性集的访问。名称以 “Show…” 开头的设置允许您选择最终用户可以在高级自定义模式下更改的设置。

Example - Create Layout in Code示例 - 在代码中创建布局

以下示例演示如何在代码中创建和自定义 Layout View。在示例中，将创建一个模板卡，其中包含六个字段，其排列方式如下图所示：

在代码中排列布局字段之前，请确保相应的列可见（请参阅 LayoutViewColumn.Visible 和 GridColumnCollection.AddVisible）。

在这里插入图片描述

using DevExpress.XtraGrid;
using DevExpress.XtraGrid.Views.Layout;
using DevExpress.XtraGrid.Columns;
using DevExpress.XtraLayout;
using DevExpress.XtraLayout.Customization;
using DevExpress.XtraLayout.Utils;
using DevExpress.XtraEditors.Repository;
using DevExpress.XtraEditors.Controls;

GridControl grid = new GridControl();
LayoutView lView = new LayoutView(grid);
grid.MainView = lView;
lView.OptionsBehavior.AutoPopulateColumns = false;

grid.DataSource = employeesBindingSource;
this.Controls.Add(grid);
grid.Dock = DockStyle.Fill;

// Create columns.
LayoutViewColumn colFirstName = lView.Columns.AddVisible("FirstName") as LayoutViewColumn;
LayoutViewColumn colLastName = lView.Columns.AddVisible("LastName") as LayoutViewColumn;
LayoutViewColumn colAddress = lView.Columns.AddVisible("Address") as LayoutViewColumn;
LayoutViewColumn colCity = lView.Columns.AddVisible("City") as LayoutViewColumn;
LayoutViewColumn colCountry = lView.Columns.AddVisible("Country") as LayoutViewColumn;
LayoutViewColumn colPhoto = lView.Columns.AddVisible("Photo") as LayoutViewColumn;

// Access corresponding card fields.
LayoutViewField fieldFirstName = colFirstName.LayoutViewField;
LayoutViewField fieldLastName = colLastName.LayoutViewField;
LayoutViewField fieldAddress = colAddress.LayoutViewField;
LayoutViewField fieldCity = colCity.LayoutViewField;
LayoutViewField fieldCountry = colCountry.LayoutViewField;
LayoutViewField fieldPhoto = colPhoto.LayoutViewField;

// Position the FirstName field to the right of the Photo field.
fieldFirstName.Move(new LayoutItemDragController(fieldFirstName, fieldPhoto,
    InsertLocation.After, LayoutType.Horizontal));

// Position the LastName field below the FirstName field.
fieldLastName.Move(new LayoutItemDragController(fieldLastName, fieldFirstName,
    InsertLocation.After, LayoutType.Vertical));

// Create an Address Info group.
LayoutControlGroup groupAddress = new LayoutControlGroup();
groupAddress.Text = "Address Info";
groupAddress.Name = "addressInfoGroup";

// Move the Address, City and Country fields to this group.
groupAddress.AddItem(fieldAddress);
fieldCity.Move(fieldAddress, InsertType.Bottom);
fieldCountry.Move(fieldCity, InsertType.Bottom);

lView.TemplateCard.AddGroup(groupAddress, fieldLastName, InsertType.Bottom);

// Assign editors to card fields.
RepositoryItemPictureEdit riPictureEdit = grid.RepositoryItems.Add("PictureEdit") as RepositoryItemPictureEdit;
riPictureEdit.SizeMode = PictureSizeMode.Squeeze;
colPhoto.ColumnEdit = riPictureEdit;

// Customize card field options.
colFirstName.Caption = "First Name";
colLastName.Caption = "Last Name";
// Set the card's minimum size.
lView.CardMinSize = new Size(250, 180);

fieldPhoto.TextVisible = false;
fieldPhoto.SizeConstraintsType = SizeConstraintsType.Custom;
fieldPhoto.MaxSize = fieldPhoto.MinSize = new Size(150, 150);