CODEWITHSUNDEEP
gridviewwindows-phone-8
user2636874
user2636874

Reputation: 899

Display images in grid view in windows phone 8

I'm getting the images from server. I don't know how many number of images come from server when i request for images. After getting the images i want to display them in Grid View with 3 columns for each row as shown in the below figure. So here the columns are fixed (3). The rows should be changed based on the number of images.

enter image description here

Could you please tell me how to do that in windows phone 8.

Upvotes: 4

Views: 6175

Answers (3)

Chhaya Sharma
Chhaya Sharma

Reputation: 464

Create a simple Listbox and set its ItemsPanel to toolkit:WrapPanel with Orientation="Horizontal" 

<ListBox Margin="0,40,0,0" ItemsSource="{Binding}" Width="450" VirtualizingStackPanel.VirtualizationMode="Recycling">
   <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
          <toolkit:WrapPanel Orientation="Horizontal" />
      </ItemsPanelTemplate>
   </ListBox.ItemsPanel>
   <ListBox.ItemTemplate>
      <DataTemplate>
         <Grid Height="150" Width="150">
            <Image Height="130" Width="130" HorizontalAlignment="Center" VerticalAlignment="Center" />
         </Grid>
      </DataTemplate>
   </ListBox.ItemTemplate>
 </ListBox>

Just on a note, if too many images are loaded on the view all together, it may lead to Out Of Memory exception. So just make sure the images you are adding are thumbnails and not complete images. VirtualizationStackPanel may slightly improve the performance.

Upvotes: 4

Farhan Ghumra
Farhan Ghumra

Reputation: 15296

If your purpose is to display images only (not selection) then go for ItemsControl, check out below code.

XAML

<ItemsControl x:Name="ic">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid HorizontalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Image Stretch="None" Source="{Binding First}" />
                <Image Stretch="None" Source="{Binding Second}" Grid.Column="1" />
                <Image Stretch="None" Source="{Binding Third}" Grid.Column="2" />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

C#

public MainPage()
{
    InitializeComponent();
    var URLs = new List<Uri> 
    {
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png"),
        new Uri("http://i.imgur.com/SG8KZCh.png")
    };

    var GroupedURLs = new List<ImageViewModel>();
    for (int i = 0; i < URLs.Count; i=i+3)
    {
        var objImageViewModel = new ImageViewModel();
        if (URLs.ElementAtOrDefault(i) != null)
        {
            objImageViewModel.First = URLs[i];
        }
        if (URLs.ElementAtOrDefault(i + 1) != null)
        {
            objImageViewModel.Second = URLs[i + 1];
        }
        if (URLs.ElementAtOrDefault(i + 2) != null)
        {
            objImageViewModel.Third = URLs[i + 2];
        }

        GroupedURLs.Add(objImageViewModel);
    }

    ic.ItemsSource = GroupedURLs;
}

public class ImageViewModel
{
    public Uri First { get; set; }
    public Uri Second { get; set; }
    public Uri Third { get; set; }
}

Upvotes: 2

Ergin Babani
Ergin Babani

Reputation: 346

One possibility could be to use a LongListSelector and set the LayoutMode to Grid.

Then you would set the GridCellSize in such a way that only 3 images show up per row (ex. If the screen has width 480 set GridCellSize to 160x160 for 3 square images on each row.)

Upvotes: 7

Related Questions