Loading images from my DB into a listview with a “instagram”-layout (3 different rows), how do I push the correct image to the next page?

Question

So what i want to achieve is that when you click on an image you go to a new page and you get the correct image on that page. with my current code i get a crash when I currently click an image: "Specified cast is not valid."

I assume it has something to do with my OnImageTapped function in my code which you will see below.

This is the code that I currently have. The images gets laid out just fine but it is just the last part where I want to click and bring with me the clicked image to the next page that is giving me trouble right now.

My XAML:

<ListView x:Name="imagesListview" RowHeight="100" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.View>
                            <AbsoluteLayout>

                                <Image Source="{Binding theimage}" 
                                AbsoluteLayout.LayoutBounds="0.0, 0.0, 0.333, 1.0" 
                                AbsoluteLayout.LayoutFlags="All" Aspect="AspectFill" >
                                <Image.GestureRecognizers>
                                <TapGestureRecognizer Tapped="OnImageTapped"/>
                                </Image.GestureRecognizers>
                                </Image>

                               <Image Source="{Binding theimage2}" AbsoluteLayout.LayoutBounds="0.5, 0.0, 0.333, 1.0" 
                                AbsoluteLayout.LayoutFlags="All" Aspect="AspectFill" >
                               <Image.GestureRecognizers>
                               <TapGestureRecognizer Tapped="OnImageTapped"/>
                               </Image.GestureRecognizers>
                               </Image>

                                <Image Source="{Binding theimage3}" 
                                AbsoluteLayout.LayoutBounds="1.0, 0.0, 0.333, 1.0" AbsoluteLayout.LayoutFlags="All" Aspect="AspectFill" >
                                <Image.GestureRecognizers>
                                <TapGestureRecognizer Tapped="OnImageTapped"/>
                                </Image.GestureRecognizers>
                                </Image> 

                            </AbsoluteLayout>
                        </ViewCell.View>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

CODE:

public class info 
    {
        public  string theimage {get; set;}
        public  string theimage2 {get; set;}
        public  string theimage3 {get; set;}
    }

How I load the images from my DB.

new List<info> imagesList = new List<info> ();

async void loadPhotos ()
    {

        int ndx = 0;
        info Info = null;
        var getInfo = await phpApi.getPhotos ();

        imagesListview.ItemsSource = null;
        imagesList = new List<info> ();

        foreach (var items in getInfo["results"]) {

            if (ndx == 0) {
                Info = new info();
                Info.theimage = items ["Photo"].ToString();
                ndx++;
            } else

                if (ndx == 1) {
                    Info.theimage2 = items ["Photo"].ToString();
                    ndx++;
                } else

                    if (ndx == 2) {
                        Info.theimage3 = items ["Photo"].ToString();
                        imagesList.Add(Info);
                        Info = null;
                        ndx = 0;
                    }
        }

        if (Info != null) {
            imagesList.Add(Info);
        }

        imagesListview.ItemsSource = imagesList;

    }

The OnImageTapped function:

async void OnImageTapped(object sender, EventArgs eventArgs) { //here is the problem i suppose?

        info imageSender = (info)sender;

        string imageString = imageSender.ToString();
        await Navigation.PushAsync (new PhotoDetailPage (imageString));

    }

The page where I recieve it:

public PhotoDetailPage (string photo)
{
myXamlImage.Source = photo; //myXamlImage is an image i have in the XAML.
}

Answer 1

Because your info class has three different potential images in it, there's no way to know which one was clicked. The best way to solve this would be to refactor it so that each info had one distinct image. However, a quicker (but hackier) way would be to repurpose one of Image's properties to include a reference to the source image:

// put the image url in ClassId so we can refer to it later
<Image Source="{Binding theimage}" ClassId="{Binding theimage}" 

async void OnImageTapped(object sender, EventArgs eventArgs) { 

  // sender is the image that was tapped    
  Image image = (Image) sender;

  string imageString = image.ClassId;
  await Navigation.PushAsync (new PhotoDetailPage (imageString));
}