列表框，其中项目具有多个可选区域

Question

我不确定在 WPF 中实现此功能的最佳方法，因此我首先说明我的问题。

我有一个框架集合。每帧有两个图像。假设我有 10 个帧，总共 20 张图像。我想在屏幕底部显示像胶片一样组织的图像 - 2 行和 10 列。当用户单击其中一张图像或使用箭头时，它应该被选中，并且所选图像信息将在应用程序的其他地方使用。

我已将其实现为 ListBox，其中 ItemsSource 绑定到我的视图模型的 Frames 集合（可观察集合）。在列表框的数据模板中，我创建了一个包含两行的网格，每行包含一个图像控件。第 0 行的一个绑定到 TopImage（我的 Frame 类的一个属性），底部的一个绑定到 BottomImage。

所有这些工作都有效，但问题是当我使用箭头时，整个框架（项目）都会被选中。如何单独选择数据模板中的每个图像？

或者

有没有更好的方法来实现这个>

Answer 1

您有两个问题：

• 您想要将框架中上部和下部图像的选择性分开
• 您希望箭头键能够在二维中导航图像

如果您没有箭头键要求，那么您可以解决第一个 问题通过在父 ItemsControl 中嵌套 ListBox 对象来解决此问题。但是箭头只能在 ListBox 中做正确的事情。要解决这个问题需要采取不同的方法。

这是一个绑定到四元素图像集合的 2x2 网格数据。在这里，我们使用很少使用的 UniformGrid 来使集合在这么多列之后换行。由于我们使用 ItemsControl，我们失去了自动选择支持，但我们通过使 Image 控制 Button 的内容来恢复它。

<Grid>
    <Grid.Resources>
        <x:Array x:Type="sys:String" x:Key="sampleData">
            <sys:String>http://thecybershadow.net/misc/stackoverflow.png</sys:String>
            <sys:String>http://thecybershadow.net/misc/sourceforge.png</sys:String>
            <sys:String>http://thecybershadow.net/misc/stackoverflow.png</sys:String>
            <sys:String>http://thecybershadow.net/misc/sourceforge.png</sys:String>
        </x:Array>
    </Grid.Resources>
    <ItemsControl ItemsSource="{StaticResource sampleData}" Focusable="False">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="2"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button>
                    <Button.Content>
                        <Image Source="{Binding}"/>
                    </Button.Content>
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

最终效果是一个 2x2 的图像网格，您可以在它们之间自由移动。您可以使用样式来使按钮外观不那么像按钮，而不会失去可聚焦性。因此，将所有二十个图像绑定到此视图，首先是前十个，然后是后十个。您还可以绑定来自同一数据源的列计数。