WPF中使用ItemsControl实现图片网格及点击项获取方案咨询

针对你用ItemsControl实现图片网格后无法获取点击项索引的问题，这里提供几种实用的解决方案，从简单实现到符合WPF设计模式的都有：

方案1：通过CommandParameter绑定当前数据项（推荐，MVVM模式） #

不需要手动对比图片源，直接把点击的图片绑定的数据对象传递给命令，再通过列表的IndexOf方法获取索引，避免重复图片导致的识别错误。

XAML代码 #

<ItemsControl ItemsSource="{Binding ImageList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding ImagePath}" 
                   Width="150" Height="200" 
                   Margin="5" Cursor="Hand">
                <!-- 绑定点击命令，将当前数据项作为参数传递 -->
                <Image.InputBindings>
                    <MouseBinding MouseAction="LeftClick" 
                                  Command="{Binding DataContext.OpenImageCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                                  CommandParameter="{Binding}" />
                </Image.InputBindings>
            </Image>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

C#代码（ViewModel及辅助类） #

// 图片数据模型
public class ImageItem
{
    public string ImagePath { get; set; }
    // 可扩展其他属性：图片名称、ID等
}

// 主ViewModel
public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<ImageItem> ImageList { get; set; }
    public ICommand OpenImageCommand { get; }

    public MainViewModel()
    {
        ImageList = new ObservableCollection<ImageItem>();
        // 初始化示例数据
        ImageList.Add(new ImageItem { ImagePath = @"C:\Images\comic1.jpg" });
        ImageList.Add(new ImageItem { ImagePath = @"C:\Images\comic2.jpg" });

        OpenImageCommand = new RelayCommand<ImageItem>(HandleOpenImage);
    }

    private void HandleOpenImage(ImageItem clickedItem)
    {
        if (clickedItem == null) return;
        
        // 获取当前项索引
        int itemIndex = ImageList.IndexOf(clickedItem);
        
        // 执行打开图片的逻辑（调用系统默认查看器）
        Process.Start(new ProcessStartInfo(clickedItem.ImagePath) { UseShellExecute = true });
        
        // 调试输出索引（可选）
        Debug.WriteLine($"点击第 {itemIndex} 项，路径：{clickedItem.ImagePath}");
    }

    // 实现INotifyPropertyChanged接口
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
    }
}

// 通用RelayCommand实现（可复用）
public class RelayCommand<T> : ICommand
{
    private readonly Action<T> _executeAction;
    private readonly Func<T, bool> _canExecuteFunc;

    public RelayCommand(Action<T> execute, Func<T, bool> canExecute = null)
    {
        _executeAction = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecuteFunc = canExecute;
    }

    public bool CanExecute(object parameter) => _canExecuteFunc?.Invoke((T)parameter) ?? true;

    public void Execute(object parameter) => _executeAction((T)parameter);

    public event EventHandler CanExecuteChanged
    {
        add => CommandManager.RequerySuggested += value;
        remove => CommandManager.RequerySuggested -= value;
    }
}

方案2：后台事件直接获取绑定项（适合快速实现） #

如果不想用MVVM，直接给Image添加点击事件，通过DataContext获取绑定的数据对象，再用ItemsControl的Items.IndexOf方法拿到索引。

XAML代码 #

<ItemsControl x:Name="ImageGridControl" ItemsSource="{Binding ImageList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding ImagePath}" 
                   Width="150" Height="200" 
                   Margin="5" Cursor="Hand"
                   MouseLeftButtonDown="Image_Click"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

后台C#代码 #

private void Image_Click(object sender, MouseButtonEventArgs e)
{
    var clickedImage = sender as Image;
    if (clickedImage == null) return;

    // 获取绑定的数据项
    var targetItem = clickedImage.DataContext as ImageItem;
    if (targetItem == null) return;

    // 获取当前项索引
    int itemIndex = ImageGridControl.Items.IndexOf(targetItem);

    // 打开图片逻辑
    Process.Start(new ProcessStartInfo(targetItem.ImagePath) { UseShellExecute = true });
    Debug.WriteLine($"点击第 {itemIndex} 项，路径：{targetItem.ImagePath}");
}

方案3：给ItemsControl添加选中状态跟踪 #

如果需要类似ListView的选中高亮效果，可以自定义ItemContainerStyle，同时绑定选中项到ViewModel：

XAML代码片段 #

<ItemsControl ItemsSource="{Binding ImageList}"
              SelectedItem="{Binding SelectedImageItem}">
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Margin" Value="5"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="True">
                    <Setter Property="BorderBrush" Value="#FF0078D4"/>
                    <Setter Property="BorderThickness" Value="2"/>
                    <Setter Property="Padding" Value="3"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <!-- 其余ItemsPanel、ItemTemplate代码同前 -->
</ItemsControl>

ViewModel添加选中项属性 #

private ImageItem _selectedImageItem;
public ImageItem SelectedImageItem
{
    get => _selectedImageItem;
    set
    {
        _selectedImageItem = value;
        OnPropertyChanged(nameof(SelectedImageItem));
    }
}

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