C# WPF：如何避免点击ListBoxItem内图片时选中该项

当然可以实现这个需求！核心思路是阻止Image所在的Border区域的鼠标点击事件冒泡到父级ListBoxItem——这样点击Border时，ListBoxItem就不会触发选中逻辑；而点击Item的其他区域（比如Label）时，事件正常传递，ListBoxItem会被正常选中。

具体实现方法 #

这里提供两种常用方案，你可以根据自己的项目模式选择：

方案1：简单后台代码实现（适合快速需求） #

这种方式直接通过后台事件处理阻止事件冒泡，操作最简单：

步骤1：修改XAML中的Border标签

给包含Image的Border添加PreviewMouseDown事件绑定：

<Border Grid.Column="1" Visibility="Visible" CornerRadius="5" Height="20" Width="20" Margin="0 0 5 0" 
        HorizontalAlignment="Center" VerticalAlignment="Center"
        PreviewMouseDown="Border_PreviewMouseDown">
    <!-- 原有的Image、Interaction.Triggers和Style内容保持不变 -->
</Border>

步骤2：添加后台事件处理代码

在对应的窗口/UserControl的.xaml.cs文件中添加如下方法：

private void Border_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
    // 标记事件为已处理，阻止事件继续向上传递给ListBoxItem
    e.Handled = true;
}

方案2：MVVM无后台代码实现（适合纯MVVM架构） #

如果你的项目遵循严格的MVVM模式，不想写后台代码，可以通过自定义行为来实现：

步骤1：创建自定义行为类

在项目中新建一个简单的行为类：

using System.Windows;
using System.Windows.Input;
using System.Windows.Interactivity;

namespace YourProjectNamespace // 替换成你的项目命名空间
{
    public class HandleEventAction : TriggerAction<DependencyObject>
    {
        protected override void Invoke(object parameter)
        {
            if (parameter is MouseButtonEventArgs e)
            {
                e.Handled = true;
            }
        }
    }
}

步骤2：修改XAML中的Interaction.Triggers

在XAML头部添加本地命名空间引用（替换成你的项目命名空间）：

xmlns:local="clr-namespace:YourProjectNamespace"

然后修改Border的交互触发器，添加阻止事件的行为：

<Border Grid.Column="1" Visibility="Visible" CornerRadius="5" Height="20" Width="20" Margin="0 0 5 0" 
        HorizontalAlignment="Center" VerticalAlignment="Center">
    <Image Height="15" HorizontalAlignment="Center" Source="../Icons/Cross.png"/>
    <i:Interaction.Triggers>
        <!-- 原有的删除命令触发器保持不变 -->
        <i:EventTrigger EventName="MouseDown">
            <i:InvokeCommandAction Command="{Binding DataContext.RemoveSymbolCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}}" CommandParameter="{Binding}"/>
        </i:EventTrigger>
        <!-- 添加这个触发器阻止事件冒泡 -->
        <i:EventTrigger EventName="PreviewMouseDown">
            <local:HandleEventAction/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <!-- 原有的Border样式保持不变 -->
</Border>

修改后的完整XAML示例（方案1版本） #

<ListBox ItemsSource="{Binding SymbolList}" SelectedItem="{Binding SelectedSymbol}" Style="{StaticResource WishlistListBoxStyle}" HorizontalContentAlignment="Stretch" Width="200" Padding="0">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label Content="{Binding}" Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ListBoxItem}}"/>
                <Border Grid.Column="1" Visibility="Visible" CornerRadius="5" Height="20" Width="20" Margin="0 0 5 0" 
                        HorizontalAlignment="Center" VerticalAlignment="Center"
                        PreviewMouseDown="Border_PreviewMouseDown">
                    <Image Height="15" HorizontalAlignment="Center" Source="../Icons/Cross.png"/>
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseDown">
                            <i:InvokeCommandAction Command="{Binding DataContext.RemoveSymbolCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}}" CommandParameter="{Binding}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <Border.Style>
                        <Style TargetType="{x:Type Border}">
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="LightGray" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Border.Style>
                </Border>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

<Style x:Key="WishlistListBoxStyle" TargetType="{x:Type ListBox}">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="FontFamily" Value="Arial"/>
    <Setter Property="Background" Value="#282C2F"/>
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <Border x:Name="WishlistBorder" Style="{DynamicResource WishlistBorderContent}">
                                <ContentPresenter />
                            </Border>
                            <ControlTemplate.Resources>
                                <Style x:Key="WishlistBorderContent" TargetType="{x:Type Border}">
                                    <Setter Property="BorderThickness" Value="0 0 0 2"/>
                                    <Setter Property="BorderBrush" Value="#50D3D3D3"/>
                                </Style>
                            </ControlTemplate.Resources>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="WishlistBorder" Property="BorderThickness" Value="2"/>
                                    <Setter TargetName="WishlistBorder" Property="BorderBrush" Value="#63C5DA"/>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="WishlistBorder" Property="Background" Value="#50D3D3D3"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

原理说明 #

WPF的事件分为两种路由模式：

• 冒泡事件（比如MouseDown）：从触发的子元素向上传递到父元素；
• 隧道事件（比如PreviewMouseDown）：从父元素向下传递到子元素。

我们通过在Border的PreviewMouseDown事件中标记e.Handled = true，可以提前终止事件的传递链——这样ListBoxItem就不会收到这个点击事件，自然不会触发选中逻辑。而点击Label区域时，事件正常冒泡到ListBoxItem，就能正常选中Item了。

内容的提问来源于stack exchange，提问作者Ooi Yoong Khang