Display data that is on the List Xamarin.Forms

Question

I want to display data that is on the List and also for the email. I have to Vice President and I want open link the of their email respectively to open to an external email platform. However, the code can't seems to work properly it opens only one email for the Vice President and the whole of the label containing it seems to react to it.

This is the screen shot of it.

My Xmal code

<Label Text="Vice-President:" FontSize="18" FontAttributes="Bold" XAlign="Center" TextColor="Black"/>
                <StackLayout x:Name="vpDetails">

                </StackLayout>

My C# Code

foreach (var item in leaderDetail)
        {
            Boolean IsPresident = item.IsPresident;

            if (IsPresident == true)
            {
                lbPresidentName.Text = item.Name;
                btnPresidentEmail.Text = item.Email;

                var tgrPresident = new TapGestureRecognizer();
                tgrPresident.Tapped += (s, e) => Device.OpenUri(new Uri("mailto:" + item.Email));
                btnPresidentEmail.GestureRecognizers.Add(tgrPresident);
            }
            else 
            {
                vpDetails.Children.Add(new Label { Text = item.Name ,FontSize=14, HorizontalOptions = LayoutOptions.Center});

                vpDetails.Children.Add(new Label { Text = item.Email, FontSize=14, HorizontalOptions = LayoutOptions.Center, x:name="lbvPresident1Email"});

                //lbvPresident1Name.Text = item.Name;
                //lbvPresident1Email.Text = item.Email;

                var tgrVPEmail = new TapGestureRecognizer();
                tgrVPEmail.Tapped += (s, e) => Device.OpenUri(new Uri("mailto:" + item.Email));
                lbvPresident1Email.GestureRecognizers.Add(tgrVPEmail);
            }

        }

Answer 1

This is because for multiple vice-presidents, you are just appending the text to the one label. This means that you first add one vice-president, and his Gesture recognizer with his e-mail and the append the text for the other and register another gesture recognizer. Then the tap gesture is recognized for the first one.

Basically what happens after the whole code runs is that the label lbvPresident1Name contains all vice-prezident names and e-mails and has multiple GestureRecognizers (one for each vice-prezident).

To overcome this issue, you should for example create a list of vice-presidents and add each vice-president as an item or add a container and create the labels for each of them on the fly.

To create a ListView in Xamarin.Forms see the documentation - https://developer.xamarin.com/samples/xamarin-forms/WorkingWithListview/

To create a container to which you can add items on the fly from the code, StackLayout component will be the best choice in your scenario. You will just put a StackLayout in place of the current label and then create Labels in the foreach loop and put them in the StackLayout using the Children.Add method.

Answer 2

To solve this problem you have to use the StackLayout as the container. Create a var of a Label and add into the foreach loop.

DetailedClub.xaml

<StackLayout x:Name="vpDetails"></StackLayout>

DetailedClub.xaml.cs

foreach (var item in leaderDetail)
{
    //Create a new label for the Email
    var VpEmail = new Label { Text = item.Email, FontSize = 14, HorizontalOptions = LayoutOptions.Center };

    vpDetails.Children.Add(new Label { Text = item.Name ,FontSize=14, HorizontalOptions = LayoutOptions.Center});

    vpDetails.Children.Add(VpEmail);

    var tgrVPEmail = new TapGestureRecognizer();
    tgrVPEmail.Tapped += (s, e) => Device.OpenUri(new Uri("mailto:" + item.Email));
    VpEmail.GestureRecognizers.Add(tgrVPEmail); 
}