如何在列表框行中選擇單個項目

Question

我想在ListBox的行中顯示3個圖像。我無法使用WrapPanel，因爲它會丟失虛擬化。所以我使用VirtualizingStackPanel。

在我的ListBoxItem模板中，我有3個圖像水平StackPanel。我想讓用戶點擊單個圖像，但ListBox的默認行爲只允許點擊整個ListBoxItem。

如何做到這一點？

Answer 1

如果您不想在整行上選擇，則應切換到ItemsControl而不是ListBox。

若要允許選擇每行上的圖像，請將此ItemsControl的ItemTemplate設置爲列表框，並綁定到圖像集合。

下面是一些示例代碼，應該工作：

<ItemsControl ItemsSource="{Binding Collection}"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <!--THe ItemTemplate is a ListBox of Images--> 
      <ListBox> 
       <ListBox.ItemTemplate ItemsSource="{Binding Images}"> 
        <DataTemplate> 
         <Image Source="{Binding Img}" /> 
        </DataTemplate> 
       </ListBox.ItemTemplate> 
      </ListBox> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 

    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <VirtualizingStackPanel /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

    <!--This is required to have the scroll--> 
    <ItemsControl.Template> 
     <ControlTemplate TargetType="ItemsControl"> 
      <Border> 
       <ScrollViewer> 
        <ItemsPresenter/> 
       </ScrollViewer> 
      </Border> 
     </ControlTemplate> 
    </ItemsControl.Template> 
</ItemsControl>