Collection's View Label pass to modal upon tapping the collection view item

Question

My problem is I want to pass the label in my collection view to a modal page upon tapping a collection view items. this is my homepage.xml.cs code: `

  async private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
           
            await PopupNavigation.Instance.PushAsync(OrderPageModal);
        }

This is my homepage.xml

 <StackLayout 
                                                    Style="{StaticResource itemsInsideCardViewStackLayoutStyle}">
                                                    <StackLayout.GestureRecognizers>
                                                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                                                    </StackLayout.GestureRecognizers>
                                                    <Frame 
                                                        Style="{StaticResource stationImageFrameStyle}">
                                                        <Image 
                                                            Style="{StaticResource stationImageStyle}" 
                                                            Source="{Binding ImageURL}" />
                                                    </Frame>
                                                    <StackLayout 
                                                        Style="{StaticResource detailsStackLayout}">
                                                        <Label 
                                                            Text="{Binding storename}" 
                                                            Style="{StaticResource NameLabel}" 
                                                            HorizontalOptions="CenterAndExpand" 
                                                            Margin="-40,0,0,0"/>

`

that Text="{Binding storename}" is I get here;( in one file,I just put together my station/store model and the IEnumerable Get(). `

 public static IEnumerable<WRSinfo> Get()
        {
            return new List<WRSinfo>
            {

                new WRSinfo()
                {
                    storename="Aqua Refilling Station", status="Open", ImageURL="water_ref.png", distance="2km"

                },
         };
}

  public  string storename { get; set; }
        public string distance { get; set; }
        public string status { get; set; }

`

this is my popupmodal page design: `

 <StackLayout BackgroundColor="Green"
                                 HorizontalOptions="Center"
                                 VerticalOptions="Start"
                                 WidthRequest="100">
                        <Label Text="{Binding storename}" FontSize="20" TextColor="Black" x:Name="lblTextStorname" />

                    </StackLayout>

`

So what ouput I expect is. If I click collection view item which a name of store, then upon clicking it, a popupmodal will appear then also the name of the store I clicked from collectionview item. Im newbie to this project and tech, pls help me sir. All comment will be appreciated.

output should be like this. enter image description here

Answer 1

According to the picture you provide, I recommend you to use the Xamarin.Forms Shell navigation.

You can change the TapGestureRecognizer_Tapped method to pass the Name of the WRSinfo to the SecondPage.

  async private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
             string WRSinfoName = (e.CurrentSelection.FirstOrDefault() as WRSinfo).Name;
             await Shell.Current.GoToAsync($"SecondPage?name={WRSinfoName}");
        }

Then in the SecondPage.xmal.cs you should use the code [QueryProperty(nameof(Name), "name")] to accept the data.

[QueryProperty(nameof(Name), "name")]
public partial class SecondPage : ContentPage
{
    public string Name
    {
        set
        {
            LoadWRSinfo(value);
        }
    }

    void LoadWRSinfo(string name)
    {
        try
        {
            WRSinfo wRSinfo = WRSinfoData.WRSinfo.FirstOrDefault(a => a.storename== name);
            BindingContext = wRSinfo;
        }
        catch (Exception)
        {
            Console.WriteLine("Failed to load. ");
        }
    }    
}

This is a sample you can refer to. I am not clear about the data structure you use. So you can follow the sample here the Microsoft provided Download the sample.