8. Events Handling in ListView in .Net Maui

do you still remember this map that we mentioned a few videos ago so in the previous video when we cover the basics of list view we covered the view which is the UI and the state which is the data and also how we map the state to the view right which is a basic data binding that we covered in the previous video in this video we are going to cover basic events for list view so that we can actually do something Western let's come to our solution and let's go to the context page when you have a phone and has a list you usually use a finger to tap on item of a list so there are a couple of events that we are interested in right one of them is called item selected so let's actually try to handle that event and see what happens okay so this generated a new event handler which automatically showed up here let's actually set a breakpoint and run our application see whether it's triggered or not okay so I'm going to run the application okay so I'm going to click on one of the item and you can see that it's triggered this breakpoint right so let's continue and if I click on the next item it trigger the breakpoint again so we're going to continue but this time we're going to click on the same item so I clicked on it so I'm going to click down a few times you can see that this breakpoint is not being triggered so what does that mean it means that this event handler item selected is only triggered when item selection has changed right at the beginning there's nothing selected so you click if you click on any item the selection changed from nothing to one of the item right the item that you clicked on and then when you click on something else another item then of course it's going to trigger the event but if you click on the same item it's not going to trigger the event right so if you are going to use this event handler to do things then you have to face this problem so there are a couple of ways to fix this problem one of the ways is to deselect the selected item right inside this event we can just use list contacts dot selected item so we can set it to now so basically you're doing your logic here right your own logic and then at the end you can deselect it okay so let's run the application again and to see the behavior so now if I click on item but you can see that the event is triggered right and if I run the application again you now notice that the items not being selected right because we deselected it again so this event is going to happen over and over again just because we deselected the item one thing we can use to test the application to is to use the built-in display alert right so we can display a message so this is going to be for example test and then the message is test and cancel is let's just say okay right and we run the application again now we don't have the breakpoint but we have a message you can see the message and we click on the OK button the message disappears and I can click on the same item and Trigger the alert let's take a look at another event let's go to the demo file and another one is called item tapped right so let's create a new event handler and then let's go to the code behind again you can see a new event handler is generated so again let's set some breakpoint and then let's run the application again to see the behavior to see whether there are any differences between the two okay so the application runs and then we click on the item you can see the first event is triggered is the item selected and then if we continue then the second event is triggered again right so this item tab is triggered afterwards uh one of the more reliable way to just select item is to actually do the deflection inside here inside the tab event now we're going to do it here and then you handle your logic inside the item selected why is that why is that it's because this item tab event is always happening right whether you're selecting an item or not selecting an item whether you tap on the same items or type on a different item right therefore the this event is triggered way more times than the item selected event right so to handle your logic you don't want to put your logic inside here if user use their fingers to tap on the item like very very quickly this event handler is going to be triggered many many times right where this one is triggered less so therefore we want to do our deselection here and we want to do upper logic here because you don't want your logic to run inside here because it's going to run for many many times right so this is a more reliable way to put over the selection over here and putting our logic inside item selected is better so to give it a test make sure that it actually works we can whatever display alert inside here okay so we're gonna do test and then I'm going to say okay and we're going to run the application again so and click on an item and we see this alert click on OK click on another one we see the alert and you can see that that this selection is happening right nothing is being selected so this is the exact Behavior we are expecting here you will notice there is actually a bug I think it's a bug for item selection right for this item selected event this event is going to be triggered twice if we use we try to deselect right so let's take a look at the behavior I click on this and then we have actually let's disable let's remove the breakpoint so I click on that already and then now I click on the OK button but you see that I clicked um the OK button already but this alert dialog is not disappearing I have to click on the OK button again right so it appears that I click on the same button again but it's not the case it's actually what uh what's actually happening is that this event handler is triggered twice so let's put the breakpoint back again okay and then let's click on any of the item and run it again you see that it happens twice right so now there's actually two dialogues that's why we need to click on twice um I think the logic here is that this is this shouldn't be called item selected it should be called unchanged right item selection changed what is happening is that first time you click on the item the selection the item selected changed from now to something and then because we deselect it here so the item selected is changed from something to no and that triggers the event again right so I think it's a bug but we always have a workaround to solve this problem we can just say if list contacts dot selected is not now and and then we put our logic inside here right so our logic should be inside here we only deal with anything if there is actually a selected item right if there's no select item we don't need to do anything so if we run the application again now you should see that the alert only triggered once so let's run the application okay so let's try that click on this we have this alert click on OK button it disappears right away right so upper work round works so now let's actually put our logic here so what do we want to do we want to when we click on a contact we want to go to that contact right so uh which means that we want to go to the added contact page so for that if you remember our logic is to use shell dot current dot go to async we can directly call it this way or we can use a weight and async and then we can go to the page so for DOT we're going to say add it contact page and then later probably in the next video we're going to talk about how to pass information when we navigate to another page today we're just going to navigate to the page because we mainly want to focus on the event handling of the list view okay so let's click on any of the item and we're looking at the added contact page and cancel button going back click on it again I'm going to add a contact page okay so that's everything I want to cover in this video I'll see you in the next one

Channel: Frank Liu

Views: 4,921

Keywords:

Id: Rk41DyWXn7M

Length: 10min 56sec (656 seconds)

Published: Wed Jan 11 2023