LongListSelector with cells of varying heights? - xaml

Question

I'm looking to use the LongListSelector to display two columns of images, the catch is that the images are of various heights and a static known width.
An example of the layout would be:
+--------+ +--------+
| img1 | | img2 |
| | | |
+--------+ | |
+--------+ | |
| img3 | +--------+
| | +--------+
| | | img4 |
| | | |
+--------+ | |
+--------+
I found a project that shows a grid of images, called PhotoHubSample (from http://code.msdn.microsoft.com/wpapps/PhotoHub-Windows-Phone-8-fd7a1093), however this uses a consistent width and height - leading me to believe it's not possible to do what I want.
I can't see any other Windows Phone 8 examples, however if you want to see a real world example - the Pinterest app on the iPhone renders this kind of list... is there a way to do it in XAML? I'm not 100% set on using LongListSelector if there is an alternative.

Answer 1

I tried the VariableSizedWrapGrid and WrapPanel but both required known heights and widths (or proportions thereof). Since I knew my image width (half the screen width on the phone) I would be sizing the height of the image to ensure correct scaling. This meant the height was variable.
To achieve this, I created a ViewModel that had two image sources a 'LeftImage' and a 'RightImage' as well as a computed 'YOffset'. Now each Item in my LongListSelector would have the following 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>
I used an IValueConverter to create the Thickness object required for the vertical offset of the second image and wrapped this in a Canvas so that it could spill over the boundaries of the Grid.
To generate my ViewModel items I take the list of images and do a simple bin sorting algorithm between the Left and Right sides, making sure I always have an image in the left to match. I keep a running count of the offset and set appropriately on each item in the ViewModel collection.
It's a bit hacky as it's not pure XAML, and I'm sure I could turn it into a proper control, but this works fine for the one scrolling list I need. I also get all the benefits of the LongListSelector, I'll be implementing infinite scrolling eventually so all I need to keep track of in the ViewModel is the ongoing offset.
A view of what it looks like with 400px and 600px images is below (actual screenshot);

Answer 2

There is a variable sized wrap grid control available in the Kinnara wp toolkit... maybe it can help? You can get it at github here...