Question

I am making a Windows Phone App at the moment and I run into some problems.

In the app, I want a FotoWall with foto’s obtained from Flickr. I got the data part and at the moment, I create a list with 2 Kinds of Url’s UrlTumb(for the tumbnails) and UrlFull(for the original images)

Now, I want to fill/create a grid of 4 by 4 images and fill them with my UrlTumb Url’s.

So thats my question: How do I create a grid of images which I can fill with data from my List?
The grid will consist of 4 images in the width and 4 in height which every image being 100px by 100px.

Answer 1

You could create a ListBox control and change the ItemsPanel to be a Wrap Panel from the Silverlight for Windows Phone Toolkit :-

http://silverlight.codeplex.com/

Then you can set the ItemTemplate to be an Image control and then if you size your images correctly, you can achieve a 4 x 4 image grid.

    <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <toolkit:WrapPanel />
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Image Source="{Binding ThumbNailImage}"
                    Margin="0"
                    Height="110"
                    Width="110"
                    CacheMode="BitMapCache"
                    Stretch="UniformToFill"
                    Grid.Row="0" />
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>

Hope this helps.