当前位置：首页 > news >正文

界面组件DevExpress WPF中文教程：网格视图数据布局 - 紧凑模式

news 2025/8/8 9:09:35

DevExpress WPF拥有120+个控件和库，将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序，这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。无论是Office办公软件的衍伸产品，还是以数据为中心的商业智能产品，都能通过DevExpress WPF控件来实现。

在本文中您将学习到DevExpress WPF Grid控件中网格视图数据布局中的紧凑模式，欢迎下载最新版组件体验！

获取DevExpress WPF v25.1正式版下载

DevExpress WPF GridControl允许您构建自适应布局，控件以完全可自定义的紧凑模式自动调整其数据行（或树表节点）。

您应该定义以下属性来启用以紧凑模式显示行数据：

TableView.DataRowCompactTemplate / TreeListView.DataRowCompactTemplate：用于以紧凑模式呈现数据行的模板。
TableView.SwitchToCompactModeWidth / TreeListView.SwitchToCompactModeWidth：启用紧凑模式时GridControl的最大宽度。

当GridControl的宽度小于或等于TableView.SwitchToCompactModeWidth (TreeListView.SwitchToCompactModeWidth) 属性指定的值时，GridControl会自动改变它的布局。在这种情况下，数据行（或节点）是使用TableView.DataRowCompactTemplate (TreeListView.DataRowCompactTemplate)呈现的。

紧凑模式下的DevExpress WPF GridControl不使用DataViewBase.RowCellMenuCustomizations属性中指定的上下文菜单，您应该在TableView.DataRowCompactTemplate属性中定义一个行上下文菜单。

紧凑面板

紧凑面板取代列标题，用于在紧凑模式下对网格项进行分组、排序和过滤。

可用性

使用TableView.CompactPanelShowMode / TreeListView.CompactPanelShowMode属性来控制GridControl切换到紧凑模式时紧凑面板的可用性。默认情况下，紧凑型面板是启用的。

提示：GridControl支持以全尺寸模式显示紧凑型面板，设置TableView.CompactPanelShowMode / TreeListView.CompactPanelShowMode属性为Always，来在全尺寸GridControl中显示紧凑面板。

下面的代码示例演示了如何禁用紧凑面板。

XAML

<dxg:GridControl ItemsSource="{Binding Customers}">
<dxg:GridControl.View>
<dxg:TableView CompactPanelShowMode="Never">
<dxg:TableView.DataRowCompactTemplate>
<!-- data template --->
</dxg:TableView.DataRowCompactTemplate>
</dxg:TableView>
</dxg:GridControl.View>
</dxg:GridControl>

自定义

预定义的过滤器

紧凑的面板可以显示预定义的过滤项，单击过滤项时，GridControl只显示符合筛选条件的项。要向紧凑面板添加过滤器，将过滤器项的集合（CompactModeFilterItem类的实例）传递给TableView.CompactModeFilterItems (TreeListView.CompactModeFilterItems) 属性。

界面组件DevExpress WPF中文教程产品图集

下面的代码示例演示了如何定义一组预定义的过滤器。

XAML

<dxg:GridControl ItemsSource="{Binding Customers}">
<dxg:GridControl.View>
<dxg:TableView CompactPanelShowMode="CompactMode">
<dxg:TableView.CompactModeFilterItems>
<dxg:CompactModeFilterItem DisplayValue="All" EditValue="" />
<dxg:CompactModeFilterItem DisplayValue="From London" EditValue="[City] = 'London'" />
<dxg:CompactModeFilterItem DisplayValue="From Madrid" EditValue="[City] = 'Madrid'" />
</dxg:TableView.CompactModeFilterItems>
<dxg:TableView.DataRowCompactTemplate>
<!-- data template -->
</dxg:TableView.DataRowCompactTemplate>
</dxg:TableView>
</dxg:GridControl.View>
</dxg:GridControl>

紧凑面板可以根据TableView.CompactFilterElementShowMode属性值，以以下模式显示过滤器项。