Pass Parameters to Tap Gesture Xamarin Forms

Question

I am trying to pass parameters from a page to another page. These passed parameters will be used to select from an SQL table. The page is built as follows: (The code behind)

private MainRoutePageViewModel mainroutepageviewmodel;
private List<RouteInfo> routeinfo;

Constructor:

 public MainRoutePageViewDetail(MessagDatabase database)
    {
        InitializeComponent();

        BindingContext = mainroutepageviewmodel = new MainRoutePageViewModel(database,Navigation);
        //_listOfProperties = mainroutepageviewmodel.GetLabelInfo();

        ScrollView scrollview = new ScrollView();

        StackLayout mainstack = new StackLayout();
        mainstack.Spacing = 0;
        mainstack.Padding = 0;

        //mainstack.HeightRequest = 2000;

        routeinfo = mainroutepageviewmodel.GetLabelInfo();


        string _routePlacer = "";

        foreach (var i in routeinfo)
        {
            mainstack.Children.Add(NewRouteName(i.RouteName));


            mainstack.Children.Add(BuildNewRoute(i.RouteStops,i));


            _routePlacer = i.RouteName;
        }

        scrollview.Content = mainstack;

        Content = scrollview;


    }// end of constructor

The BuildNewRoute method:

public StackLayout BuildNewRoute(List<string> location, RouteInfo routeinfo)
    {

        StackLayout stackLayout = new StackLayout();

        //stackLayout.HeightRequest = 1000;

        foreach (var i in location) {

            StackLayout stackLayout2 = new StackLayout();
            stackLayout2.HeightRequest = 200;

            Grid grid = new Grid();
            grid.ColumnSpacing = 0;
            grid.RowSpacing = 0;



            grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
            grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(15, GridUnitType.Star) });
            grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
            grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(20, GridUnitType.Star) });
            grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(20, GridUnitType.Star) });
            grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(20, GridUnitType.Star) });
            grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(20, GridUnitType.Star) });

            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(55, GridUnitType.Star) });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(18, GridUnitType.Star) });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(18, GridUnitType.Star) });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(18, GridUnitType.Star) });                
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(40, GridUnitType.Star) });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(30, GridUnitType.Star) });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(10, GridUnitType.Star) });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(15, GridUnitType.Star) });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(5, GridUnitType.Star) });


            TapGestureRecognizer ArrowtapGesture = new TapGestureRecognizer();
            ArrowtapGesture.Tapped += ArrowtapGesture_Tapped;

            // Arrow icon
            Image arrowimage = new Image();
            arrowimage.Source = "Resources/arrow.png";
            arrowimage.VerticalOptions = LayoutOptions.Center;
            arrowimage.HorizontalOptions = LayoutOptions.Center;
            arrowimage.GestureRecognizers.Add(ArrowtapGesture);
            grid.Children.Add(arrowimage,7,6);

            // total weight labels
            Label weightlabel = new Label();
            weightlabel.Text = "Total Weight [kg]: ";
            grid.Children.Add(weightlabel,1,5,3,4);

            // total items labels
            Label itemsLabel = new Label();
            itemsLabel.Text = "Total Items: ";
            grid.Children.Add(itemsLabel, 1, 5, 4, 5);

            // underline labels
            Label firstunderline = new Label();
            Label secondunderline = new Label();

            firstunderline.BackgroundColor = Color.Black;
            secondunderline.BackgroundColor = Color.Black;
            grid.Children.Add(firstunderline,0,9,0,1);
            grid.Children.Add(secondunderline,0,9,2,3);

            // address label
            Label labelLocation = new Label();
            labelLocation.Text = i;
            grid.Children.Add(labelLocation, 0, 3);

            //sequence label
            Label sequencelable = new Label();
            sequencelable.Text = "Sequence: ";
            sequencelable.VerticalTextAlignment = TextAlignment.Center;
            grid.Children.Add(sequencelable, 0, 1);

            // slot label
            Label slotlabel = new Label();
            slotlabel.Text = "ETA/Slot: ";
            slotlabel.VerticalTextAlignment = TextAlignment.Center;
            grid.Children.Add(slotlabel,1,4,1,2);

            // time label
            Label timelabel = new Label();
            timelabel.Text = "Time: ";
            timelabel.VerticalTextAlignment = TextAlignment.Center;
            grid.Children.Add(timelabel, 4, 5,1,2);

            // Status label
            Label statuslabel = new Label();
            statuslabel.Text = "Status: ";
            statuslabel.VerticalTextAlignment = TextAlignment.Center;
            grid.Children.Add(statuslabel, 5, 6,1,2);

            //start button
            Button startbutton = new Button();
            startbutton.Text = "Pending";
            startbutton.BackgroundColor = Color.Gray;
            grid.Children.Add(startbutton,5,8,4,6);

            // Phone book image
            Image bookImage = new Image();
            //bookImage.BackgroundColor = Color.White;
            bookImage.Source = "Resources/phoneWithBook.png";
            bookImage.VerticalOptions = LayoutOptions.Center;
            bookImage.HorizontalOptions = LayoutOptions.Center;
            grid.Children.Add(bookImage,1,2,6,7);


            //Globe image
            Image GlobeImage = new Image();
           // GlobeImage.BackgroundColor = Color.White;
            GlobeImage.Source = "Resources/globe.png";
            GlobeImage.VerticalOptions = LayoutOptions.Center;
            GlobeImage.HorizontalOptions = LayoutOptions.Center;
            grid.Children.Add(GlobeImage, 2, 3, 6, 7);


            stackLayout2.Children.Add(grid);

            stackLayout.Children.Add(stackLayout2);
        }

        return stackLayout;
    }

