Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 77050

How to handle individual ViewCell clicking events once added to a ListView

$
0
0

So I have a ViewCell that displays some labels and two images, and I would like to make the ViewCell clickable and then handle what to do once the ViewCell is clicked. I would like to have one of the images change and then send something to a remote server via HTTP. I have the HTTP code set up, I just need to know where to put it. I have a main StackLayout within the ViewCell and I found that I can add a TapGestureRecognizer to the StackLayout's GestureRecognizers, but then how do I bind/reference the gesture to a function in the ContentPage where the ListView is displayed?

Here is my ContentPage:
public class ItemsPage : ContentPage
{
public string username { get; private set; }

    List<Event> itemList  = new List<Event>();
    ListView itemListView = new ListView();

    StackLayout itemListStack = new StackLayout();

    public ItemsPage(string username)
    {
        this.username   = username;
        BackgroundColor = Color.FromHex("#ececec");
        getItems();

        itemListView.HasUnevenRows = true;
        itemListView.ItemsSource   = eventsList;
        itemListView.ItemTemplate  = new DataTemplate(typeof(Item));

        // Add to Stack
        itemListStack.VerticalOptions = LayoutOptions.FillAndExpand;
        itemListStack.Children.Add(itemListView);

        Content = new StackLayout
        {
            Children = 
            {
                itemListStack,
            }
        };
    }

    // TEST
    private void getItems()
    {
        MyClient client = new MyClient();
        var myList = client.getItems(username);

        if (myList== null)
        {
            // do something else
        }
        else
        {
            foreach (Item item in myList)
            {
                var entry = new Item()
                {
                    userName    = item.userName,
                    description = item.description, // Must check if empty for visibility
                    location    = item.location,
                    time        = item.time,
                    icon        = item.icon
                };
                itemList.Add(entry);
            }
        }
    }

    public void OnItemClicked()
    {
        // here is where I would change an image of the specific ViewCell that was clicked
    }
}

Here is my ViewCell:
public class Item : ViewCell
{
// DECLARATIONS
Image image1 = new Image();
Image image2 = new Image();
StackLayout ItemStack;
... // other objects

    private readonly ItemsPage model;

    public EventsEntry(ItemsPage model)
    {
        this.model = model;
        // ------------------------------ PLACEHOLDERS ----------------------------------
        image1.Source = "image1.png";
        image2.Source = "image2.png";
        ... // other object's placeholders

        // --------------------------------- BINDING ------------------------------------
        image1.SetBinding(Label.TextProperty, "image1");
        image2.SetBinding(Label.TextProperty, "image2");
        ... // other bindings

        // --------------------------------- STYLES -------------------------------------
        ... // objects styling

        // ------------------------------ VISUAL LAYOUT ---------------------------------
        Grid itemGrid = new Grid
        {
            RowDefinitions =
            {
                new RowDefinition { Height = 5 },
                new RowDefinition { Height = 10 },
                new RowDefinition { Height = 10 },
                new RowDefinition { Height = 10 },
                new RowDefinition { Height = 10 },
            },

            ColumnDefinitions = 
            {
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
            },
        };

        itemGrid.RowSpacing    = 0;
        itemGrid.ColumnSpacing = 0;

        itemGrid.Children.Add(image1, 0, 1);
        Grid.SetRowSpan(image1, 4);

        itemGrid.Children.Add(image2, 0, 2);
        Grid.SetRowSpan(image2, 4);

        ... // other objects added to grid

        ItemStack = new StackLayout()
        {
            Orientation = StackOrientation.Vertical,
            Children    =
            {
                itemGrid,
                ... // other objects added to stacklayout
            }
        };
        ItemStack.BackgroundColor = Color.White;

        var itemClick = new TapGestureRecognizer();
        itemClick.Tapped += (s, e) => model.OnItemClicked();
        ItemStack.GestureRecognizers.Add(itemClick);

        this.View = ItemStack;
    }
}

I understand that the gesture can be added within the ViewCell, but how can I change an individual image within a ViewCell when it's clicked once the ContentPage has been populated with multiple ViewCell objects?


Viewing all articles
Browse latest Browse all 77050

Trending Articles