如何阻止FileOpenPickerUI中点击篮子缩略图触发文件删除？

嘿，这个问题我之前帮朋友处理过，确实系统默认的交互逻辑有点反直觉——用户以为点击缩略图是查看，结果直接删了，体验很差。咱们直接说解决方案：

系统提供的FileOpenPickerUI底部篮子是系统托管的控件，咱们没法直接修改它的点击事件逻辑，但可以完全自定义选中照片的预览区域，把交互权握在自己手里，具体步骤如下：

1. 隐藏/忽略系统默认篮子，实现自定义预览图库 #

首先，咱们不用系统自带的篮子来展示选中的照片，而是在你的Picker页面底部自己做一个GridView（或ItemsControl），用来显示选中照片的缩略图，同时给每个缩略图添加单独的"删除"按钮，点击缩略图则触发查看操作。

举个XAML示例：

<!-- 页面底部的自定义选中图库 -->
<GridView x:Name="SelectedPhotosGallery"
          Grid.Row="1"
          HorizontalAlignment="Stretch"
          Padding="10"
          ItemTemplate="{StaticResource PhotoThumbnailTemplate}">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

<!-- 缩略图模板，放在Page.Resources里 -->
<DataTemplate x:Key="PhotoThumbnailTemplate">
    <Grid Width="120" Height="120" Margin="5">
        <Image Source="{Binding Thumbnail}"
               Stretch="UniformToFill"
               Tapped="PhotoThumbnail_Tapped"/> <!-- 点击查看 -->
        <Button x:Name="DeleteBtn"
                Width="30" Height="30"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Content="×"
                Click="DeletePhoto_Click"/> <!-- 点击删除 -->
    </Grid>
</DataTemplate>

2. 手动管理选中文件集合，同步系统状态 #

• 当用户拍摄完照片后，把文件添加到你自己的ObservableCollection集合里，同时调用FileOpenPickerUI.AddFile()通知系统选中了该文件，然后更新自定义图库的数据源。
• 点击缩略图的Tapped事件时，直接打开照片查看（比如用Launcher.LaunchFileAsync()，或者自己做个弹窗预览）。
• 点击删除按钮时，调用FileOpenPickerUI.RemoveFile()移除系统中的文件，同时从你的自定义集合里删掉该项。

C#代码示例：

// 自定义集合，绑定到SelectedPhotosGallery
private ObservableCollection<SelectedPhoto> _selectedPhotos = new ObservableCollection<SelectedPhoto>();

// 拍摄照片后添加到选中列表
private async void CapturePhotoCompleted(StorageFile photoFile)
{
    // 生成缩略图
    var thumbnail = await photoFile.GetThumbnailAsync(ThumbnailMode.SingleItem, 120);
    _selectedPhotos.Add(new SelectedPhoto 
    { 
        File = photoFile, 
        Thumbnail = BitmapImage.CreateFromStream(thumbnail) 
    });

    // 通知系统添加文件
    FileOpenPickerUI ui = FileOpenPickerUI.GetForCurrentView();
    ui.AddFile(photoFile.Name, photoFile);
}

// 点击缩略图查看照片
private async void PhotoThumbnail_Tapped(object sender, TappedRoutedEventArgs e)
{
    var photo = (sender as FrameworkElement).DataContext as SelectedPhoto;
    if (photo?.File != null)
    {
        await Launcher.LaunchFileAsync(photo.File);
    }
}

// 点击删除按钮移除照片
private void DeletePhoto_Click(object sender, RoutedEventArgs e)
{
    var photo = (sender as FrameworkElement).DataContext as SelectedPhoto;
    if (photo?.File != null)
    {
        FileOpenPickerUI ui = FileOpenPickerUI.GetForCurrentView();
        ui.RemoveFile(photo.File.Name);
        _selectedPhotos.Remove(photo);
    }
}

// 处理系统侧的移除事件（比如用户通过其他方式删除），同步自定义集合
private void FileOpenPickerUI_FileRemoved(FileOpenPickerUI sender, FileRemovedEventArgs args)
{
    var removedPhoto = _selectedPhotos.FirstOrDefault(p => p.File.Name == args.Id);
    if (removedPhoto != null)
    {
        _selectedPhotos.Remove(removedPhoto);
    }
}

3. 关键注意事项 #

• 一定要订阅FileOpenPickerUI.FileRemoved事件，同步你的自定义集合，避免系统侧的操作和你的UI不一致。
• 系统默认的篮子其实会被你的自定义图库覆盖（或者通过布局调整让它不再显眼），用户的操作都会集中在你的自定义UI上，不会再触发默认的删除逻辑。

这样一来，用户点击缩略图就是查看照片，点击删除按钮才会移除，完全符合他们的预期！

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