Question

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

我有一组帧。每帧有两个图像。假设我有10帧，总共有20张图像。我希望将屏幕底部的图像显示为电影条 - 2行10列。当用户单击其中一个图像或使用箭头时，它应该被选中，所选图像信息将被用于应用程序中的其他位置。

我已经将它实现为ListBox，并将ItemsSource绑定到我的viewmodel的Frames集合（一个observablecollection）。在ListBox的DataTemplate中，我创建了一个包含两行的网格，每一行都包含一个Image控件。第0行的一个绑定到TopImage（我的Frame类的属性），底部绑定到BottomImage。

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

OR

有没有更好的方法来实现这个＆gt;

Answer 1

你有两个问题：

您想要分隔框架中上下图像的可选择性
您希望箭头键能够以二维方式导航图像

如果您没有箭头键要求，则可以通过将ListBox对象嵌套在父ItemsControl内来解决第一个问题。但是箭头只能在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的图像网格，您可以自由地在它们之间转换。您可以使用样式使按钮方面更像按钮，而不会失去可聚焦性。因此将所有二十个图像绑定到此视图，首先是前十个，然后是后十个。您还可以从同一数据源绑定列计数。

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

1 个答案: