LongListSelector с ячейками различной высоты?

Question

Я ищу, чтобы использовать LongListSelector для отображения двух столбцов изображений, улов в том, что изображения имеют разную высоту и статическую известную ширину.

Пример макета будет:

+--------+ +--------+ 
| img1 | | img2 | 
|  | |  | 
+--------+ |  | 
+--------+ |  | 
| img3 | +--------+ 
|  | +--------+ 
|  | | img4 | 
|  | |  | 
+--------+ |  | 
      +--------+ 

Я нашел проект, который показывает сетку изображений, называемый PhotoHubSample (от http://code.msdn.microsoft.com/wpapps/PhotoHub-Windows-Phone-8-fd7a1093), однако это использует последовательную ширину и высоту - ведет меня верить я не могу делать то, что хочу.

Я не вижу других примеров Windows Phone 8, однако, если вы хотите увидеть пример реального мира - приложение Pinterest на iPhone отображает этот список ... есть ли способ сделать это в XAML ? Я не ставлю 100% на использование LongListSelector, если есть альтернатива.

Answer 1

Я пробовал VariableSizedWrapGrid и WrapPanel, но оба требуемые известные высоты и ширину (или их пропорции). Поскольку я знал ширину моего изображения (половину ширины экрана на телефоне), я бы оценил высоту изображения, чтобы обеспечить правильное масштабирование. Это означало, что высота была переменной.

Для этого я создал ViewModel, у которого были два источника изображения: LeftImage и RightImage, а также вычисленный «YOffset». Теперь каждый элемент в моем LongListSelector будет иметь следующий XAML;

<phone:LongListSelector.ItemTemplate> 
     <DataTemplate> 
      <Grid Margin="0,0,0,17"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="14" /> 
        <ColumnDefinition Width="*" /> 
       </Grid.ColumnDefinitions> 
       <Image Source="{Binding LeftImageUri}" Margin="0,0,0,0" HorizontalAlignment="Left" Stretch="None"/> 
       <Canvas Grid.Column="2"> 
        <Image Source="{Binding RightImageUri}" Stretch="None" Margin="{Binding YOffset, Converter={StaticResource ThicknessTopConverter}}"/> 
       </Canvas> 
      </Grid> 
     </DataTemplate> 
    </phone:LongListSelector.ItemTemplate> 

Я использовал IValueConverter создать Thickness объект, необходимый для вертикального смещения второго изображения и обернуто это в Canvas так, чтобы она могла распространиться на границах Grid.

Чтобы сгенерировать объекты ViewModel, я беру список изображений и выполняю простой алгоритм сортировки bin между левыми и правыми сторонами, убедившись, что у меня всегда есть изображение слева для соответствия. Я сохраняю счетчик смещения и правильно устанавливаю каждый элемент коллекции ViewModel.

Это немного хакерский, поскольку это не чистый XAML, и я уверен, что могу превратить его в правильный контроль, но это отлично подходит для одного списка прокрутки, в котором я нуждаюсь. Я также получаю все преимущества от LongListSelector, я буду внедрять бесконечную прокрутку, поэтому все, что мне нужно отслеживать в ViewModel, - это текущее смещение.

Вид на то, как он выглядит, с изображениями 400 и 600 пикселей ниже (фактический снимок экрана);

Answer 2

В инструменте Kinnara wp имеется средство управления сеткой с переменным размером ... возможно, это может помочь? Вы можете получить его at github here...