列表框数据模板 - 项目只能通过单击子元素来选择，而不仅仅是项目上的任何位置

Posted 2023-05-08

【中文标题】列表框数据模板 - 项目只能通过单击子元素来选择，而不仅仅是项目上的任何位置

【英文标题】：Listbox datatemplate - item only selectable by clicking a subelement, not just anywhere on the item

【发布时间】：2011-04-02 09:50:54

【问题描述】：

我有一个带有项目数据模板的列表框。 问题是仅通过单击项目上的任意位置来选择项目不起作用。我必须点击一个特定的子元素才能真正起作用。

我的项目有一个图像和一个文本块。 如果我将鼠标悬停在图像或文本块上，我实际上会看到悬停效果。 如果我将鼠标悬停在项目的任何“空白”空间上，则没有悬停效果（当我点击那里时也没有选择）。

示例图片：http://i33.tinypic.com/wvtleg.png

如果我单击（或将鼠标悬停在）实际文本或图像上它可以正常工作， 但是如果我将鼠标悬停在空白区域（我在它周围画了一条红线:)）列表框没有响应。

如何让列表框悬停/单击以响应单击项目空间中的任意位置？

为了完整起见，这里是我的 Listbox + 模板：

<ListBox Grid.Row="1"
  ItemsSource="Binding Path=CreatableOutputWindows, Mode=OneWay" Height="Auto"
  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
  Margin="8,8,8,8"
  Name="listBox1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="84"/>
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border Margin="5" BorderBrush="Black" BorderThickness="2">
          <Image Source="Binding Path=Image" Stretch="Fill" Width="80" Height="50" />
        </Border>
        <StackPanel Grid.Column="1" Margin="5">
          <StackPanel Orientation="Horizontal" TextBlock.FontWeight="Bold">
            <TextBlock Text="Binding Path=Name" />
          </StackPanel>
        </StackPanel>
      </Grid>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

【参考方案1】：

听起来您的 ListBoxItem 没有响应 hit testing。尝试将网格的背景设置为透明：

<Grid Background="Transparent">

默认值为null，这将使元素对命中测试不可见。将背景设置为透明不会影响显示，但会允许元素被击中。 ListBoxItem 的默认样式将具有透明背景，但您可能已经重新设置了它的样式。

【讨论】：

这个对我很有帮助。我已经寻找这个解决方案很长一段时间了......在我的情况下，我有一个 StackPanel 而不是 Grid，它的工作原理与宣传的一样，所以底线是：如果您希望您的容器（面板）为您的ListBox，将背景设置为透明。

【参考方案2】：

正如 Quartermeister 指出的那样 - 您需要设置网格的背景 - 但您还需要在资源中设置以下样式，因为 ListBoxItems 的 Horizo​​ntalContentAlignment 默认设置为 Left。 （仅在 ListBox 上设置是不够的）

<ListBox.Resources>
    <Style TargetType="x:Type ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</ListBox.Resources>