CODEWITHSUNDEEP
xamlwindows-phone-8longlistselector
SimonM
SimonM

Reputation: 174

LongListSelector with cells of varying heights?

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.

Upvotes: 0

Views: 561

Answers (2)

SimonM
SimonM

Reputation: 174

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);

WP8 with Two Column Layout

Upvotes: 1

Depechie
Depechie

Reputation: 6142

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...

Upvotes: 0

Related Questions