image - 如何选择列表框行中的单个项目

Question

我想在一个ListBox. 我不能使用WrapPanel，因为它会失去虚拟化。所以我用VirtualizingStackPanel.

在我的ListBoxItem模板中，我有 3 张水平图像StackPanel。我想允许用户单击单个图像，但ListBox默认行为只允许单击整个图像ListBoxItem。

怎么做 ？

Answer 1

如果您不想在整行上进行选择，则应切换到 aItemsControl而不是 a ListBox。

要允许在每一行上选择图像，请将ItemTemplatethis设置ItemsControl为 ListBox，绑定到图像集合。

这是一些应该工作的示例代码：

<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>