WinUI 3中如何通过单个集合条件绑定两个GridView展示壁纸

核心思路 #

通过统一的WallpaperCollection集合，基于IsSolidColor字段做条件过滤，拆分出图片壁纸和纯色壁纸两个子集，再分别绑定到对应的GridView。以下提供两种实用实现方式：

方式一：ViewModel内实现过滤属性（推荐） #

这种方式逻辑集中在ViewModel层，适合MVVM架构，且能自动响应集合动态变化。

1. ViewModel代码改造
   先保留完整的壁纸集合，再通过只读属性返回过滤后的子集，同时监听集合变化以通知UI更新：

   using System.Collections.ObjectModel;
   using System.ComponentModel;
   using System.Linq;
   
   public class YourViewModel : INotifyPropertyChanged
   {
       // 完整的壁纸集合（ObservableCollection确保集合变化时UI能感知）
       public ObservableCollection<Wallpaper> WallpaperCollection { get; }
   
       public YourViewModel()
       {
           WallpaperCollection = new ObservableCollection<Wallpaper>();
           // 监听集合增删事件，触发过滤属性更新
           WallpaperCollection.CollectionChanged += (s, e) =>
           {
               OnPropertyChanged(nameof(ImageWallPaperCollection));
               OnPropertyChanged(nameof(SolidColorWallpaperCollection));
           };
       }
   
       // 过滤出非纯色的图片壁纸
       public IEnumerable<Wallpaper> ImageWallPaperCollection 
           => WallpaperCollection.Where(w => !w.IsSolidColor);
   
       // 过滤出纯色壁纸
       public IEnumerable<Wallpaper> SolidColorWallpaperCollection 
           => WallpaperCollection.Where(w => w.IsSolidColor);
   
       // INotifyPropertyChanged实现
       public event PropertyChangedEventHandler PropertyChanged;
       protected void OnPropertyChanged(string propertyName)
       {
           PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
       }
   }
   

2. XAML绑定无需修改
   原GridView的ItemsSource绑定直接对应ViewModel的过滤属性即可，保持原有代码不变：

   <!-- 图片壁纸GridView -->
   <GridView Name="ImageWallpapers"
             ItemsSource="{x:Bind ViewModel.ImageWallPaperCollection, Mode=OneWay}"
             ...>
       <!-- 原有模板代码不变 -->
   </GridView>
   
   <!-- 纯色壁纸GridView -->
   <GridView Name="SolidColorWallpaper"
             ItemsSource="{x:Bind ViewModel.SolidColorWallpaperCollection, Mode=OneWay}"
             ...>
       <!-- 原有模板代码不变 -->
   </GridView>
   

方式二：XAML端用CollectionViewSource过滤 #

若想把过滤逻辑放在视图层，可使用CollectionViewSource实现：

1. 定义CollectionViewSource
   在页面资源中声明两个视图源，分别绑定完整集合并设置过滤规则：

   <Page.Resources>
       <!-- 图片壁纸视图源 -->
       <CollectionViewSource x:Name="ImageWallpaperCVS"
                             Source="{x:Bind ViewModel.WallpaperCollection, Mode=OneWay}"/>
       <!-- 纯色壁纸视图源 -->
       <CollectionViewSource x:Name="SolidColorWallpaperCVS"
                             Source="{x:Bind ViewModel.WallpaperCollection, Mode=OneWay}"/>
   </Page.Resources>
   

2. 后台代码设置过滤规则
   在页面构造函数中为两个视图源添加过滤逻辑：

   public MainPage()
   {
       this.InitializeComponent();
       // 图片壁纸过滤：IsSolidColor为false
       ImageWallpaperCVS.Filter += (s, e) =>
       {
           if (e.Item is Wallpaper wallpaper)
               e.Accepted = !wallpaper.IsSolidColor;
       };
       // 纯色壁纸过滤：IsSolidColor为true
       SolidColorWallpaperCVS.Filter += (s, e) =>
       {
           if (e.Item is Wallpaper wallpaper)
               e.Accepted = wallpaper.IsSolidColor;
       };
   }
   

3. 修改GridView绑定
   将GridView的ItemsSource改为绑定对应的CollectionViewSource：

   <!-- 图片壁纸GridView -->
   <GridView Name="ImageWallpapers"
             ItemsSource="{Binding Source={StaticResource ImageWallpaperCVS}}"
             ...>
       <!-- 原有模板代码不变 -->
   </GridView>
   
   <!-- 纯色壁纸GridView -->
   <GridView Name="SolidColorWallpaper"
             ItemsSource="{Binding Source={StaticResource SolidColorWallpaperCVS}}"
             ...>
       <!-- 原有模板代码不变 -->
   </GridView>
   

关键注意事项 #

• 确保WallpaperCollection是ObservableCollection<Wallpaper>类型，否则集合动态增删时UI不会更新
• 若IsSolidColor属性会在运行时修改，需让Wallpaper类实现INotifyPropertyChanged，否则属性变化不会触发过滤结果更新

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