Listbox datatemplate - 只能通过单击子元素来选择项目，而不仅仅是项目上的任何位置 [英] Listbox datatemplate - item only selectable by clicking a subelement, not just anywhere on the item

问题描述

我有一个包含项目数据模板的列表框。
问题在于，只需单击物品上的任意位置即可选择物品;我必须点击一个特定的子元素才能实际工作。

我的物品有一个图像和一个文本块。
如果将鼠标悬停在图像或文本块上，我实际上可以看到悬停效果。
如果我将鼠标悬停在项目的任何空白空间上，则不会有悬停效果（并且当我点击该空间时没有选择）。

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

如果我点击（或悬停）实际文字或图片，它可以正常工作，
但是如果我将鼠标悬停在空白区域（我画了一条红线

如何获取列表框悬停/点击以响应点击任何地方的 项目的空间？

为了完整性，我的列表框+模板：

 < ListBox Grid.Row =1
 ItemsSource ={Binding Path = CreatableOutputWindows，Mode = OneWay}Height =Auto
 Horizo​​ntalAlignment =StretchVerticalAlignment =Stretch
 Margin =8,8,8,8
 Name =listBox1Horizo​​ntalContentAlignment =StretchVerticalContentAlignment =Stretch> 
< ListBox.ItemTemplate> 
< DataTemplate> 
<网格> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =84/> 
< ColumnDefinition Width =*/> 
< /Grid.ColumnDefinitions> 
< Border Margin =5BorderBrush =BlackBorderThickness =2> 
 < / Border> 
< StackPanel Grid.Column =1Margin =5> 
< StackPanel Orientation =Horizo​​ntalTextBlock.FontWeight =Bold> 
< TextBlock Text ={Binding Path = Name}/> 
< / StackPanel> 
< / StackPanel> 
< / Grid> 
< / DataTemplate> 
< /ListBox.ItemTemplate> 
< / ListBox>正如Quartermeister指出的那样 - 你需要设置Background（背景）的Grid  - 但您还需要在资源中设置以下样式，因为默认情况下，ListBoxItems的Horizo​​ntalContentAlignment设置为Left。 （仅将它设置在ListBox上是不够的）
 
 
 < ListBox.Resources> 
< Style TargetType ={x：Type ListBoxItem}> 
< Setter Property =Horizo​​ntalContentAlignmentValue =Stretch/> 
< / style> 
< /ListBox.Resources> 
  
 
I have a listbox with a datatemplate for the items.
The problem is that selecting an item doesn't work by just clicking anywhere on the item; I have to click on a specific sub-element for it to actually work.

My item has an image and a textblock.
If I hover the mouse over the image or text-block, I actually see the hover-effect.
If I hover the mouse over any of the 'empty' space of the item, no hover effect (and no selection when I click there).

Example image : http://i33.tinypic.com/wvtleg.png

If I click on (or hover over) the actual text or the image it works fine,
but if i hover my mouse in the empty areas (I've drawn a red line around it :)) the listbox doesn't respond.

How do I get the listbox hovering / clicking to respond to clicking anywhere in the item's space ?

For completeness here is my Listbox + template:
<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>

解决方案
As Quartermeister pointed out - you need to set the Background of the Grid - but you also need to set the following style in your resources as ListBoxItems' HorizontalContentAlignment is set to Left by default. (It isn't enough to set it on the ListBox) 
<ListBox.Resources>
    <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</ListBox.Resources>


                        
这篇关于Listbox datatemplate  - 只能通过单击子元素来选择项目，而不仅仅是项目上的任何位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！