Uno平台下UWP与WASM中ObservableCollection绑定GridView表现差异问题

问题根因 #

你当前的WASM平台使用了非虚拟化的WrapPanel作为GridView的布局容器，而UWP端使用的是支持UI虚拟化的ItemsWrapGrid。非虚拟化容器没有子元素复用能力，只要绑定的ObservableCollection发生变动，就会重绘所有子项，自然会出现全量重绘的问题。

修复方案 #

按优先级从高到低选择即可：

• 统一使用ItemsWrapGrid作为跨平台布局容器
  Uno Platform 4.0及以上版本已完整实现WASM端ItemsWrapGrid的虚拟化支持，完全可以替代非虚拟化的WrapPanel，从根源解决集合变动全重绘问题。修改ItemsPanel代码如下：

  <GridView.ItemsPanel>
      <ItemsPanelTemplate>
          <ItemsWrapGrid Orientation="Horizontal"  MaximumRowsOrColumns="8"/>
      </ItemsPanelTemplate>
  </GridView.ItemsPanel>
  

• 若受版本限制必须使用WASM端WrapPanel，可做以下优化降低重绘开销：
  1. 禁用GridView默认的子项过渡动画，避免动画触发额外重绘：

  <GridView x:Name="gView" 
            ItemsSource="{Binding Pictures,Mode=OneWay}" 
            SelectionMode="Extended" 
            IsMultiSelectCheckBoxEnabled="False" 
            VerticalAlignment="Stretch" 
            HorizontalAlignment="Center" 
            SelectionChanged="ImageSelectionChanged">
      <GridView.ItemContainerTransitions>
          <TransitionCollection/>
      </GridView.ItemContainerTransitions>
      <!-- 其余原有配置保持不变 -->
  </GridView>
  

  2. 优化Image绑定逻辑，避免频繁布局更新：
     将Image的Width绑定从TwoWay改为OneWay，同时添加解码和缓存配置，减少重绘时的图片解码开销：

  <Image Source="{Binding URL}" 
         Width="{Binding Parent.ImageWidth, Mode=OneWay}" 
         MinWidth="200"
         DecodePixelWidth="200"
         CacheMode="BitmapCache"/>
  

• 确认集合变更通知类型
  检查自定义ObservableCollection的实现，确保调用Remove方法时触发的是CollectionChangedEventArgs.Action = Remove的通知，而非Reset通知，Reset通知会强制容器重绘所有子项。

内容的提问来源于stack exchange，提问作者Robotuner