ScrollViewer.CanContentScroll

本文深入探讨了在使用WPF DataGrid时遇到性能瓶颈的问题,发现原因在于禁用了ScrollViewer的物理单元滚动。通过解释两种滚动方式的优劣,最终找到了问题所在,并提供了优化解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

对项目中的 DataGird 进行测试时,发现只要数据稍微多一点,不管是进行 Sort 还是 Filter 操作都会变得很卡,在网上各种 Research 如何提高 Performance,什么将 VirtualizingStackPanel.IsVirtualizing="True" 呀,将 VirtualizingStackPanel.VirtualizationMode="Recycling" 呀等等都尝试过,但是还是没有一点效果,实在没办法了,只能从源头找了——将项目中使用的 Template 代码读一遍。没想到刚打开 Template 就找到问题了:在该 DataGrid 使用的 Template 中,将 ScrollViewer.CanContentScroll 设置为 False,设置为 False 意味着禁用 Vitalize 的效果,怪不得怎么设置的都不起作用的 。

在 WPF 中,利用 ScrollViewer 包裹 Content 后,当 Content 实际的高度/宽度大于设置的高度/宽度时,将会自动出现 ScrollBar,方便用户利用滚动条来查看更多的内容。所以 ItemsControl 簇(继承自 ItemsControl 的一系列控件,如 ListBox,ListView,DataGrid 等)都包含 ScrollViewer。WPF 为 ScrollViewer 提供两种滚动的方式:按物理单元滚动以及按逻辑单元滚动,非此即彼。而两种方式各有千秋:

按物理单元滚动 (ScrollViewer.CanContentScroll = false)

优点:所谓的物理单元,通俗点说就是像素。由于是按照像素进行滚动,所以在此模式下滚动会显的非常平滑。

缺点:也正是由于按照像素进行滚动,所以 ScrollViewer 需要确切地知道它包裹的 Content 的高度、宽度等具体数值。对 ItemesControl 簇来说,也就是要知道每一个 Item 的高度、宽度等数值,即每一个 Item 都会经历 Measure 和 Arrange 阶段,而这两个阶段都是在 UI 线程上进行的,所以当在 ScrollViewer 中的 Item 比较多时,就会导致 UI 变得很卡。

适用:Item 数量比较少的情况。

按逻辑单元滚动 (ScrollViewer.CanContentScroll = true)

优点:

1. 性能比较高,因为它只需要 Measure 和 Arrange 可见的 Item 而非所有的 Item。

2. 滚动的行为比较简单,只需要从一个 Item 滚动到另一个 Item,简单点说就是 index + 1 就可以了,该行为和每个 Item 实际高度没有关系。

缺点:

1. 只能从一个 Item 滚动到另一个 Item,而不会停留在一个 Item 的中间。


(如图所示,左边是按逻辑单元滚动的效果,右边是按物理单元滚动的效果。)

2. ScrollViewer 的 ExtentHeight、ScrollableHeight、ViewportHeight 和 VerticalOffset 属性的值代表的 Item 的数量而不是设备无关像素。也就是说如果每次处于可见状态的 Item 数量不一样(如果每个 Item 的 Height 不同,就有可能导致这个问题),滚动起来会看到明显的抖动。

适用:Item 的数量比较多的情况。

<Grid Grid.Column="1"> <DataGrid Grid.Row="1" x:Name="DetectDetail" IsReadOnly="True" AutoGenerateColumns="False" HeadersVisibility="None" RowHeaderWidth="0" ItemsSource="{Binding DetectData.DetailTable }" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" ScrollViewer.CanContentScroll="False" CanUserAddRows="False" Canvas.Right="0" IsHitTestVisible="True" GridLinesVisibility="None" BorderBrush="Transparent" Background="Transparent" > <DataGrid.RowStyle> <Style TargetType="{x:Type DataGridRow}"> <Setter Property="MinHeight" Value="40"/> <Setter Property="Background" Value="Transparent"/> <!--<Setter Property="BorderThickness" Value="10"/>--> <Setter Property="BorderBrush" Value="Transparent"/> </Style> </DataGrid.RowStyle> <DataGrid.CellStyle> <Style TargetType="{x:Type DataGridCell}"> <Setter Property="BorderThickness" Value="0"/> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Background"> <!--值--> <Setter.Value> <!--色刷,Opacity:透明度--> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.2"> <GradientStop Color="#25EEF4" Offset="0"/> <GradientStop Color="#25EEF4" Offset="1"/> <GradientStop Color="#23AAF9" Offset="0.45"/> <GradientStop Color="#23AAF9" Offset="0.55"/> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </Style> </DataGrid.CellStyle> <DataGrid.Columns> <DataGridTextColumn Width="1.5*" Binding="{Binding Area}" Foreground="White" FontSize="50"/> <DataGridTextColumn Width="3.5*" Binding="{Binding AutoVin}" Foreground="White" FontSize="50"/> <DataGridTextColumn Width="2*" Binding="{Binding ErrCode}" Foreground="White" FontSize="50"/> </DataGrid.Columns> </DataGrid> </Grid>修改这段代码,将area的所有数据放在一行,VIN的所有数据放在一行,Detail的所有数据放在一行
03-22
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值