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

我不确定在WPF中实现这一点的最佳方法，因此我将首先说明我的问题

我有一套相框。每个帧有两个图像。假设我有10帧，总共有20幅图像。我想在屏幕底部显示像电影带一样组织的图像-2行10列。当用户单击其中一个图像或使用箭头时，应将其选中，并且所选图像信息将在应用程序中的其他位置使用

我将其实现为一个列表框，其中ItemsSource绑定到viewmodel的Frames集合（一个observablecollection）。在ListBox的DataTemplate中，我创建了一个包含两行的网格，每行包含一个图像控件。第0行上的一个绑定到TopImage（我框架类的一个属性），底部的一个绑定到BottomImage

所有这些都可以，但问题是，当我使用箭头时，整个框架（项目）被选中。如何分别选择datatemplate中的每个图像

或

是否有更好的方法来实现此>

您有两个问题：

• 您希望在一帧中分离上部图像和下部图像的可选择性
• 您希望箭头键能够在二维中导航图像

如果没有箭头键要求，则可以通过将

ListBox

对象嵌套在父

ItemsControl

中来解决第一个问题。但是箭头只能在

列表框中做正确的事情。要解决这一问题，需要采取不同的方法

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

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


http://thecybershadow.net/misc/stackoverflow.png
http://thecybershadow.net/misc/sourceforge.png
http://thecybershadow.net/misc/stackoverflow.png
http://thecybershadow.net/misc/sourceforge.png

净效果是一个2x2的图像网格，你可以在它们之间自由地使用箭头。您可以使用样式设置使按钮的外观不太像按钮，而不会失去焦点。因此，将所有二十幅图像绑定到此视图，首先是前十幅，然后是后十幅。还可以绑定来自同一数据源的列计数