c# - 项目具有多个可选区域的列表框

Question

我不确定在 WPF 中实现它的最佳方式，所以我会先说明我的问题。

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

我将其实现为一个 ListBox，其中 ItemsSource 绑定(bind)到我的 View 模型的 Frames 集合(一个可观察的集合)。在 ListBox 的 DataTemplate 中，我创建了一个包含两行的网格，每一行都包含一个 Image 控件。第 0 行的那个绑定(bind)到 TopImage(我的 Frame 类的一个属性)，底部的那个绑定(bind)到 BottomImage。

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

或

有没有更好的实现方式>

Answer 1

你有两个问题:

• 你想分离一个框架中上下图像的可选性
• 您希望箭头键能够在二维图像中导航

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

这是一个 2x2 网格数据绑定(bind)到一个四元素图像集合。在这里，我们使用很少使用的 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 的图像网格，您可以在它们之间自由移动。您可以使用样式使按钮外观不那么像按钮，而不会失去可聚焦性。因此，将所有二十张图像绑定(bind)到此 View ，首先是前十张，然后是后十张。您还可以绑定(bind)来自同一数据源的列数。