Geek Answers Handbook

Display grid images in Windows Phone 8

I get images from the server. I do not know how many images come from the server when I request images. After receiving the images, I want to display them in the Grid View mode with three columns for each row as shown in the figure below. So, here the columns are fixed (3). Lines must be changed depending on the number of images.

enter image description here

Could you tell me how to do this on a Windows 8 phone.

+4
source share
3 answers

One possibility would be to use LongListSelector and set LayoutMode to the grid.

GridCellSize , 3 (, 480 ​​ GridCellSize 160x160 .)

+7

ItemsPanel toolkit:WrapPanel 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>

, , . , - , . VirtualizationStackPanel .

+4

, ( ), ItemsControl, .

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>

#

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; }
}
+2

More articles:


All Articles