Список, в котором элементы имеют более одного выбираемого региона - PullRequest
Новая
       12

Список, в котором элементы имеют более одного выбираемого региона

4 голосов
/ 30 декабря 2010

Я не уверен насчет лучшего способа реализовать это в WPF, поэтому сначала я изложу свою проблему.

У меня есть коллекция кадров. Каждый кадр имеет два изображения. Допустим, у меня есть 10 кадров, дающих в общей сложности 20 изображений. Я хочу показать изображения внизу экрана, организованные как кинопленка - 2 строки и 10 столбцов. Когда пользователь нажимает на одно из этих изображений или использует стрелку, оно должно стать выбранным, и информация о выбранном изображении будет использоваться в другом месте приложения.

Я реализовал его как ListBox с ItemsSource, привязанным к коллекции Frames моей viewmodel (observablecollection). В DataTemplate объекта ListBox я создал сетку из двух строк, каждая из которых содержит элемент управления Image. Один в строке 0 привязан к TopImage (свойство моего класса Frame), а нижний привязан к BottomImage.

Все это работает, но проблема в том, что когда я использую стрелки, выделяется весь кадр (элемент). Как мне выбрать каждое изображение в таблице данных по отдельности?

OR

Есть ли лучший способ реализовать это>

1 Ответ

1 голос
/ 30 декабря 2010

У вас есть две проблемы:

  • Вы хотите разделить выбор верхнего и нижнего изображений в кадре
  • Вы хотите, чтобы клавиши со стрелками могли перемещаться по изображениям вдва измерения

Если у вас не было требования клавиши со стрелкой, то вы могли бы решить первую проблему, вложив ListBox объекты в родительский элемент ItemsControl.Но тогда стрелки только делают правильные вещи в пределах 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>

Чистый эффект - 2x2сетка изображений, между которыми вы можете свободно стрелять.Вы можете использовать стилизацию, чтобы сделать аспект кнопки менее похожим на кнопку без потери фокусировки.Так что свяжите все двадцать изображений с этим видом, сначала первую десятку, а затем нижнюю десятку.Вы также можете привязать количество столбцов из того же источника данных.

...