WPF中点击ListBox项时仅选中Image控件的实现方法

要实现点击ListBox项时只有Image显示选中状态，我们需要修改ListBoxItem的默认选中视觉模板，同时给Image添加选中状态的样式触发器，具体步骤如下：

1. 移除ListBoxItem的默认选中高亮 #

默认情况下，ListBoxItem选中时会高亮整个容器，我们需要重写它的ControlTemplate，去掉这个全局高亮效果：

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <!-- 保留你原有的鼠标悬停触发选中的逻辑 -->
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="IsSelected" Value="True"/>
            </Trigger>
        </Style.Triggers>
        <!-- 重写模板，移除默认选中背景 -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <ContentPresenter 
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListBox.ItemContainerStyle>

2. 给Image添加选中状态的样式 #

接下来，我们要让Image在所在的ListBoxItem被选中时显示选中效果（比如添加边框、改变透明度等），给Image添加Style并绑定父级ListBoxItem的IsSelected属性：

<Image Height="90" Source="{Binding Path=Thumbnail}" Margin="0,8,8,0" MouseLeftButtonDown="Image_MouseLeftButtonDown">
    <Image.Style>
        <Style TargetType="Image">
            <Setter Property="Opacity" Value="1"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Style.Triggers>
                <!-- 绑定到父级ListBoxItem的IsSelected属性 -->
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=IsSelected}" Value="True">
                    <!-- 这里可以自定义选中效果，比如加边框、改变透明度 -->
                    <Setter Property="Opacity" Value="0.7"/>
                    <Setter Property="BorderThickness" Value="2"/>
                    <Setter Property="BorderBrush" Value="#FF0078D7"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

完整修改后的代码片段 #

把上面的修改整合到你的原代码中，最终的ListBox部分会是这样：

<ListBox Name="mediaListBox" BorderThickness="0" SelectionChanged="mediaListBox_SelectionChanged" 
         ItemsSource="{Binding ThumbnailItems}" SnapsToDevicePixels="True" 
         SelectedItem="{Binding SelectedItem}" Background="Transparent" 
         Drop="ImagePanel_Drop" AllowDrop="true">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="IsSelected" Value="True"/>
                </Trigger>
            </Style.Triggers>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <ContentPresenter 
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True" Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollContentPresenter}}}" >
            </WrapPanel>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <StackPanel Width="120">
                    <Grid>
                        <Image Height="90" Source="{Binding Path=Thumbnail}" Margin="0,8,8,0" MouseLeftButtonDown="Image_MouseLeftButtonDown">
                            <Image.Style>
                                <Style TargetType="Image">
                                    <Setter Property="Opacity" Value="1"/>
                                    <Setter Property="BorderThickness" Value="0"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=IsSelected}" Value="True">
                                            <Setter Property="Opacity" Value="0.7"/>
                                            <Setter Property="BorderThickness" Value="2"/>
                                            <Setter Property="BorderBrush" Value="#FF0078D7"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Image.Style>
                        </Image>
                        <Button Visibility="{Binding IsVisible,Converter={StaticResource booleanVisibilityConverter}, FallbackValue=Hidden,UpdateSourceTrigger=PropertyChanged}" 
                                Style="{DynamicResource CloseButton}" HorizontalAlignment="Right" VerticalAlignment="Top" 
                                Command="{Binding ElementName=mediaListBox,Path=DataContext.RemoveGallaryItemCommand}" 
                                CommandParameter="{Binding}" Width="16" Height="16" Content="x"></Button>
                    </Grid>
                    <TextBlock TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" HorizontalAlignment="Center" 
                               VerticalAlignment="Center" Foreground="White" Text="{Binding Path=Name}" >
                        <TextBlock.ToolTip>
                            <ToolTip Visibility="{Binding RelativeSource={RelativeSource Self}, Path=PlacementTarget, Converter={StaticResource trimmedVisibilityConverter}}">
                                <ToolTip.Content>
                                    <TextBlock Text="{Binding Name}"/>
                                </ToolTip.Content>
                            </ToolTip>
                        </TextBlock.ToolTip>
                    </TextBlock>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

另外我修改了Button的CommandParameter，原来的{Binding SelectedItem}改为{Binding}——因为Button在DataTemplate里，直接绑定当前项即可，这样删除命令才能正确拿到要删除的项。

现在点击ListBox项时，就只有Image会显示选中的边框/透明度变化，整个Item不会有默认的高亮了，完全符合你想要的效果。

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