將我的數據庫中的圖像加載到具有“ 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));
}