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

我不确定在 WPF中实现这个的最佳方法,所以我先说明我的问题.

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

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

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

要么

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

解决方法

你有两个问题：

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

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

这是一个2×2网格数据绑定到四元素图像集合.在这里,我们使用很少使用的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>

净效果是2×2网格的图像,您可以自由地在它们之间箭头.您可以使用样式使按钮方面更像按钮,而不会失去可聚焦性.因此将所有二十个图像绑定到此视图,首先是前十个,然后是后十个.您还可以从同一数据源绑定列计数.