As you can probably see it loops through a list of collected data and adds grids and labels to a main StackLayout. This is not the issue the page building works fine.

What you can see is the arrow icon image that has a tap gesture attached to it. This tap gesture uses the view model to open the next page.

The tap gesture:

 private async void ArrowtapGesture_Tapped(object sender, EventArgs e)
    {         

        await mainroutepageviewmodel.OpenStopDetail();
    }

And the OpenStopDetail method:

 public async Task OpenStopDetail()
    {
        await Navigation.PushAsync(new StopDetailPageView());

    }

I want to know how to pass parameters from the tap event through to the StopDetailView page. Specifically the text from the sequence label.

Some things I have tried, have been using the casting in the tap event but this seems to be bound to the item that is selected. In other words its giving me access to image properties. Which is no good for my situation.

I cant seem to find a way to access each label property individually to pass as a parameter. Sorry if this isn't clear, it was tough to explain. Let me know if more detail is needed.

Solution 1

The sender of the Tapped event will be the control the gesture recognizer is attached to - in your case, an Image. So you can add your data to one of the Image's properties in order to access it from your event handler.

// assign parameter to ClassId (must be a string)
arrowimage.ClassId = "blah";
arrowimage.GestureRecognizers.Add(ArrowtapGesture);

private async void ArrowtapGesture_Tapped(object sender, EventArgs e)
{         
    // retrieve parameter from sender's ClassId
    var parm = ((Image)sender).ClassId;
    await mainroutepageviewmodel.OpenStopDetail();
}

Solution 2

You should be able to use the CommandParameter of the TapGestureRecognizer.

In XAML:-

<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
                      CommandParameter="Value"/>

e.Parameter will be whatever you set in the CommandParameter.

private async void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)

Edit: It has been pointed out that the above is not the right signature, the param, needs to be EventArgs and cast to TappedEventArgs.

private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
   var param = ((TappedEventArgs)e).Parameter;
}

Solution 3

   <Image.GestureRecognizers>
       <TapGestureRecognizer Tapped="Share_Tapped" CommandParameter="{Binding .}"/>
    </Image.GestureRecognizers>
    

enter code here
    private void Share_Tapped(object sender, TappedEventArgs e)
    {
        var contact = (e.Parameter) as DetailList;      


    }

Result

Comments

[Marco]

not work for me. I edited it like this: private void MyTapped_Tapped(object sender, EventArgs e) { var contact = (((TappedEventArgs)e).Parameter) as string; }

[Edamreed]

The only property of TappedEventArgs is Parameter. When you say "I can't access", what do you mean? Make sure you are not using EventArgs, needs to be TappedEventArgs.

[Mikkel Andersen]

You are absoloutely right - my compiler was arguing that method definition was incorrect when using TappedEventArgs, so I used the EventArgs parameter, and casted to the "TappedEventArgs". Thanks for the proposed solution.

[Edamreed]

Thanks, I'll edit my answer to reflect that change.