将我的数据库中的图像加载到具有“ instagram”布局（3行）的列表视图中，如何将正确的图像推送到下一页？

Question

所以我想要实现的是，当您单击图像时，您会转到新页面，并且在该页面上获得正确的图像。 使用当前的代码，当我当前单击图像时会崩溃：“指定的转换无效。”

我认为这与我的代码中的OnImageTapped函数有关，您将在下面看到。

这是我目前拥有的代码。 图像布置得很好，但这只是我要单击的最后一部分，并将单击的图像带到我的下一页，这给我带来了麻烦。

我的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>

码：

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

我如何从数据库中加载图像。

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;

    }

OnImageTapped函数：

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

    }

我收到的页面：

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

Answer 1

由于您的信息课中包含三个不同的潜在图像，因此无法知道单击了哪个图像。 解决此问题的最佳方法是对其进行重构，以使每个信息都有一个不同的图像。 但是，一种更快（但更hacker）的方法是重新利用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));
}