Pizza App .Net MAUI Step by Step Complete App Tutorial from Scratch by Abhay Prince

hey guys I'm back with another video and in this video we are going to build an app using.net Maui which is this Pizza World app this is a pizza app basically and this you can see I have it open on my Android emulator and iPhone simulator so let's see how it looks on iPhone first so this is the main screen and we can get started there we can see this offers search box and then couple of Popular Pizza items after that we can click on any of the pizza and it will navigate us to the main detail page where we can see the image name price description and all these things and then we have this add to cart buttons and view card buttons right now there is no item in the cart so it shows zero zero and if we click on view card it is going to show us a toast message please select the quantity using the plus button so we can do this we can modify the quantity from here and this price is going to be updated in real time so let me add two items of this go back let's tap on some other item and let's say add five items of this as well and then we can go to the cart page so this is the cart page here we can see the added item so this pizza three the price is 1.45 dollar and we have added two quantities of this with totals to 2.9 and the pizza six five items we have these delete icons so that we can delete the individual row and then on the bottom we have this total which sums these totals and then place order button and we also have this clear card button if you want to reset the card clear the all the items from the card we can use this clear card button so if we do clear card it will ask for us confirmation if we really want to clear the card and if we press no then nothing will happen as expected and if we press yes then it is going to clear the cart and we'll be notified using that message toast message card clear now after this we can go back like this or we can go back from here as okay then we have this view all where we are going to view all the pizza items we have right now we can search from here so search and view all both of these uh takes us to the same page the only difference is if we come from search then this search box is automatically focused and if we come from the view all then the search box is not focused by default we can click on it and then we can focus it so we can do this we can search for any pizza I have added a delay so that we can show that that activity indicator let's search for this so we'll have two items I guess Visa one and Pisa 10 yes so like this we can reset this and it is going to clear and show us all the piece items we have okay now again let's try to add couple of items like this okay now let's go to card so we have these four pieces added four three four four quantities now we can you see the total price is 38.26 dollar we can let's say remove this piece of five so we can remove using this then we'll have this snack bar pizza five removed from cart and we can undo this if it was accidental then we can simply undo it let me show you with this piece of food do this and if we undo it this is going to come back in this list so for helping from accidental deletes this is the way then we have this place order we can place order and then we can see this nice animation order placed and then we can go to the home screen so this is how it looks on iPhone let's see how it looks on Android we are going to use adaptive AI there will be a couple of uh conditions and differences between these two okay get started we have the same screen we can see the pizza items we can click on the search here it is going to navigate us to the search for pizza page where we can the search box this is uh focused already so we can start typing and start searching for pizza we can see the similar thing and then we can go to the detail page if we click on view cart it is going to show us the same message we need to add items to the cart we can add the items if then we'll go to view card then we can see this on the cart let's come back and reset this filter we can see all the pizza items let's go back from here if you go to view all then it is going to get us on the same page the title is different this time it is all items and the search box is not focused already we can click on it and it will be focused so let's add okay we already added Pizza one let's say pizza two add three quantities of this one piece of four let's one quantity we have these items we can delete remove from cart we can undo the same way and you notice this card right now it will be 41.6 dollar and if we remove any of this so this quantity is also updated okay then comes this clear card we can clear the cart and it will ask for confirmation and we can simply click and the card cleared okay now let's again add items of this come here and we can place the order and we will have the same animation and then we can go to the home screen and we are back here so this is the app we are going to build in this video from scratch to end okay let's get started okay so I'm in visual studio now vs4 Mac I have this project and what I did I simply uh downloaded some pizza images and these icons from the internet and I have pasted these in our resources and images folder that's all I did and if you want to see from where I got this so for icons I used box icons.com and from here you can simply search for any of the icon and then you can simply click on it and then you have this downloadable PNG and SVG code I am using PNG for these images so you can use SVG if you want so both are okay and for the pizza images what I used I used flat icon so flat icon.com you can go to this and here you can search for pizza and you see you saw this image this image this image this image all these images I downloaded 4rp sub from this flat icon so this is the source of these okay now first thing let's add the packages we are going to need so the packages we will need those are the same two packages Community toolkit Maui and Community toolkit mvvm Community toolkit Maui let's do this community toolkit only so that it will list out both Community toolkit.mvbm let's add this except go again [Music] to the manage new get packages Community toolkit mvvm we already installed then Community toolkit dot Maui add this accept and we are good for this we just need to add this use Community use Maui Community toolkits so let me copy this go to our Maui program and we can use this and we should be good now fine so we are good next thing what we are going to do we will simply clean that solution up so what I mean is we are going to use only the Android and iOS so let's remove this Mac tizen in Windows these three we can simply delete these delete and delete Windows cool now go to the Cs Pros file and from here we'll remove all others we'll simply have Android and iOS let's remove Mac Catalyst from here then this is for Windows so let's remove this target Frameworks all together and then we'll check if we have it somewhere else as well so yes we have this Mac Catalyst delete this first iOS then Android then remove this windows windows and tizen okay and then we have this Net 7 so looks like cleaning is done fine so let's build this and try to open it in my my phone so it is complaining about some things some unusual file names maybe getting something from cash let me clean and then rebuild and still we have these let me check from where we are getting these okay so I still have this issue I thought somehow it is not taking the image names as I have that pizza 10 Pizza 1 Pizza 2 so I renamed all these I appended IMG to these but still not working then I had to search for it and then I found out the issue I had this issue previously as well so what is happening right now uh Maui tries to get all these images and try to resize these as per the platform we are going to run these images on but on Mac it somehow creates that dot DS store files so if you see here this dot DS store which is a hidden file which Mac creates but we cannot see this file in our project I tried to see in finder I could not find this that's why I was not able to figure out but now we have this dot DS store file and we can delete this and after deleting this we can resolve this issue so I was reading one stack Overflow answer so I found out if we delete this file and after that if we made some change any in any of the project file any of the image from the finder it will again going to create the dot DS store file so the correct approach should be to go to the project file edit project file and here we will have the images um you see this Maui image include resources images then slash Then star so instead of doing this star we should use uh we need to skip that dot DS store file basically so what we will do we know we have PNG we have SVG so we what we can do we can say images then after this slash we'll say star Dot SVG then let me copy this file and after this we'll do same for PNG and if we have some other extensions as well for example maybe you have jpg then you can include that as well I'm not going to have those so I'm going to skip this like this save all and let me rebuild it hopefully this should work building okay so it came and now we can see this so everything looks fine okay now we'll continue working first thing we'll create folder in our project or let's create all the folders which we are going to need so we will need Pages folder where we'll have all our pages then we'll have our models folder then we'll have our view models fine in Pages folder first thing let's move this main page to this Pages folder main page let's check the namespace fix this name space so main page this is pizza dot pisdom dot we are going to add these pages and then we need to change this in main page dot Maui uh main based or sample as well so dot Pages dot main page like this save all and go to app shell in app shell it should be having this local name space which points to the main piece of Maui but right now we don't have anything in local so we rename it to pages and we'll set after this Pizza Maui dot Pages like this and then we'll have this Pages like this let me rerun for now so that we can it will be in sync and then we'll Design This main page okay app is here now let's go to main page we'll design our main page so first thing we don't need this header this uh title Network for that let's do shell dot navbar is visible we'll make it false fine after this we will have the background color of the page which is going to be dark golden rod this is the this dark Golden Road Golden Road peeled pale Golden Roll we are going to use these colors in this app fine so the this is also fine now next thing we don't need this complete design let's remove everything hmm fine let me pull the or app from the in the Android emulator so that we can see what we are building and we can take inspiration from that so this is the thing this is the page we are working right now so here we are going to use a grid and with this grid first item as this head Pizza World second row as this icon this image and the third row we will have a vertical stack layout where we'll have this this heading this description and this button fine so let's start we'll have a grid with row definitions as Auto star and auto so whatever space the header takes and whatever space the the foot or the text and description and button takes will provide R2 and then the second image section we will have a star so whatever space is there just to use that so first we'll have our label and we'll say the text so before text let's use grid dot row 0 to be explicit then we'll say text which is going to be our pizza world like this let's see we can see this text here Pizza world after this what we are going to do first we'll set a font size of some bigger font so let's say 50 and then we'll set horizontal options at Center and then we'll make it bold so font attributes bold fine after this let's have some padding on this grid so we'll have padding 15 and 25 so 15 from left hand right 25 from top and bottom and we have this label after this label we are going to use our image image grid dot Row one and the source we have couple of images but the image which I like the most that is Visa one IMG dot PNG we can see this image so this looks good so the choice the selection of images makes our app look good so yeah image after this what we'll do we'll simply set height and width to this so we'll say height request let's have it as 250 and then width request as 250 then let's have vertical and horizontal options at Center fine after this the third section we are going to use a vertical stack layout with grid dot row 2 and on this we'll have a spacing of 10 and inside this we will have these sections first label then second label then this button kind of structure okay so for this first let's have a label here with the text that I just randomly picked this test text of Italian oh please uh like this can we see this grid dot row label text we are not saying it we should see it save let me read an app and we have a error counter button does not exist we removed this but we didn't clean up the Cs page so let's remove this remove this on counterclick and return okay here's the text now what we'll do let's first increase the font size let's make it 40 fine and then font attributes as bold fine after this we'll have another label for that description so let's have some random description fill the test my watering these are from its origin country something like this we can see this let's increase the font size of this as well we'll say font size 18 okay and we'll use LINE height let's say line height 1.5 now it is more 1.2 okay 1.2 is fine after this we need to have the button like structure but that was not button we need to have text and this icon so for this what we are going to use we will use one border and then we'll have these two items and on that border we can have our tab gesture recognizer which will navigate us to the next page fine so for this let's have a border here border with stroke shape as round rectangle round rectangle and we'll have it 25 and then in after this round rectangle let's have first we'll say stroke thickness we don't need any border around this border which is the stroke thickness then the background color we will use Golden Rod color this one inside this let's have our label text let's say get started so that we can see something like this yeah okay after this let's have some height here some fixed height so we'll have fixed height of 50 fine now in this we will have a horizontal stack layout because we need to have one text and one icon in this first thing we'll have this text and the second thing we are going to have an image which is our icon basically so for this we have that image which is called right arrow and on this first thing we'll set vertical option Center on this and label both so that these should be vertically centered vertical options at Center and on this image after this we'll set a height h IDE request as 30. save it and let's see here now we can see this now let's move this horizontal stack layout to the center here we'll say horizontal options at Center fine after this let's have vertical options as Center as well vertical options at Center and then we'll have some spacing of let's say 10 looks nice yeah on this label let's increase the font size we'll say font size as 18. fine so now it looks good and we can increase the spacing between these so on this vertical stack layout let's change the spacing to 15. fine it looks very good yeah okay now next thing we need to work on this get started button so we'll tap on this get started and it will navigate us to the next page for that what we are going to use on this border on this border we'll use border dot gesture recognizers here we'll use a tab gesture recognizer with tabbed event let's go to this tabbed event before that let me save all we are on here we are here we'll say async and then we'll simply navigate to Shell dot current dot go to async will move to our main home page so that does not exist yet so first let's create that page solution pages right click add new file dot net maui.net my content page with xaml and here we'll say home page create and we are good now next thing first let's save all and from main page dot sample from here let's move to the home page so we'll use shell navigation slash then we'll say name of home page fine now it will not work because we are using this route but we have not registered this home page so we have two approaches either we can have it directly in app shell like this because this is the main page we can have it like this so here we'll say home page and then this route this should match the main okay we don't have this title here so we can simply remove it or we can select it like this okay save if we are not using this then we need to go to app shell Dot xml.cs here and here we need to add it to the routing.register route which we'll do for other pages fine right now let me rerun the app we should be navigated to the home page when we click on the get started button okay app is loading and it is here and yes there is this issue in the oh I clicked on it now if I'll press back it will not go to the back but you can see we can move navigate to this page if you remember we saw that uh that label was not completely visible so we it was getting hidden getting clipped by its border so this is the issue which I found on iPhone in such cases we need to have some padding for the labels you see this G is cutting out so what we can do we can go to our main page Dot saml and on this horizontal stack layout let's have some padding and the padding is going to be 0.5 and we are good see if everything looks fine we can tap on this get started it will navigate us to the this main home page now we'll work on this home page first thing we'll do change this home page to the name of our app which is pizza world like this the next thing we need to change this the color of this background so for this what we'll do uh we'll do this on this app shell so that it will be applied throughout the app will say shell dot background color and we see we will use dark Golden Road this color like this cool now on this home page we'll start designing our app so first let's remove everything we'll have a scroll view here inside the scroll view we'll have a vertical stack layout in this vertical stack layout so right now we are designing this offer section [Music] um this one so this is going to be in Border so in vertical stack layout we'll have a border with stroke shape has round rectangle rectangle of radius 10 then will not use stroke thickness so we'll set it to zero then the background color we will use our Golden Road color and then vertical options and start we need to be uh we need this at the very beginning and then let's have some padding of 15. like this we have this thing inside this border we will have a grid so if you if I show you this is a grid with two columns First Column with this best of her this description and this button and the second column as this image okay so for this let's have this grid here and we'll set the column definitions first one star and the second one we are going to set uh fixed width of 150 which is for that image and the First Column whatever remaining width is there it can take the take of that space okay inside this for the first section we'll have a vertical stack layout grade dot column zero like this and for the second section that second uh [Music] that image messages image grid dot row sorry not row grid dot column and we'll use the first column and the source of this is going to be r Pisa three image save it let's see if we can see something yes we can see this now next thing on this image we'll set the height and width that 150 we have 150 right and width 150 like this cool now after this what we'll do [Music] okay so we should have two rows one row for this best of a grab this description and the second row with get it now so two row two columns but this image this will be in column number one which is second column basically and it will span to both the rows before that first let's modify this grid so we'll have our row definitions row definitions and this will be star and auto the second row whatever space it needs it will grab that the content fits within that space and the first row whatever space is remaining it will take up that space so this vertical stack layout it will be let me modify this it will be grid dot row 0 and column 0 and this one this image it will be it will span to both the rows so we'll say row span 2 and then column one if we save it we will not see any change in the UI but in this vertical stack layout we'll start adding our items so the items will have two labels first label the best offer that heading best offer like this and then the second label we will have that description so grab this amazing offer before it expires like this okay now on this vertical stack layout is best offer let's have a bigger font size so we'll use font size 25 cool then we'll use Font attributes as bold okay after this we'll say vertical options at Center which is fine now in this vertical stack layout we will add a spacing of let's say 10. like this cool after this we'll have one button which was that get it now so button which will be in Grid dot Row one and column 0 to create dot column zero and text is going to be get it now and we can see this button fine now we'll design this button so first we'll have the background color which we need and in this gate in this case we need this lighter color okay if we set this we need to set the different text color so we'll set text color black fine after this we'll set font attributes as bold fine and now we'll set a higher Corner radius which is 22 in this case so I'm using this 22 from where it came the default height this button uses in dotted mode that is 44 and that we can verify in our resources and tiles and style Dot XML file here if you look for button we have the minimum height request and minimum width request is 44. so if the height is 44 and if we set the current radius to 22 which is 50 of the height so we can see this perfectly rounded corners so for this we are doing this thing okay where would we we were on our home page cool now on home page everything looks fine right just one thing horizontal options will set its Center this get it now button and we can increase the horizontal padding before that what we'll do let's have it somewhat 50 0 like this it looks nice okay now we need some uh spacing on this page so when we say this page the complete page is inside this scroll view then vertical stack layout so let's save one vertical stack layout first okay this will need next so on this page directly we can have a padding of let's say 15. fine it is coming nice cool now next thing is we need to work on the popular pizza items now we need those items we need to have those items so for that I am going to stop the app and we'll work on our model and view models now save everything fine in our models folder let me create a new file new class which will be our pizza model main Pizza model we will have couple of properties here before that this is going to be used reactively so we what we'll do we'll add this as observable so we'll say observable object which will come from Community toolkit and vbm component model observable object fine now we will have properties here first property we need to have a name for this the name of the Visa then second required property will have image of the Visa then there is going to be third property which is going to be of type double or we could use decimal we'll use price here and after price we are going to have one card quantity which will use to uh add the item to add this feature to the card so how many pieces of this particular Pizza the quantity of this pizza basically so that is going to be changed right if we click on the plus button minus button the prop this value is going to be changed so we will need it as an observable property so what we'll do we'll use private hint and card quantity and we'll decorate it with observable property fine after this we will have one more property which will be of type double and this is going to be amount and this amount will be this price times card quantity so this is going to be in computer Computing property so we'll use card quantity times price like this now whenever this card quantity is changing we should change this amount as well right because right now it is uh one time only but whenever this card quantity is changing we need to change it so what we can do after observable property we can add one more attribute to this which will be notified property changed 4. and here we'll use our amount property so here we are saying observable property it is going to notify this card quantity value and then we said that whenever you are notifying this whenever the value of this card quantity is changing please notify the changing for amount as well so this amount should recalculate at that time this is what it means so we are good and apart from this we will need one method in this which will be a clone method so that we can grab a copy of this this will use for view cart page basically so here we can use the member wise clone as Pizza this item so our models is done after this let's go to our view models and let's create one more add one more folder where we'll have a new folder we'll have our services there and in this Services we will add one class which is service like this so that in this class we can have the data on the initial data for our Visa okay so here what we can have we can simply have a static collection so we'll say private read only read only it read only static is a which will come from models namespace underscore pizzas and here we'll have a new list of pizza and then we can fill out the picture so I already have a list let me copy it I have this list Pizza one two three some with some random prices price 5.1 2.5 like this so I have the list of 10 pages I have 10 pizza images that's why I'm using this after this we'll add couple of methods in here in this pizza service first let me collapse is fine after this what we'll do we'll use public enumerable Pizza we'll say get all pizzas and from here we can directly return our collection like this then we'll have one more method for our popular pieces please foreign popular pieces and here we can expect a count print count with default value at six and here we can simply grab all the pizzas then we can apply order by order by so we'll Shuffle these right now we don't have any popular pieces logic so we will simply have a random pizza so we can say p goes to guid dot new guid like this and from here we are going to take this count which is 6 in this case fine after this we will have one more method so you remember we have search functionality so we will search our pieces from there also we'll return a list of pizzas so here we'll say let's say get pizzas or search page let's say get pizzas only and here we'll have a search term like this and now we will check if this search term is null or empty so we'll say string dot is null or let's say white space search term not such a bar this is going to be such term search term okay I made a type of search term if this is null or empty we'll simply return the complete collection if that's not the case then we'll apply the search which is going to be PJs dot where p goes to P Dot name or we can say yeah P dot name dot equals search term search term and we will make this as case insensitive search so we'll say string comparison dot ordinal ignore case and we should be good from here but now there is one problem it will search for Direct the complete name but we need it to be uh search with any substring as well so what we can do we can use the contains method and in contains we have is pair value string value fine we will use the same signature like this like this okay so looks like our pizza service is done we can remove this thing fine now we'll work on our home page view model save everything cool now let's go to view models in view model we will add a new class and we'll call it home view model like this okay and on this home view model we'll have first thing we need to have the list of pizzas that popular pizza basically so for that first thing we need to inject our pizza service please which will come from the this services namespace so here we'll say pizza service is a service let me copy this private private read only Visa service underscore Visa service and here we'll have this piece of service equals this piece of service change the service user service point and in here we are going to have one observable collection prop service collections so I don't know what is the command what is the shortcut to open the suggestions here if you know please let me know in the comment for this vs4 Mac for Windows Visual Studio I know we can press control dot control period Then it opens close but in Mac I don't know what is it if you know please let me know in the comments okay observable collection of type Visa and this will come from our model's name space so we can say using Visa Maui dot models like this and we can call these popular pizzas or pizzas it's up to us let's call it pizzas only and we'll have first save everything like this okay now let's have the default value for this so we'll say pizzas equals new observable collection and then we can get the popular pizzas so get popular pizzas like this like this so now we have visions and these pieces will be filled in this this observable collection okay now let's go to our page and try to implement this but before that we need to register these services so go to Maui program.cs and here we are going to register our services we can register directly or we can create a new method here where we'll register these to make it clean basically say we'll have a public static class or we can simply have direct method where we'll pass our services so we'll say public strategy or not public we can have it private as well so private static I mostly use the extensions method to this but because this is a small project so I'm not going to use separate file and subject extensions here we'll say private static I service collection let's say as ADD Visa services like this and here we will expect my service collection services like this and now we are going to register before that let me return the services back public static I service collection yeah it looks nice what is there oh this okay now we'll say Services dot add first we need to register our pizza service so please uh service we are registering it Visa service right okay and suggestions pager service find the same way we will register our view models as well and then we need to register Pages as well where we are going to use this we need to use register those as well so like this okay now we have this add Singleton Pizza service like this after this we'll register okay we can register use this add Singleton with shell route in this we can have a view and view model so view is going to be home page view model is going to be home view model and then it expects a parameter where we need to define the route for this so here we'll say hope page route like this like this what is the issue it is what is the red Singleton we shall route okay this thing reference to instance up to the operation is complete the based on my home view model cannot be used as a type parameter right and why it can't use it my service collection strings about Factory there is no implicit reference for oh home view model we missed this is going to be of type observable object we need to have this and for this this needs to be partial saved and now we are here okay now what it is doing it is going to register these two home page home view model Singleton and with this it is going to create a shell route for home page as well so doing this what we can do we can simply remove this home page from here we don't need it now because this is going to be registered from here only cool so we can save everything now save all and now we can start designing our home page go to home page but first let me inject the our home view model on this page so that we will use the properties from there so first thing private read only okay let's do one thing let's create a new file here add new class for Global using global usings create remove everything and let's go to let's say home page view model from here let me copy this this everything copy go to the global usings paste it and add Global to it global usings global global and then Global today's okay what is the issue here no issue Services models let me copy this we'll say view models view model Services models and let's add pages as well fine save everything and homepage okay private read only and now here we'll have our home view model home view model home view model let's use this in its Constructor we are injecting this and in this we'll say home view model equals home view model and then we'll set The Binding context for this page binding context to this home page view model like this and now we are good uh tables let's run it and then we'll work on the design in runtime where is here fine app is here get started and we have some error and what this error is let me run it again okay this is coming up get started and we have some error let's see what the error is oh sorry not error we will find that in output terminal call stack application output simulator click on it error continue stopped let's see the application output and here we will get that actual error and which is native crash reporting unable to figure out route for this home page okay slash slash homepage parameter URI and when we say This Small Program name of home page so it is not registering it look I never used it at single time with shell route but looks like maybe maybe I'm missing something so if you guys know what am I missing please do let me know in the comment for now we'll fall back to the traditional approach we'll say at Singleton home view model and add Singleton oh no no no no my bad let's see if it works we created this method but we are not using this method Right add Pizza services so here we'll call this add Visa services will pass Builder dot services to this like this fine I hope this works do let me know in the comment if you use this at single time with shell route and transient with shell route this method I have never used it okay app is coming up let's see fingers crossed okay get started and we still have errors um this time let's see what was the error this time [Music] Global routes correct currently cannot be on the only page in the stack absolute routing okay let's do one thing go to app shell and uncomment this one cancel like this and let's stop everything save everything and run it again foreign let's see and yes it worked fine so we are here next thing we will work on that search box here so let's go to our home page and for the search box what we are going to use we will use uh a UI to display the search but it will not behave as such we will use this as a link to and to the next page where we will actually Implement our search so in dot net Maui we have search bar and then we have search shell search Handler but the problem with cell search handle it works on Android but does not work on uh iOS iPhone so there is already open issues on the GitHub for this thing so hopefully they'll fix it in dot net 8. I'm not sure so we are not going to use shell search Handler we are going to use search bar here but that also will use on the the page where we have all our pieces listed so if you remember this app the search here this is simply an anchor if you click on it if we tap on it it opens the next page where we have the search bar this is the search bar control okay so we'll design this thing here so for this this is again is important so after this Border in this vertical stack layout we will have one more border and on this border we'll say stroke shape round rectangle round rectangle and we'll have it let's say 20. this time we need stroke thickness which we'll use of let's say two let's see then we will set the stroke color which will be the direct stroke property stroke like this and here we'll use our golden rod color golden dot colors fine and inside this border we'll have one label for the search so let's add that label text will be search here like this and we can see something now fine after this let's design this text color of this text box this is going to be goldenrode only and the font size are you good with this font size or maybe we can increase this a bit 15 and on this label let's have some padding 10 or 15. fine or 40. okay and then let's increase this round rectangle to 22 fine what if we remove this we will remove the default font size fine now we need to have some spacing between these two and these are the direct children of this vertical stack layout so we can have a spacing of let's say 10 fine we have this search here now and when we tap on the search here it should navigate us to the all pizzas page which will implement after some time but for now we are good with this after this we will work on this popular items this section basically so popular items view all and then the list of these pieces cool so after this border we have good let's clean this up fine now we'll have a grid to display these two labels so we'll use grid column definitions as half and half let's say first we'll have a label with text popular items like this good this is going to be our column 0 grade dot column zero and the next item we'll use label create dot column one the text is going to be view all like this cool now this view all we need to move this view all to the right so what we'll do we'll say horizontal options as end okay and then vertical options let's use end only and for this one as well vertical options as n and horizontal options is start so we are good with these popular items this popular items we will make it bold and bigger so font size let's say 20 and font attributes as bold save for this view all We'll add underline to this where we can use our text decorations we have this underlines save everything now fine we need to have some we are going to have one spacing more spacing between these grid and this border so we can use the Box View with the height of let's say 15 like this and the color will use the transparent so we don't want any colors okay fine popular items we all are now we are here where we need to display our popular pieces so this list collection so we will we can use we are going to use flex layout for this in vertical spec layout after this let's start working on this and for this view all uh tapping on this it will navigate us to the new page where we can see list of all the pages that page we'll Implement after that we'll work on the search and view all functionality fine so in here for displaying our popular items we'll use a flax layout with bindable layout basically for this bindable layout dot items source and the source we are going to get it from our binding and we already set our binding context so we can set a data type here which will come from The View models so for this first let me add the namespace for this xmlns let's say VM for view models and here we can say view models from our thing and let's have one for for models because we need to use models as well so here we'll say models which will come from R nodes fine and this data type this is going to be home view model phone view model like this now we can have our intellisense so when we say this binding item Source binding now we can share pieces let me make it smaller okay like this move this to the value and like this fine okay we have our binding pieces like this now we can start designing our layout so for this we'll use binding layout dot item template which will be a data template of Type X data type to the type of each item is going to be this pizza that model right and in this data template now we can work first let's have a border and in this border we will use stroke shape as round rectangle rectangle of radius 10 stroke thickness we don't need it stroke thickness 0 background color we'll use pale Golden Rod color and after this we'll have a padding of zero and margin of 2. inside this we will have a grid layout with four rows one two three and four first row like this image second the name of the pizza third with this price in ratings and fourth this View mode button so in here let me create a grid with row definitions for image we'll use a fix height of 150 apart from this let's use whatever space they can take up like this okay and on this let's have some spacing as well between the rows rows so row spacing of five fine now we are here first thing we will add our image but no battery okay Great Dot row zero The Source this is going to be at image Pizza dot image basically and let's see how it looks okay we can see it where are other items we can't see those put those right now those will be hidden on the right side so what we'll do on this Flex layout we will use the wrap property to wrap now we can see here all our pieces but we need all these items to take up 50 percent of the uh with the layout so for that what we can do for this we can come to this border the direct child of this this Flex layout and here Will say that use flex layout dot basis as 50 percent so you should use 50 of the width that's okay it looks nice not nice but it will look nice when we add other properties as well fine so on this image now we set this after this what we are going to do we are going to set our height and width right we know we are going to use 150 the width we'll use it as 130. like this now it looks nice okay we can not see that rounded rack rounded values because we made a type of rounded rectangle and now we can say it fine it looks great okay now the next row after image the next row is going to be for the name of the pizza so here we'll say label grid dot Row one the text is going to be binding name the name of the pizza like this save it and now we can see this we need to move it to the center so let's move it so horizontal options at Center fine after this it is looking very ugly on the smaller screen right the code not the actual layout let's use the bigger one now it looks fine but it takes up the space but what can we do okay so this thing now we will increase the font size for this we can use our font size of let's say 20. fine after this we'll use the rating and price so for that we are going to use one uh grid with two columns if you remember grade with two columns one column for this price and the second column for this rating so here we'll use one grade with column definition but before that let's say create dot row we know 0 1 this is the row number two and for this columns definition we'll have the both as fifty percent fifty percent and in this we can have the first row label for the column number zero and here we'll have the text which is going to be the price so we will get it from The Binding price like this like this we can see this but we need to format this so we'll use stream format string format and we'll use the dollar hardcoded dollar and here we'll use zero to get the value and we can use this if to make it two decimal places like this fine it looks okay and now on this label what else we can do we can make it bold font attributes fold after that second label but that is not going to be a label because we have two things we have a text which that four star three star two star and then one image for that star that icon so for that we'll use a horizontal stack layout and it is going to be the column number one in its parent and on this horizontal stack layout let's add the label and image so right now I'm using the hard coded rating so let's say label text 4 so this is 4 star and for Star we'll use image we already have an icon for the star image source which is star only and we can set the height and with smaller height and width for this so height and width as 15 like this and we save we can see this let's have some spacing between these two so this horizontal stack layout first thing uh horizontal stack horizontal options we will move it to the very end of the row and then we'll have spacing between these star and this let's say F2 okay this looks nice cool and after that let's have vertical options as Center for both this one as well as the label the the price actually so vertical options are Center so these are Center aligned basically cool now we can see everything it looks nice two things first we need to change the color of this image and then second thing we need to have some spacing between these two these uh price and the rating these are touching the corners we need to have some spacing from the corner we can have the main margin at the main Border level we add zero make it 10. okay cool now we will have that button for that okay but before that let me uh change the color of this image so for that we will use the community toolkit Maui to change this and that is called icon tint color Behavior you can search it for the for this how can we use this I know how to use it first thing we need to have the namespace xmlns and we can have the name space which will be that Maui 2022 like this toolkit and then we can use this toolkit to add the eye content color behavior on this image so let me have it here move it like this and on this image what we'll do we'll say image dot behaviors and here we will use eye content color Behavior and here we can have a property of this tint color so for this tin tint color we'll use stock Golden Rod like this and we should be good now and we can see this color cool after this let's move to the button after this grid in the main grid will have a button which will be grid dot row 2. 0123 and the text we are going to let's say have View mode view more we have this button fine now we'll design this button so first thing we will have a background color background color and for this we'll use gold color fine then we'll use text color as black okay after this we'll use our Corner radius H22 so that it makes the perfect round rounded corners after that let's say font attributes as bold and vertical options has the very end what is happening very vertical options so these are here vertical options like this enter okay vertical options as end and horizontal options at Center like this cool we have this so to make it look good we'll add padding let's have 22 from left and right Zero from top and bottom and we are good let's have 25 fine we can see this View mode we can see all this we can see this item so I think it is coming up pretty good cool next thing we are going to work on the detail page for this or maybe before that let's work on the the all items in this search this page okay so right now I'm going to have a break and you can also take a break because it's been one and half hour I'll take a break and I'll be back soon okay till the time you can drop me some comments so the comments actually those help me to reach more so that my videos bridge to the more people and I get more views basically okay hey so I am back now let's start working and first thing what we'll do we'll create a page in our Pages folder we will create a new file and this is going to be Dot and Maui Dot and Mario content page and we'll call it all Pizza page all pages page fine and in order to connect with data and all those operations we'll create a new view model for this so in view models I'm going to create a new file new class file basically and this will be all Pizza view model like this let me minimize this one fine we are here and we will use mvbm so what I'm going to do I will simply make it partial and they inherit it from observable object we are good now in this first thing we need to have a collection of pizzas so all pizzas basically so for that we'll use observable collection of Thai Pizza and let's call it features like this after this on this page uh we are going to have because this same page we'll use for searching so we will have a flag for which we'll uh get to know that if we came from a search box or by clicking on the view all section right so if I open it so we can go to that all business Base by clicking on this search here this section or we can click on this view all then also we move to the same page right so we need to have some flag for this one what we will do we'll simply have private pool and let's say from search and this is going to be an observable property like this and we need to get this underscore from search from the previous page so we'll get it from the shell navigations query string basically so for this what we can do we can decorate our uh view model with this query property attribute and here we can add the string name and string query ID this name is the name of the property within this class so this is going to be from search this one and then second parameter this is query ID so this is the name of this value in the query string when we are passing it from previous page to this page using the cell navigation but more in most of the cases we use the same value so in this case also I am going to use the same value from search and now we have this from search and when we will come from search we will have the search functionality so for that we'll have one flag so that we can show that activity indicator that we are searching for the pizzas so we'll have one more flag here we will say searching and this is also going to be an observable property like this cool now we need to implement the search functionality so for that I'll create a commander private tracing task search Pisa and here we will have our search term search term like this and in this first thing we will do we'll clear out our pizzas collection so pizzas dot clear after that we will set the searching to true that we started searching and then we will patch the data so we'll say where pizzas and now we need to touch these pieces from our service in our pizza service we already have these get pizzas with search term let's rename this get pizzas by bullets rename it to search user search features save go back and here we need to inject the service so we'll create Constructor here and we'll have it private read-only read only Visa service underscore Pizza service and then we'll inject this in our view model like this let me rename it with underscores so this underscore equals Pizza service without underscore like this and then in here we can say pizza service dot search features and we can pass this search term directly there so now we have these pieces now we can add these pieces to this pieces observable collection so let's do one thing let's use this thing directly in our four each so we'll use a four inch here we'll save our pizza in this and then we'll add these items to our pizzas Observer collection visas dot add this pizza like this so search is done and after fetching everything we'll set search into false like this cool and now we will add this we will add relay command attribute to this we recommend this will come from Community toolkit my input let me cut this and add it to our global usings global usings in here global using save go back and we should be good now fine we are good so search pizzas is here after this when we are coming to this page we will patch all pizzas and we'll add this to this pizza's collection so we can say get all pizzas like this so we initialized pizza's observable collection with all the pizzas then we have Chrome search indicator then we have searching property then we have this search Pages command so this is all we need to do in this view model right now next thing we created that page right so what we'll do we will register this view model and the page in our Maui program here we'll say services dot add transient with shell route and here first page so that is all pizzas page and view model is all Pizza view model and then route we'll use it as name of all Pizza page like this and now we can use this so in order to navigate to this page uh we will add one command in our home view model in here so we'll say private tracing task go to all pizzas page like this and in here we can expect a parameter which will say are we coming from search if that's the case we'll use the first one and we can have a default value for this which will say let's say false and in here what we are going to do we will simply use a weight shell dot current dot go to async go to async first we need to have the route name and that will be name of all pieces page and then second parameter we can have the animate so we will use animate to true we true then comes the parameters and now parameters we need to pass our parameter which is the from search so for this we'll create our parameters here this should be a dictionary of a string as a key and object as values so in this we will have one property one item to this this dictionary new [Music] in this the key we will use name of all Pizza view model Dot we have from search this is the name of the key so this name should match with the this first value sorry the second value this is the query ID now the value for this we will use this from such directly like this and we have created our parameters then we can pass this parameter directly to this go to async Method fine and we will add relay command to this save everything and now we are good we can get rid of all these usings save everything and we are good now before running the app let me inject this all page all piece of view model to all pizzas page so that we can we will directly start designing the page so here let me add this all feature view model copy foreign [Music] like this we will have this thing equals this and then we will set The Binding context of this page binding context equals this all pages view model like this save everything and now let's run it fine I'm running it this is the old app let it pick up the new one yes it is picking up now okay so app is here get started we are here let's now bind these two things per share and view all so let's go to our home page dot XML homepage.saml like this [Music] um let me set it first okay okay now first let's search for this search here this section where is it so this will be after this search here this section so here what we'll do we'll use border dot gesture recognizers and here we'll use tab gesture recognizer and on this tab just a recognizer we can have our Command this command we are going to get it from the from our view model so from binding and we can say go to all Pizza space command like this but this requires a parameter for from search so we will set command parameter and now we have a situation here we need to pass this true and false if we pass it directly like this it is going to consider a touch string and our app is going to break so we need to tell it that this is not a string this is actually a Boolean value for that what we can say we can tell the type that this is of type Boolean and what is the value the value is true so command is this and command parameter is this what happened why it sits showing like this for sure let me rerun okay sometimes it shows that uh that red border that error but there is no error okay it is opening let's say get started and when we tap on search we move to all Pizza space we can go back and it is working now for view all we'll do the similar thing let me copy this tab just a recognizer and then we have this view all this label so on this label we'll say label dot same gesture recognizer and here again we'll have this tab gesture recognizer and now we can skip either we can set it false or we already set the default value to false in our view model right if you remember we said let me first close couple of files close this close this close this this one we set the where was it from search no we didn't set it right no not here inner home view model from search false we set the default value as false right so we can simply skip this parameter in here either we can set it false if we want or we can skip it all together like this so it will take the default value and let me re-run it so now it should uh navigate to that page from both of these places okay app is here search here navigating view all view all what happened label just recognize your tab just recognization command is this view all what is happening come and go to all pizzas let me add the breakpoint if it is actually coming here or no okay view all and it is not coming this time it came okay let me stop it and start a fresh run till the time it is loading let's see if we did everything right label view all label dot just recognize your step just recognize your command yeah everything is fine should work okay this is working but this is not working why is it not working okay let's add this command parameter Maybe because we have not added command parameter that is why it is not working save false and Save now let me rerun this time command and command parameter label everything looks fine do let me know in the comment if you know what is happening pause the video and drop the comment okay get started view all now it came okay the command parameter is required for sure okay maybe okay fine so now we are navigating to this page now what we'll do when we are coming from search page from this search bar then we are going to change this title the page is title right now it is the same all pieces page first let's fix this all pages page we are not going to have this we'll say all items save all items from view all all items and from search here all items now when we are coming from search we need to change the text so for that we can use data triggers for this we'll add trigger on our content page like this here we'll say data trigger in the Target type is going to be our content page The Binding is going to be from where we want the value to bind this data trigger with so this will get from binding and we do not have any intellisense because we have not set our namespace and our um data type for this page so let me copy these three namespaces VM models and toolkit copy go to the page we'll add these three namespaces here and then we'll set the data type of this page as all pizzas view model like this and now we should have access to the intellisense and we can see the from search so binding we will use from search and when it should trigger it should trigger when the value of this is true so it will trigger whenever from search this parameter has a value of true then what should happen we'll set a Saturn and on this Center we'll set the property title of this content page and the value should be in this case let's say search for Pizza like this and now we can save everything and you see search for pizza will come back if we will come from view all we will see all items and it will come from search it will say search for pizza right so this thing is working search here like this cool now let's add the items to this page so first thing we will have let's remove this vertical stack layout directly from here so we'll have a grid here with two rows grid first one for our search bar and then second one scrollable view for the list of pizzas so for grid we will have row definitions first one Auto whatever space the content requires Then star means everything on the screen then first we'll use search bar control with grade dot row 0 and on this we can set couple of properties which will set in a bit we can see this okay now first let me stop this app here and let me run it on the Android so we'll see the Android version so this search bar it had some differences on the platform so on iOS it is different on Android it is different so for iOS we need to do something extra you saw that black background we need to remove that and for that we'll use iOS specific uh namespace so I'll show you in a bit how why we are going to use that okay on Android it is coming for the first time okay on Android we need to have change this status bar as well we will do it after some time we can see this list find search here it came to this search for pizza view all and we can see all items so this thing is working similar and there are no differences in the design as well fine so you saw on this we can see this different search for iPhone we can see the differences soon we'll set uh the is specific things but before that let's add couple of other properties on this search bar first thing we will set the placeholder for this so here we'll say search for pizza. so we can see this search for pizza so it indicates that we can start typing in in this end it will search for the Pisa basically then we can set the placeholder color as well here we'll set our golden rod color okay after this we can set the okay right now if we add something this cross button and on uh iPhone it shows cancel text so we can set the color of this button as well so we'll say cancel button color we'll use red then you saw the placeholder curve is different but when we start typing that this text is text color is different so we'll use text color as well and we'll use this as dark Goldenrod like this we can see this thing now after this everything looks fine now right we can cancel this and it is fine stop and let's run it on iPhone again let's see how the placeholder and the cancel button looks like um it is waiting coming sometimes it takes time to load up here get started and search we can see this we can start typing and you see this cancel text this is the cancel button color this is the text color placeholder is this we need to remove this black background so for this on iOS this search bar has some different styles and those we can use I use a specific style basically so in order to use that we need to add a namespace we'll use xmlns and we'll call it iOS and here I can use iOS specific or platform specific what was that iOS specific to this one my little mic controls platform configuration iOS specific okay now if you go to the search bar if we'll say this iOS then we can go for search bar and then we can see the search style search bar style it has these three default minimum and prominent so let's see the default one is the default which we are seeing right now minimal is this there is nothing everything got removed there is no border no indication and then third one we have this prominent prominent is same as default or okay so we'll use minimal basically like this and now we can search around tool okay so this is fine now this this line does not have any effect on the Android because this is IOS specific only we are not doing anything cool next thing we will have after the search bar for the first the row number the second row basically but index one we will have our complete list of the items so for that iOS has problem I don't know if you have pasted if we directly have collection view here the scroll button iOS somehow is not able to get the correct dimensions of it on Android it works fine but on iOS it freaks out so we need to wrap collection view to some other components so in this case we can wrap this with vertical stack layout but then vertical stack layout is not scrollable so we need to have wrapper of scroll View and in scroll view we'll have a vertical stack layout and in vertical stack layout we will have our collection View this is and this has the same there's no difference on the Android in UI u x wise everything looks same okay on this collection View we'll use item source we'll get it from binding and this is going to be pieces like this like this fine this scroll view let's set the grid dot row to one here and we can see this and apart from this let's have some margin 5 so from all sides you see these are the Visa items we have one two three four five six seven ten we have 10 piece items which it is displaying right now in this collection View fine now we will use The Collection view dot item template to design our items this is going to be data template of X data type and the data type is going to be Pisa like this fine now let's start designing now we cannot see anything because we added this data template so in this data template we'll have a border with stroke shape as round rectangle round rectangle of Corner radius 10 stroke thickness we don't need it stroke thickness 0 then we'll have a background color of some light so pale gold Golden Rod color and we'll have some padding of let's say 10 and some margin let's say five like this okay now first let's have a label text binding and name of the pizza like this so that we can see something we are not seeing anything let's rerun so with scroll view the how to reload does not work sometimes with scroll view collection View if this is not working you can simply try reruning the app it should work okay app is here get started search and we can see our items here fine we need to have some spacing between these before that between these items basically so what we will do we'll use collection view dot items layout we'll use our linear items layout and for this orientation is required which is default vertical and then we can set item spacing so on this item spacing let's have item spacing of 10. and we can see this spacing between these items fine okay save light start designing this now so after this border what we'll have here we'll have a grid so we can remove this now remove we'll have a grid with row definitions as 130 this is for the image sorry not row column definitions we'll have image and then whatever space is there on the screen it can take that up so with this column definitions we'll have an image with grid dot column 0 which is default actually you know after this column 0 we'll set source which will come from binding image like this we should see the images now fine we can see the image we will set the height and width we know we are using 130 so we'll use this for height request 130 with request 130 okay 130 130 it is not picking up the changes let's rerun okay a piece here get started come here and now we can see this image is in the right dimensions fine now let's design this right part so for this we'll use a vertical stack layout with grade dot column one okay and in this we'll use vertical options at Center and we'll have some spacing between those items spacing of five fine in this first thing we need to have the name of the pizza so do I have that copied okay so label text binding name like this and we are seeing this Pizza one now the name of the name of our pizza basically let's increase the font size so font size let's make it 20 save fine now let's have some spacing between these two columns so on this grid we can have column spacing on this grid we can have column spacing of let's say 10. fine okay we can see the text and everything now let's okay let's continue after this label basting we will have the price and the rating so for that we'll use the same grid approach to grade with column definitions as star and star so 50 50 percent after that we can have a label with grade dot column zero and with text we use that full star or first one should be the price so for this we can use binding price and then string format here we can say dollar zero and two like this and then let's close this label and we can see the price here fine after this pricing so let's add font attributes at bold font attributes bold hmm save after this we'll use another label we cannot use label we need to use horizontal stack layout or let me copy that from the previous page the home page where is our home page Pizza service Pizza models have shell action main page main page oh where is this app shell home pages here on home page let's find that it should be in Flex layout to this this one right this horizontal stack layout let's copy this copy go to our all pieces page and paste it here grid dot column one everything looks fine and yes same thing cool after this we will have that will have a button here which will uh navigate as to the detail page of this PC okay so after horizontal stack layout after this grid original stick layout this grid inside this vertical stack layout we will have a button here and that button will use uh image and text Booth so we'll use a border for this we'll give it a look of a button so stroke shape we are going to use round rectangle of corner radius 25 slow thickness we don't need this background color we will use gold color here and inside this thing we will use a horizontal stack layout with a spacing of let's say two and in this first we'll have a label with the text we'll say let's say view more and then second we'll have an image with source right underscore Arrow we have this image and on this we'll set a height of 30 only and we'll set vertical options to Center for this label and the image boot vertical options as Center like this cool now let's add other properties on this border so we'll have a height of let's say 45 here fine this horizontal State layout or let's say horizontal options at Center like this and then we'll have some padding on this from left and right we'll have somewhat starting of 30 and from top right let's have it five like this and it looks good okay so it is looking good fine and vertically let's move this border two vertical options as end so it should stick with the very bottom of the this this border the main border okay looks fine cool now next thing we need to work on this search functionality so when we click on this search if we type something and if we press enter we should be able to search for these pieces so for this what we'll do we have this search bar let me save everything save on this search bar we can have Search Command Okay so for the Search Command there is one problem good problem okay fine Search Command there was one problem which I found out I'll share with you guys so first let's use this Search Command binding we have this search Pages command we can use this like this fine and then we can have Search Command parameter we need to pass the current text which we have from here so for this we need to have a reference of this search bar only so for this we'll name it let's call it search pizza or let's call it search bar only search bar so Search Command parameter so we'll get the Search Command from the source and the source is going to be in our case this is going to be a reference from the search bar and then the path the value we are going to use that is text so we have search bar dot text property here so we are passing this to this thing okay now the problem I was telling you let me go to the all Pizza view model we have this search pieces let me add a breakpoint here okay and let me save everything save all and now if I do something it came here the breakpoint came if I continue we are not going to get anything now if we cancel it okay it came here foreign do this press enter okay okay okay okay if it is working then we should be good why is it coming again and again came multiple times cancel cancel I wrote something I pressed enter it came here this is fine it is coming again and again the search term this time is oh the okay now if I cancel it it comes and the search term is did it came yes the search term is the again I did this I did this continue continue continue continue continue it is coming so many times okay so we'll check it let me stop it for this time let's try it again I remember there was some issue with this when we are clearing out then somehow it was not uh calling the command so at that time I had to make a workaround for that thing to get started search it came here add this press enter it came here continue continue it is coming multiple times this is also [Music] something is not right search term hjk continue search term again sgk okay so what we'll do we'll check it later maybe I'm missing something or we'll revisit it there is no point of getting stuck here fine so the thing which I was telling you let's have that functionality as well if that is not required we can simply remove it so for clearing part when we clear everything all piece alter saml when we clear everything then we'll use at that time this command was not getting triggered so for this we'll use the text changed event here search part exchange save and let's go to this page here so here what we can do we can simply check so on this e we have old value and new value new text value and old text value right so it will be getting triggered for each and every keystroke we are using but for all other things we are using the search command so we will not execute our Logic for each and everything we'll simply use first we will check if our old text value was not null or empty string dot is null or empty e dot old value if old value is not null that means there was some old value and the current value is null or empty a DOT new text value so this means this if condition will allow only the case where we are clearing our search bar we already had something we enter something and then we are clearing then only it will come here and when it will come here in this case we'll say all Pizza viewmodel Dot search Visa command and we'll execute this command with the search term which is going to be null so that it will Sentinel and from our view model if the search feature right we are clearing it we are setting searching true in search pizza in Pizza service if we go to the definition of this go to definition go to implementation here we are checking if it is null or empty we'll simply return the complete list so when we are clearing out we should return the complete list so this is fine let me go to debug remove all breakpoints and run it so this time we'll see the search functionality it should work app is loading okay app is here get started search we can see all items and then the same this is clipping out so we need to add padding on this View mode we'll do this in a bit research let's say we are doing one so it should get Visa one and Pizza 10 we pressed enter and we got pizza 1 and pizza 10. if we removed it we got the all the data five press enter we got the pizza five cancel it we got the complete list so this thing is working but whenever we are doing this searching we should show that activity indicator right so that it shows that something is happening it is a good ux practice and for this we also we already having that searching flag so we can simply use that searching flag here so what we'll do here on this page after everything after scroll we have this grid right the scroll view is the grid row number one search bar is the row number zero and this activity span activity indicator what we'll do activity indicator grid dot will use the complete space whatever we can take we are saying row spend two so it is taking both the row space so it is filling up the complete grid basically and on this what we'll do we will set is running we'll bind this with a searching flag so if it is searching then it will show is running and then we can move it to the center horizontal options as Center vertical options at Center and then we can set the color and color will use dark golden rod color this color save everything let's try doing something okay it came quickly it came quickly so in order to see that let's go to our view model and after setting searching true we will add a manual delay so we'll say task dot delay let's uh wait for two seconds rerun because we may change the C sharp okay app is here get started and go to the view all page we can see these let's search for something press enter you see this activity indicator and then nothing activity indicator is working we cancel it activity indicator and now we can see all pieces tool so in this case when we don't have any item we should have something here we should so right now we will not the user will not understand if something happened or not so for that what we can do all pizzas in scroll view where we have our collection View in our collection view we can set our empty View so collection View what happened collection view dot empty View in this we can have a vertical stack layout and in this vertical stack layout we'll set horizontal options to Center um let me move it here like this and in here we will have a label where we'll say tax no visas found like this and we can set the font size to bigger font size let's say 25 if we set this we can see this new pieces found and we'll set the text color some light color so text color let's use gray color okay now let's move this text to the center so we'll say horizontal text alignment at Center fine and now we need some spacing so let's try to add vertical options on this we cannot see anything so let's add some manual spacing before this label so that we can use box View here we can have height of 100 color as transparent so that it does not show that black thing and now we are good no pieces found this is good if we close everything it is looking searching for pieces and then we can see the data no pieces found and we have this but now when there are no pizzas sorry when it is searching at that time this new pieces found does not look good right [Music] pressure hey sorry for this guys I have a two-year-old kid and he just keep on falling from here and there so yeah sorry for that okay so where were we yeah we were here so when we add something and when we press enter the activity indicator is there but the text nope we just found this does not make sense because right now we are not able to uh identify if we will be able to get some pizzas or not so for this whenever it is searching we need to change the text we'll change this text to uh the we can say searching searching for pizza or something like that so for this we'll use full label and then we'll use data trigger for this so label dot triggers data trigger and the target type is going to be this label only The Binding binding is going to be binding searching the value we will look for is true if the labor if the searching is true then we'll use a sector the property we will modify that is this labels text and the value will set that is going to be searching like this save everything and let's try it out clearing searching we can say it we can see the record searching and New pieces found so everything is working as expected it looks fine okay let's do one thing on this pieces model let's decrease this DeLay So instead of having this two seconds let's make it one second so that we can see that loading indicator and it does not hold so long okay fine next thing let's do some add some padding to this view more so all pieces page and where is this label it is here so in this label or on this horizontal stack layout we can simply have some padding of let's say two save and everything looks still fine cool so this is Pages done the only thing I need one more functionality when we are coming from this search then this search box should automatically get Focus and when we are coming from view all then we will not do anything you remember that's why we are having that prompt search flag here from search so if we are coming from search then we'll do something like this okay so for this what we can do for save all we'll go to the code behind of this all pieces page and here we will override one method which is on appearing and in on appearing we will check if all pieces view model Dot prom search if this is true if we are coming from search then we should focus this and we already have the uh name for that control right that is search bar and we can use search bar what is the issue that was search bar only right all pieces same search where and search barrier the name is search bar only so search bar Dot Focus like this let's rerun it so now how it works it should add this search it should add the focus but it does not directly so the same thing I have seen so many times in my career when we worked on uh using JavaScript and jQuery on the web so sometimes we need to have some uh slide delay basically so in JavaScript we kept on using set timeout with maybe 100 milliseconds 10 milliseconds zero milliseconds like that so if you see from search here I came here but this search for PSI does not have that Focus but this code ran for sure so for this what we can do we can simply add a delay task dot delay of let's say 100 milliseconds only and now if we run it then it should have focus when we are coming from search of course okay it's coming it's here get started search here and now you can see search for Pisa and focus is already there we can remove it searching everything is fine we can go back when will come from view all then it will not have Focus cool okay let's check it on Android if we need to make any UI changes minimize this and maximize this app is coming okay get started looks fine from search we moved and we can see the focus is there remove view all and now this is not focused automatically right let's try the search functionality one enter it is searching and we can see the items now we can close searching and then we can see the complete data so everything is working on this page as well but the only thing we need to change we will change this the this status bar color to our golden this dark golden rod color so for this let's go to the app shell we'll set it for entire app shell here what we will do we'll use the namespace from Community toolkit so we can have this toolkit namespace like this and then in here we'll say shell Dot State sorry shell dot behaviors and in here we'll say status bar Behavior and then we'll say status bar color this is going to be dark golden Rock colors and on this we can set the status bar style as well we can see dark content or light content in this we'll show the light content like this because white looks good on this yet if we change it to dark that also looks fine but we are using white for the header so we can use the light content only light content like this save everything and now we are good let's rerun it so that we can see it from start okay it is coming and status bar is in the same color get started fine search is working searching we don't have anything and this is also a problem sometimes collection views empty view does not work sometimes for me if this is same for you do let me know in the comment on Android basically but on iPhone it works always let's go to iPhone run and this here let's see this time it should work same now next thing what will work we'll work on the detail page okay app is here get started search we are here it is fine go back and everything looks fine now cool now let's work on the detail page so for that first we'll create a new page here in Pages folder new file Dot and Maui Dot and Y content page and here we'll say detail page okay and then we'll add a view model for this in our view models folder add new class details view model like this create and let's first register these in our Maui program so we'll go to Maui program here we'll simply copy the same thing we did for all pieces page and we'll do Details page and the view model is going to be detail page details view model and the route is going to be details Details page fine in this details view model now details view model this needs to be a subclass of observable object so we'll do this partial details view model observable object and we should be good now save everything Maui program and we are good cool now we can move to this detail page from our all Pizza page and from home page from both these pages so what we'll do we'll add command here in both of these view models we can have a base view model as well where we will have this command but for now I'm using separate only so it's up to you how you are envisioning it how you are implementing it basically cool here we'll say private tracing task go to Details page and it will not expect expect accept any parameter there is no point of passing any parameter we can simply copy this paste this will change all pages to detail page here animate true and we are not passing any oh no we need to pass one parameter the pizza when we are clicking on any pizza then we need to pass that pizza to the next page so let's let's copy this whole thing remove this like this have it like this and in here first we'll change it to detail page and now we'll modify the parameter and in order to modify this parameter first we need to have something in a details view model and that something is going to be private Pizza underscore pizza and this will be an observable property observable property because this will be changed when we are coming from its parent page on this we'll say query property name of piezon and then second parameter as name of pizza only save go back and here we'll say detail page view model detail page view model dot Pizza and go to Details page now it will expect one parameter which is going to be this pizza and we'll set this pizza here and now we are passing it to the detail page we'll use relay command because we are using this as a comment save let's copy the same thing and paste it in our all page view model all Pizza page viewmodel like this save and we should be good now let's use this command first save everything now first let's go to the home page where is your home page I don't know where is it all Pizza Pages here so let's use this one all piece page where is our collection View item template this is our collection View fine on this collection view what we'll do we have this view more button view more where is this this but this border which we are using as a button it has this View mode so what we will do here we'll say border dot gesture recognizers tab gesture recognizer and on this we'll use our Command and now we have a situation the situation is this command The Binding context for this item is this single piece item because this is an item of this collection View but we need to access the parents view model so for this what we'll do we'll change the source we'll use a relative source relative Source means it is going to it is not going to use the direct resource the source for this binding it will use relative source then we'll say what relative Source we are saying that check for ancestor type and the type is going to be r what is that all piece of view model right X Type X type and that is going to be all Visa view motor so we are saying that binding you should check its ancestors until you found the type or piece of view model which is The Binding context for this particular page from here we say that get the path the path is going to be the name of our event which is go to Details page command command like this and it also expects a parameter so we'll set the command parameter and this we can set this complete binding this complete item so binding dot means this complete item is complete uh binding context for this particular item which is this pizza cool we can simply copy this thing and use it on our home page so let's go to our home page on home page we have this view more button right so okay we can have direct command here but let's do one thing let's add this on this border label as well and then have these commands on this button as well like this so let's rerun the app to check if this is working this is an iPhone right okay let me pull up the iPhone okay it will not work it will give error because we registered The View model right it should work it should work get started and if we tap on this nothing is happening and why so okay I know what is happening here why it is not working on this home page if you know do let me know in the comments if you know why it is not working here but it will work on view all page so we are on this page and from here it should work it is working back page is not working we'll see it okay so this errors what is it will check it in a bit but first let's fix that why is it not working from the home page Okay so this is not working from home page the reason being we copied the same command which is using which is navigating traversing upward to find all Pizza view model type but for home page we have home view model so it will not find that it will not trigger this command Okay so we will change the type here with this at both the places okay this is that error which came right now okay and all Pizza view model like this we saved everything fine let's run it again this time it should work from the home page as well okay app is here get started and now we can tap on it it is moving to detail page and on view more also it is going to detail page so this thing is working fine cool okay now in this detail page if you remember we had some different design first thing on this page we don't need this title bar and we'll have our own uh back button here can I show you let me show you this is that right this thing you see we don't have title bar we don't have that uh the okay that I can show you on Android we don't have the status bar on this and then we have this custom back button on this page right so we need to work on this page cool let's start working run and let's open this Details page so that we can see the design in real time this Details page okay but before running it let's add the here let's add the view model here so private read only details view model details view model copy paste and then use this underscore to this thing and rename this to underscore fine and here we'll set binding context of this page to this underscore details view model tool and on this page let's copy the namespaces because we are going to use all these name spaces again toolkit viewmodel and model detail page we are here save everything on this we don't need this detail and let's set the data type for this page data type this is going to be details view model and okay let's run rerun it now we'll design this page now we have our viewmodel setup it's here let's try get started detail page okay we removed that now we don't need this uh nav bar so we'll do shell dot navbar is visible false like this now it's gone but we can see this color this is because of status bar color so we will remove this we'll set it to white color only so on this we'll say content page dot Behavior 100 page dot behaviors and we'll set the status bar Behavior and the status bar color will set it white and with status bar Style on white Wheels show dark content fine this look fine yeah now we have a problem which we'll fix later and the problem is okay now we cannot move back so first let's add a functionality to move user back for that or maybe let's start working on this we'll eventually do this as we are working on this page only okay so first thing we'll have a grid here and on that grid uh y grid because we'll have some overlay content at the bottom which will display that uh view card button and plus minus buttons and the yeah all those buttons it will display so we'll remove this vertical stack layout and we'll have a grid here without any row column because we needed to be on stack on the top so we should be good and in here we'll have one scroll View which will have the complete uh data for this Details page so on this scroll view let's have a padding of 15 and inside this what we'll have we'll have a vertical stack layout with spacing let's have 15 only and in here we'll have first we'll have our image and the source we can get it from binding we have this pizza dot image like this and we can see this image now fine let's Design This so we'll have height request of 200 and with request of 200 okay then horizontally and vertically we'll Center it fine after image we'll have a label with text binding Pisa Dot name name right like this and we can see this let's make it bigger and bold and move it to the center so font size 20 font attributes bold Oriental options at Center fine after this we will have that price and rating so for that we can get that grid from maybe list page all pieces page let's copy that thing which that create this one this grid copy this detail page after this we'll paste this we can see four star but where is our Main text content okay first let me set this version just like layout move these to the right fine move this to the left line and in vs for Mac when I press enter or this it adds this one extra line so if you know uh is there any setting for vs4 Mac so that I can get rid of these extra lines so do let me know in the comments if you are following me from uh my initial days I did not had Mac I have never worked on Mac in my entire life actually I recently got this Mac recently means maybe three four months back and I recently started working on it so I'm not much familiar with mac and all these toolings okay so instead of price it should be Pizza dot price that is the only change we need to make and now we can see this thing cool now we can simply add other styles so for price we have found attribute pulled but we will have font size as a bigger font size basically so 20 here we will have this or maybe let's have 18. okay fine after this let's add a description after this let me first [Music] collapse this grid okay after this we'll have one heading here so label text description like this will use font size of let's say 15 for this and font attributes as bold like this okay and now on this one let's add some margin so that we can have some more margin from left right we'll have zero but from top and bottom let's have 10. fine after this we'll have the actual description for this we'll use font size 14 we are going to use this default size then we'll have some text and we are not having this description as a part of our pizza model for now what I'll have I'll simply have some random text this is some random random description for this pizza so that we can display this on the pizza Details page to check to design in the UI okay and let me copy this again like this and let's copy it again three times or maybe four times fine now after this text we can have the line height as well so that it will have some spacing between these lines let's have it somewhat like 1.5 and we are good cool so it looks fine okay after this we need to have that bottom part so for that what we'll do after this scroll View we will have that section so that is going to be border with stock thickness 0 and stroke shape stroke shape for now okay we'll have different stroke shape different on Android and uh iPhone so for now let's leave it like this we'll add it after some time so background color dark golden rod let's have it like this only for now it is uh fell into the complete screen now it has this if you can see clearly it has some white line from left right so we can use minus one margin so it fills everything after that we'll move it to the vertical options as end and we are good with vertical options now we'll set a fixed height of 150 like this and we'll have some padding let's say 15 okay we are good now now if you see we have this white section at the bottom of the screen and let me stop it and let me show it on the Android on Android it looks fine but on this iPhone it does not look that good that looks odd actually let me pull up the Android emulators okay get started go to the detail page so on this it looks fine from the bottom okay and on this section we will not do anything or let's have rounded uh this top rounded what we call it rounded Corners basically so for that let's have this we'll say stroke shape round rectangle round rectangle of something like 30 but it is using 34 all four corners but what we need we need to have this from this top left and top right so for that what we can do we can use this is top left this is top right bottom left bottom right so bottom left bottom right we'll use 0 0 and top left top right we'll use 30 so this is like this it is looking good now it will save everything stop and let's go to iPhone run minimize this and let's say on iPhone we are here get started retail page and now we are here as well right we can see this now what we need we need to move this box to the very bottom now the problem is this works fine on Android we need to have this we have this problem on iPhone this is not a problem this is because you this is using that safe area so in order to move it to the bottom we need to get the height of this uh what we say this com this current screen basically so for that what we can do we can go to its code behind and from code behind we will access it and we'll set the margin bottom uh programmatically in order to access this border We'll add one name to this so we'll say x name and let's say bottom box something like this save and now on details view mode not details viewmodel on Details page Dot saml.cs here on appearing will override on appearing and here we are going to access the margin the safe area basically so for that what we can do we will check bottom and we'll get it from UI application and now UI application is IOS specific so for that what we can do this comes from UI kit dot UI application we can have okay let's do one thing change this target to this Net 7 now we can see UI kit UI application shared application and from this let me make it smaller shared application dot delegate dot get window and get window we cannot have it because it comes from UI kit so we need to add this here so we'll say using UI kit remove this okay get window is a method now and on get window um we can access the safe area in sets this is a property and on this we have bottom left right all these things we can access this bottom property from here so this will give us this height which is this white section at the bottom of this screen now we can use this bottom to set the bottom margin for our bottom box so we can have our bottom box Dot margin we'll set this margin is of type thickness and in thickness we can set left right top and bottom and you remember if you remember we had this margin of -1 so we'll use all three sides left top right as minus one and the bottom as the value which we just got so we'll say -1 and for top there is no point of having -1 top sorry left top right and then we came to bottom and this bottom we need to have it as bottom plus 1 and we'll negate this so we can use multiplied by minus 1 like this save it now if we run it there is one problem which I'll show you in a bit but for now let's run it and let's see if it moves to the very bottom waiting for debugger to connect to IO simulator app is loading up and this also this shows error on vs4 Mac it is not able to access the name controls but on vs for Windows it works fine with your Studio for Windows so you see this now it moves to the very bottom now the problem which I was talking about this thing this using UI kit and this logic UI application shared application all this belongs to iOS only if I change this to Android and I try to run out Android then you will see these errors so what we need to do we need to add some conditional compilation here so we'll say if iOS then add this using and if and the same thing we'll do here if this is IOS then do get this bottom and set this margin and if and if this is not I use then you don't need to do anything save and we are good there is no error let's try to run it on both okay it's here get started detail page and this is working let's stop it and sorry run it on Android on sulfide Android okay it is coming fine get started and we are on the detail page fine now on there is one more thing I need to do I uh this rounded Corner this is fine on Android but on iPhone I don't need I don't want these rounded corners on top because we already have rounded corners on the bottom so we'll use that only I want to show you how we can use the different style for same control and for some of the property on different devices basically so let me go here on the iPhone on detail page let me move it to detail page.saml we have this stroke shaped round rectangle directly here we will modify this thing okay this is here get started and this is a detail page on this we need to I need one to remove these rounded corners from here okay so what we can do here so this is stroke shape this was direct property I will change this I will use on platform if this is Android then only do this round rectangle and all these if this is not Android so for default or iOS we will use similar thing but this time we'll use rounded rectangle with zero or we can use rectangle also both are fine so you see now we don't have those uh rounded corners on the top and if we stop it and run it in the Android then it will look similar save basically same as before expected did I miss something yes I missed something this thing run this building and app is coming get started visa and we can see this rounded Corners fine on this border let's add some Shadow as well border dot shadow and we'll have Shadow of type let's say gold and we'll use a radius of 100 so we can see this some light yellowish Shadow here cool save everything [Music] next thing we'll work on this box this bottom box and back button okay so right now I'm going to take a break and I'll continue it after some time till the time you can drop in the comments if you are liking this video or not okay okay so uh first let's work on the back button we will use our own custom back button so for that what I'm going to do after this border I'll have my image button and the source I am going to have this back let's see where it comes it is here after this I'll set heightened width for this but before that let me move it to the very top so vertical option start and horizontal options start start like this start here okay then let's add some padding or margin 15 okay this is looking fine cool and on clicking on this or maybe let's change the color of this as well so we'll use image button dot behaviors eye content color Behavior and we'll set tint color to dark golden rod like this [Music] and this is fine okay cool now let's uh work on the functionality so we can use its clicked event handler so let's go to this clicked Details page we are here async void this thing and here what we will do we'll do a weight shell dot current dot go to async and we want to go one page back so for that we can use double dot save everything and let me rerun it okay it's here get started go to detail page and click on it we came back so there is one issue if you see right now we don't have that status bar in our dark Golden Road color this is because when we came to this page we override that now it is white and when we go back so it is still white so we need to somehow re-trigger it that retrigger the status bar color that we will do in a bit but on this let's see it on the iPhone an iPhone run app is here get started detail page and we can go back and the status bar color white is still there so we need to fix this but before that functionality is working okay but let's add animate to true and then on iPhone this image looks fine but for Android let me change the image let me use I want to show you something else for that what we can do uh detail page we have one more image right that is the right arrow where is that yes special this right arrow right we will use this right arrow on Android to show the back button so for that what we can do we now need to have two different images as per the environment platform it is running on so in this Source what we can do we can simply add on platform and if is if it is Android we will use right arrow image and if it's not Android so for default we'll use the image we were already using this pack now there is one issue now let me show you but before that let me run so on iPhone this is fine let me rerun it it turned to that black color right so let's see first on iPhone then I'll go to the Android okay map is coming and delay time app is loading can you think of a solution for that tint this status bar color fix so right now we have status bar color as dark Golden Road here also we have the same color on detail page it is white and when we come back from this detail page it is white it should have been the dark golden rod only so we need to fix it we need to somehow retrigger it so can you think of a solution if you can think please pause the video and drop a comment and then uh continue so that you can see that how I made it working fine this is on iPhone now let's go to Android we need to fix this right arrow right when we say go back it should be left Arrow not right arrow but we don't have left Arrow image we only have right arrow image so we will do something so right now we can see this is right arrow image we need to move it to the left side mirror it should be rotated to the left side so for that what we can do we can simply have rotation y and again if we add directly here for this rotation y we can say rotate it to 180 degree this is fine but now it will not work on iPhone iPhone also it will the image will be rotated and that will point to the right side that is not what we want so for this what we can do on rotation we can use the same own platform if it is Android we will use 180 if it is default default means other than Android any platform in our case that's iOS only we could have said iOS also we can set zero save everything let's rerun on this Android then we'll go back to iPhone okay it is coming on Android continue go to the page and we can see this and functionality is working let's stop this iPhone run [Music] okay get started here we go and we can see the same image here the image is different and the rotation is also fine so this is working cool so first let's work on this section or maybe let's fix this this status bar color thing so for this what we can do we are setting this white color only on this page and for all other Pages we need to have the dark golden rod color so what we can do when we are on this page details few Details page here we can override a method override on navigated from or navigating from let's use navigating from so we have these three uh methods here one navigated to it uh gets executed when we came to this page that we navigated to this current page navigating from when we are navigating from this space to some other page either this is the next page in the hierarchy stack or maybe Backpage any one page and navigate it from when that navigation is completed then this navigated from is going to execute so we need navigating from when we start navigating from this page to other page then we'll do something that something is going to be we will manually set behaviors dot add we'll add a behavior that is status bar Behavior status bar Behavior and this will come from the Community toolkit so Community toolkit dot Maui Dot behaviors dot status bar Behavior like this and in status bar Behavior this is the same model which we have here this state of bar Behavior this is the same class so we are setting status bar color and status bar style we will do same thing here so status bar color we know we need to have colors dot dark golden rod color we can check it on our app shell this is the global dark older Road and stateable style is light content so student work color is this and Status by style we'll use it as Twitter bar style as dark content no not default dark content and we are good save and let's rerun will verify it so now when we are coming to this page then this xaml part this is going to execute and it will change the text to White and then when we will navigate away from this page then this will execute and this will set it back to the dark goldenrode get started okay go back and now you see we have the actual color which is fine let's try it from the view all page as well we all View mode go back we have some error we'll fix it okay we had that error okay we'll fix it after some time now let's go to Android and let's check this behavior on Android app is here get started retail page and we can see this white coming back we can see this color right okay it should be light content or dark content right here we have light content so here we should have light content like this save okay so this thing is working now let's work on this section this bottom section where we are going to have the total count and the total count that view card button and that plus and minus buttons okay okay so we are on detail paste dot xaml in here we will have our border which is this one we added a shadow and after Shadow we'll start working on the main content in this we'll have a grid with two rows row definition now let's say Auto and Auto and two columns column definitions uh 50 50 percent fine in this first we will have a label for the first row which is grid dot row 0. and First Column which is grid dot column zero and the text we will display here this will be the total amount this amount is the amount of item quantity we have added to the cart so on this we can use string format spring format then we'll simply have dollar 0 and 2 like this and we should see zero dollar fine now let's add some styling so we'll say font size font size 20 text color we'll use white color okay font attributes we'll use bold okay horizontal options start which is default vertical options we'll use Center if we add second item then it should be in Center aligned vertically okay after this the next part 4 plus minus and uh current card quantity we'll use a grid here grid and then grid dot row this is the this parent grid so we are saying that row 0 and grid dot swallow one in the First Column of parent grid we are adding this and now here we'll have column definition so it will be only one row with three columns minus then our card quantity and then plus before that let's use fixed width 50 40 50 50 50r4 buttons plus and minus and this 40 is for the text 0 1 2 3 the cart 22 basically and then horizontal options we'll set end to move it to the very right of the screen and then vertical options Center so that it should be aligned with the label this amount okay and in here we'll start working so first we'll have a image button which will be grid dot column 0. the first one the source this is going to be I have this decrement and increment buttons no other images basically okay and then we can set the height and width fight request 40 with request 40 okay let's see how it looks we can see this this is fine okay and then let's have a padding zero we don't need anything extra on this one then vertical options it should be in Center and we are good we just need to change the uh color so we'll use eye contain color behavior that we'll use in a bit and now what we'll do okay let's first add that as well so image button dot behaviors eye content color Behavior tint color let's use a lighter color gold color okay and then we need the same thing 4 the plus button and now I realized we are duplicating so much Styles but we have not used uh the resource dictionary and that approach we should have used that in this complete project I missed this so you can try it out for this let me create content page dot resources resource dictionary and here I'm going to have a style with the key as let's say quantity button Target type is going to be image button and in this we'll use setters so the property we know we have height the value is 40. and let me [Music] change the font size so right now this is text editor 12. what if I made it 11 or 10 no I don't know if you will be able to see it let's stick to 11. okay style setter value this and then let me copy this we'll use the same thing for uh with request and then let me copy it couple of more times apart from this we have vertical options and padding right so we'll use vertical options as Center and padding as zero remove this and let's use this quantity button to add both of the buttons image pattern this one so we'll have source and after that we'll set Style static resource quantity button like this and then we can simply copy this paste it here copy paste and change the column to 2 and this two increment increment like this tool we have these two buttons now now we have one more section the center section this is for displaying the current card quantity for this particular item okay so for this let me add a label in between label and grade dot column is going to be one the center column in the text would come from binding Pisa Dot card quantity like this right now it is 0. fine after that let's first have the text color as white vertical options as Center horizontal options at Center and then increase the font size so what 20 25 okay 25 is fine hmm so I think this thing is fine now let's create that button with view card button that let me minimize this grid dot row definitions Auto so this is this was first row only now we'll work on the second row here we'll say button and we'll use grid dot row 1 and for column we will span this row to this button to take the complete space both the columns so we can set grid dot column span 2. and then we'll have a text which will be view cart let's see how it looks like this now we'll add other things to this button first the background color background color we'll use Golden Rod color okay then we'll use horizontal options at Center okay then we'll use Corner radius as 22 okay text color is white which is fine and then let's have some padding and from left and right we have a very large padding 50 10 this is fine or maybe we can increase this let's say 80 okay fine then we'll have margin from the top if we'll use vertical options as hand would it go down no it is not okay so for margin we'll use 0 from left and let's say 20 from Top and bottom it looks fine okay we can leave it like this only right now nothing is happening because we have not implemented the event handlers or commands for these buttons but overall this looks fine cool now let's work on this plus and minus buttons so for these now we have to think about where we are no first let's Okay first let's work on these only so for this one we have a details view model in our details view model we will have commands for both of these four uh increasing and decreasing the card quantity okay so for this we can say private void and let's say add to cart and add to cart we will expect uh quantity which is by default one we are using one and one so maybe we can remove this pair we don't need this parameter right because increasing or decreasing we are using 1 1 0. and we are here we already have this pizza so what we can do we can set Pizza Dot card quantity plus plus like this we are increasing the cart quantity okay then let me copy this one more time and this time we'll say remove from cart remove from cart and removing this decreasing is also uh one by one so we can form it that parameter and we can simply say pizza Dot card quantity minus minus and at this time we will simply check one condition so we'll say pizza Dot card quantity if this is greater than 0. then only we'll do this because we don't want this to show negative values okay and on both of these we'll use relay command attribute so save now we can use this add to cart and remove from cart commands on our page first let me save all so now we are here detail page and these are buttons not this view card this create these image buttons fine so in this image we can say command and this command will get it from binding and we can have add two card command and the same thing we can copy for the next node this should be removed from Carter remove from card command remove from card command and the second one for increment this is going to be add two card command and why is it not picking up details view model details view model card remove from card everything is fine okay somehow sometimes it's just not picks uh the changes but we are good add two cards remove from card we can simply read on the app okay get started detail page and now we can see this thing is working and you see this price amount this is also working right so after zero nothing is happening because we have that check we will not let it go to the negative value so this is working fine three items let's check one more pizza this time let's have two items of this go back and if you come back we can see the three items here and from here we can see the two items so this thing is working we can add the items to the cart now this viewcard button we will navigate user to the view card page which we do not have right now but we should restrict the user I'm going to show you other functionalities as well what other features what we can use so if we have this quantity 0 then when we are clicking on this view card nothing should happen it should indicate that you need to add items to the card so for this we are going to work on toast messages okay so in this view cut button we have this view card button somewhere here this one yes so we don't need to go to uh command and if you want we can go to command as well okay let's go to command only let's create a command here what we'll do we'll create one more method private async task and we'll say view card in just a few part only let's have this here first thing we will check if this is the Dot card quantity if this is 0 then we'll go to the cart page and if that's not the case we will display a toast message here for this we are going to use Community toolkit which gives us Community toolkit Mouse which gives us toast and snack bias here we'll use toast which will come from Community toolkit dot Maui so let's do one thing first and we'll use Community toolkit Maui alerts cut this and add this to the global usings Global usings this is here global using save go back on this page now we can have this toast so on this toast we have a static method tools dot make and in this make if you see we can pass the message the message we'll use will say simply please select the quantity using the plus button plus that plus button like this and then we can pass the second parameter which is the duration how long we want this toast to be on the screen so for that we can use this toast duration this enum long and short we are going to use short very short span of time and let's do one thing let's add this also to the uh global usings global usings global and using and then paste Community toolkit Maui core save everything go to the page where we were here yeah dot short short now we have this I toast instance on this we can simply show the call the show method but we are not doing anything so we can directly show from here only and this is an available method so we'll await like this view card then we'll have relay command and then now we can use this command on our detail page so we have this view card here we'll set command ing view card command like this and we are good let's try it out we run the app in and Android then we'll check in iOS it's here get started go to this page if we press view card please select the country using the plus button we can see this post right so this I think this short is for three seconds we can modify this to maybe one second that we can try and if we do this then we are not going to see that message the toast message because now we have the quantity zero and now we'll be able to see this message okay let's try it on iPhone run okay we are on iPhone now get started go to the detail page if we click on view card please select the quantity using the plus button this is a native toast message and if we click on these plus buttons then we nothing will happen it should go to the next cart page which will Implement after this and then we can simply decrease the quantity as well and we can see this amount is also getting modified in the real time back let's open some other plus minus so things are working as expected cool now next thing we'll work on The View card functionality the card page basically Okay so now we'll work on view card that card page functionality so for that first let's add a new page new file in Pages Dot and Maui Dot and my content page we'll say cart page and then we'll create a view model for this so let's go to view models add a new class file and let's say card view model and in this cart view model what we are going to have first we need to have a list of Visa items which are in the cart so for this we'll have an observable object observable collection observable collection of type Visa and we can call it let's say items only cart items basically and apart from this we will have one observable property over the total card amount so let's call it total amount so underscore total amount and this will be an observable property observable property and for this we need to make it as observable object so partial and observable object like this cool so we have these things now now we'll have couple of uh commands in this cart view model so first one we will have private void so it will be when we are adding the item to the cart at that time so here let's say let's call it update cart item we'll pass the complete Pizza object from the detail page and now in here first we will check where item equals if this already exists in our collection items DOT first dot default if I dot name because we are using names we don't have ID but ideally in real world scenario you will have some ID and you will check this condition on the basis of that ID so pisa.name I am using name only now if we have this item if item is not null then do something and if it is null then do something else and that something is if we already have this item in the cart so we can simply update the card quantity this item this is from cart view model we can update this from the Pizza card quantity Pisa Dot card quantity which will come from the detail page if that's not the case we are going to add this item to the cart so what we'll do we'll say items dot add now this pizza and now we cannot have this we can if we want but that is not what we want you remember in our pizza class we created a clone method if you remember go to implementation this one we created this clone method we created this so that we can use it in this cart view model so we want this to act as different because we'll uh perform some other operations on this so we'll have a copy of this pizza and that copy will add in this update card so these items this will have pizza items but these will be copied items from the original list which we have in our pizza service all list basically cool so we added this and after this we need to trigger this total amount calculation right because we are modifying these items and from here we cannot uh trigger this so for this we will do we will have a separate method here helper method so we'll say recalculate total amount by the way I am having an ongoing Series in which I am creating an e-commerce grocery app using.net Maui so that is complete full stack we are using EF core API minimal API and this dotted movies ML and we'll use equal light as well in that so this functionality this recalculate total item and then uh not total item we calculate total amount here and this functionality I have implemented in that as well I explained in detail so I would recommend you to check out that video I am going to drop the link in the description box so please check out that complete series okay in here what we'll do we will simply say the total amount equals items dot sum so we'll simply sum up all the amounts we have like this then we'll call this method from here like this and let's have default value for this new fine update cart item is done let's add relay command to this then we will have 1 4 removing the cart item so private void remove cart item so we have removing cart item functionality on the cart page basically so here we can have simple name only we don't need to pass the complete Pizza object here so here also first line would be save for this thing so we'll check like this if this name exists in our items collection if it exists item is not null then we'll simply remove this item from our items observable collection items dot remove this item like this okay and after this as well we'll calculate recalculate the total amount like this and let's add relay command to this as well tool then if you remember we have one more functionality which is clear card functionality so we can clear everything from the card so for this let's create a command method here private void we'll say clear card we don't need any parameter for this because we will simply clear everything whatever is in the card now clearing card this is a destructive action first let's do this item dot clear like this after this again we will recalculate total amount which will be 0 in this case so we are good but this is a destructive action so we should have some confirmation logic so for this what I am going to do first I will ask for user for the confirmation so we'll say aware shell dot current dot display alert and in this we'll use title which will use confirm clear card then message so we can ask do you really want to clear the cart items like this and then we can have buttons two buttons accept and cancel so accept button is going to be yes and cancel button no so this returns Boolean value if we press yes then it will return true and if we press no then it will return false so we can directly wrap this inside an if condition if statement like this so if user pressed yes then only we'll clear this did we miss something here we will clear will recalculate the amount and after that we can have some toast message in saying that card cleared successfully something like that so we can do the same thing so we'll say toast dot make and here we'll say the message card cleared and the duration same shot dot show and we should be good now let's add the relay command here as well fine so everything looks great the sync right what is the issue tool now uh we will have a place order button on this page so let's have one more command here here we'll say private async task and then we'll say private async this should be task place order like this and when we are placing the order first thing we'll do we'll clear the cart items because now we don't have any cart items because we ordered them so we can copy these two lines after that we'll recalculate the amount which will be 0 in this case and after doing this we can navigate to a page which will be let's say a checkout page which we don't have right now so we'll work on that later go to check out page and this again is going to be in relay command save so everything looks fine now place order this this now if you remember uh we have or maybe I can show you then we'll work on that thing for now we have cart page and cart view model in the cart page let me inject this so we'll say private read only cart view model cart view model like this then we'll have it here underscore then inside this will say underscore cart view model equals cart view model and then we'll set The Binding context for this page which will be this cart view model only cool we can save everything and then cancel okay okay then we'll register this so let's go to Maui program and we can simply duplicate this line will register this card page The View model is going to be cart view model and the route is going to be name of cart page like this so we are good now now on this card page from where we can go to this cart page that is this details view model we see in the view cart command we have go to go to the cart page so here we'll say await not task wait shell dot current dot go to async and in here we can pass the card page with animate true and now we should be good let's save everything save all and let's run it on our iPhone simulator now we'll navigate to the cart page and we'll start designing the cart page very sweet okay it's here get started okay go to detail page we added some items and now we are on cart page go back and again we have some issue let's see what the issues from card page if we are going back which is saying UI application let's say where is the application output let's continue first it will stop then we'll check application output okay ambiguous route matched ambiguous route matched home page slash home page slash home page detail page matches home page home page detail page and home page home page detail page parameter URI what is it stand dot argument exception did we made some mistake go to Maui program in Maui program we have this home page here [Music] for this we have home page for this we have all Pizza page for this VF detail page for this we have cart page okay so this is everything looks fine here what is the issue then of home page here also we have home page right let's comment this out rerun maybe it is ambiguous because we are uh registering it two times we added this because we are facing some issue right we by 4 Watt let's see app is loading okay get started and we got the issue again and this time what is it oh because we are facing this issue that's why we registered it there application output um unhandled managed exception Global routes currently cannot be the only page on the stack so absolute routing to Global route is not supported for now just navigate to home page okay let me check let me figure out what the issue is this is the error again so it is ambiguous route so what I think these routes are same that's why it is throwing that ambiguous Cloud so one thing which I can think of let's try that out so in Maui program first in app shell we need to have it because this is the global route which do not when we say Global load which does not have that back button so it can be the parent of all the stacks something like that so we need to have it like this here so we have registered it when we say route on the shell content this is home page it is getting registered as loud we have again registered it at Singleton with shell route home page home view model name of home page so here also it is going to register it so there are two routes with the same uh route that is Slash home page so maybe that's the issue let's try it out so what we can do we will not register it like this we'll simply say Services Dot add Singleton and we'll add home page and then we'll add Singleton home view model will not register the route that is already registered save and run some build errors so yes where is that page program dot CS this thing let's remove this and try it out hopefully it will work this time fingers crossed it is coming up get started detail page card page and go back this is working fine okay okay fine so this was the issue which is fixed now let's start working on our cart page so to work on that first let's add couple of items so Pizza three I added let's say these are six also I added pizza two let's add one unit go back piece of four let's add five units Visa one let's add two units then view cart now let's start designing this page okay so we already have that view model setup in this card page view model this cart view model we already have this setup here what is it okay on this card page first let's add all the uh name spaces which we are going to use so these are almost same on all the pages I don't know if we can somehow globally registered all all these name spaces like we use Global using so is there any way we can do this I don't know if there is any way but do let me know in the comment if you know something copy add these hair and on this card page we can have simple card or view cart or my card card is fine okay now let's set the data type for this page data type this will be cart view model like this tool after this let's remove this vertical stack layout all together we will not need this we will have a grid main grid so first with one row one column we'll use that stack layout so on that grid first we'll have the list of all items then we'll have some box over here which will display the total amount and place order button that so we'll have a grid and in that grid first item we'll have a scroll view so if you remember I already mentioned that the collection View on iPhone does not work if it is the direct child so it is not able to figure out the the dimensions of the screen and it freaks out or maybe I can show you that right so let's start working from collection View collection View item source binding we will have items like this okay and after this what we'll have collection view dot item template data template X data type this will be a piece of course this pizza like this and here first let's have label binding and we'll use name like this it is not coming up let's restart the app [Music] okay it's here get started add items back add multiple items of this and we cannot see anything why so oh oh okay because cart item this card view model we never added the values to cart view model right so from detail page or let's say from details view model we need to add values to the cart view model so in details view model we will inject our cart view model cart view model private read only cart view model underscore card view model will set it cart view model equal start view model and now okay maybe I messed up registrations as well and at transient with shell route so there is this issue this cart view model we need this as Singleton Services dot add Singleton cart view model will have is it at Singleton but the page Services dot add transient we can have the card page as transient like this now we can remove this this line we cannot have this line here basically so now we have cart view model and cart page registered but route is not registered so we need to register that route that we can do in app shell dot example.cs file so here we have routing dot register route so this line this should be for all the pages but because we are using these helper methods from Community toolkit Maui so I transient with shell route at transient with shell route this is doing this thing for us so we can if we go to its implementation definition register shell route first line register cell route if we go there you can see routing dot register route routing dot register route so they are doing this only this time we'll do this manually inner app shell dot xaml.cs in here okay so this first route then route Factory so first the route which will be name of cart page then second is Route Factory so the type of cart page like this we have registered it let's save everything and from our details view model where is it oh my God where is it detail view model details view model we need to uh call that commands execute those commands on cart view model so from add to cart we updated this so we'll say cart viewmodel Dot add to cart command add to cart command why is it not coming cart view model cart view model what it is saying okay so that is update card item command update cart item command it is not coming intellisense is not working it is working for some things but not working for couple of things but we are good cardviewmodel dot update card items command and on this we can simply execute with the value which will be this piece object in this case let me copy this line go to here when we are removing the card quantity then also we'll call the same thing because we are modifying the what we say modifying the quantity view cart is fine and everything looks fine right okay cool let's stop and rerun let's see if everything is working same okay it's here get started here and now again we cannot see this what is this here okay let's go to the cart view model and let's add some breakpoints here breakpoints and now if we press this it came here right yes continue continue item is not null we already have this item here so in items we have one item which is this pizza let's add some other item this Visa three one it came here item had one item let's continue and if we add another item now we check this items has two item now so this thing is working but somehow it is not showing on the UI did we miss something card page cart view model binding items item Source everything looks fine okay let's do one thing first let's go to view cart page continue on this after this collection View we will have let's say a label where we will display binding up total amount can we see this no right on this collection view let's set add request 100 with requestion rate collection view item template data template everything looks fine what is the issue here let's change this grid to Vertical stack layout to check still nothing go back add item remove this breakpoint continue view cut and nothing what are we missing card view model part new model oh okay okay okay okay this is the thing we were missing we were using the wrong variables so it should be like this oh man okay stop and display them this should work now okay app is here get started add items go back add more go back add more go back I'm confident it will work this time okay view cart and now we can see these items cool okay let's go to cart page and let's undo last couple of changes like this fine remove this total amount and let's have it here only like this cool in this data template let's start designing this so what we'll have first we'll have a border here with stroke shape as round rectangle round rectangle of 15 stroke thickness we don't need it in this we are going to have a grid with four or five columns so grid column definitions first we'll have for that quantity so let's have it as 20 width then we will have that X sign that 2 items then we'll have image of the pizza after that we will have the name of the pizza then we'll have a mount and after that we'll have the delete button like this so we'll have something like this fine now after this first thing we know we have label grid dot column zero and the text will get it from binding and this is going to be card quantity like this we will Pat it in Center so vertically Center and horizontally Center let's see it we cannot see anything we should have seen right save okay after this let's add something then we'll uh or maybe let's read on it [Music] okay it's here get started add items view card and we can see these two after this label let's add one more have one more label grid dot column one and in this the text will have this hard coded x mark same vertical option Center and horizontal option Center like this okay after this we will have an image grade dot column two source is going to be Source will get it from binding image and then we'll set height and width on this one so Pi 25 and which 25 like this and same horizontally and vertically Center vertical option Center horizontal option Center like this okay we can see this after this we will have the [Music] um the name of the pizza right so for that we can have vertical stack layout grid dot column this will be 0 1 2 3. this will be true 3 and here we'll set vertical options as Center and we'll have spacing of let's say 2 here we'll have two things first we will have a label for our name Pizza name and the second item will have a label for price so text will be binding price with string format dollar 0 and 2 like this close this like this and after this vertical stack layout we will have the delete button so it will be in uh let's say we can have the image no no no after this name we will have amount of this this piece are multiplied by this quantity this one so we'll have a label here first label grid dot column this will be four and the text is going to be binding amount and save vertical and horizontal options as Center vertical and horizontal at Center like this okay we can see this amount also we'll use the same string format string format dollar 0 and 2. after this we'll have one image which is grid dot column five and the source is going to be trashed I think trash this image we already have and heightened width will set 25 25 height and width 25 and on this we'll set vertically Center but horizontally to the end like this we can see this black image but we need the black image to be red for this we will use behaviors so image dot behaviors my content color behavior and tint color we need red like this now this is in red color sure now first thing let's change the background color of this page so we'll have background color has light pale Golden Rod color okay after this this border we need this borders color to white so we'll say background color background color will set it white fine on this border then we'll add some padding of let's say 10. padding 10 we are setting on this border this should work right okay but this is not able to get it okay let's restart that first We'll add multiple items then we'll see how it is looking okay get started and two items from this four items from this one from this and let's add two from this view card and now we can see these items we need some spacing between these items so for that what we can do [Music] um collection view item template we will set collection view dot items layout linear item layout orientation vertical and item spacing let's say 10. okay okay cool so this time this is working but this does not work actually for that what I had to do multiple times I had to wrap this collection view in uh vertical stack layout then if that vertical stack layout I need to wrap that in scroll view so maybe there will be some case so to be sure already we can simply do that so what we'll do we inside this grid will have a scroll View inside that scroll view we will have a vertical stack layout with some padding of let's say 10 and then we'll have this collection View cut and add maybe it will freak out when we add that the second section of this grid okay so after this scroll View the second part this is finite the UI is okay or maybe we can add some more styling to these labels we can increase the font sizes of these labels so for this card quantity first one let's have a font size as 18 and font attributes bold for this cycle X let's do the same thing again we can have these Edge styles okay after this this is a bit bigger this price let's make it smaller this price we'll set font size font size as 12. okay and then this 18 the total amount this one where is amount this one let's have a font size of 15 and font attributes as bold like okay cool now let's work on the bottom section for this inside this grade uh the main grid the main parent grid this we'll add a border here border of stroke shape we'll have round rectangle of let's say 40 background color will have dark Golden Road background color dark golden rod stroke thickness we don't need this stroke thickness let's have it like this now and we can see something fine now let's move it to vertically and vertical options and so it will be at the very end now let's add some margin and padding to this so we'll say margin let's say five padding 10 it is here fine now let's add some data to this so inside this we will have a grid with two columns column definitions star and star in this we'll have First Column is label grid dot column 0 and here we'll have a text for now let's get it from binding this will be total amount like this we can see something okay and after that the right part in the right section we'll have a button with grade dot column one and here we'll have a text which will be place order like this we'll have a background color to this um let's say Golden Road color and we can see this button now let's add couple of more stylings so first Corner radius 22 okay now after this let's text color is white which is looking okay on this fine let's have some padding uh move it vertically Center and horizontally end then add some padding to this from left and right 25 from top and bottom 10. fine so I think we are good with this button and for this this uh label this text let's use formatted text so we have two approaches what I'm I want to show I will I want to show total in first line then the amount in second line so we could have one vertical stack layer with two labels or we can have a single label with formatted text so let me show you how we can use formatted text so in this label we can remove this text directly like this what we'll do instead we'll have label dot formatted text like this here we'll use formatted string like this then we can have multiple strings using this span tag so span will have total like this and we can have different styling as well so font size let's say I want 18 then we can have another span with the text this will be our binding of total amount with string format dollar 0 and 2 like this okay and on this we will have a bigger Point size font size let's say 20 and font attributes bold now if you see these two are in the same line but we need to move it to the second line so on this total the first span we can use one Unicode character which you can find on Microsoft's documentation dot in my documentation so it uses this Ampersand has one zero semicolon this is for New Line This is new line correct like this so we can see this thing now now let's have some padding on this label we'll have a padding of let's say from left and right 18 and from top and bottom zero cool it looks fine then text color let's have it white text color white white and then vertically Center vertical options at Center like this let's rerun okay so app is here get started add items go back add more items view card and now we can see this everything looks great yeah it looks great isn't it do let me know in the comment if you are following till now and this screen I think this screen is the best screen in this entire app I love this this screen the UI design is very good what do you think do let me know in the comments okay now next thing we need to work on this delete items and then if you remember the app I showed you we had that clear card uh toolbar item there so let's work on that first we'll go to the very top here content page dot toolbar items we are going to have a toolbar item with text clear card and the command we can get from binding and we know this is clear cut command this will be implemented in our view model right so we can see clear card and this is working this is the thing we added right no if you press no nothing will happen if you press yes then cart cleared and there is nothing on this screen so for this case we should have in the empty View so let's have empty view here on this collection View collection view dot empty View here we can we can use this similar approach which we used on the on the all items page right all pages page so let me copy that we have all pizzas based here we should have that collection view item template temp t view Village empty view empty views here let me copy the content of this empty View okay now go to our cart page and we can have the content here like this no Pages found but here we'll change no items in the card something like this no items in the card and we don't need this label.trigger in this case after this we can have a button here which will redirect user back to the all items page that all all pieces page basically so for this let's have the text we'll say explore all pages something like this okay so horizontal options as Center background color we'll use background color Golden Rod this color like this and we should be good now explore all pieces nothing is happening right now we will fix this on this vertical stack layouts let's add spacing of somewhat 15. okay it looks nice go back and you see we cleared all the items from the card but we still see this one here and this itemite we should not have this because we cleared the card then this item should get removed from here now if we add these four items we are here we can see these four items clear card is working if we do this first let's work on this thing then we'll fix that error this uh Delete single cart item so for this we already have our command inner view model we just need to call it from our collection view dot item template and this is this one right right so let me pull that so on this we'll use image dot gesture recognizer tab gesture recognizer and command and this command again we have the same situation the situation is we need to get the value for this command from its parent so let's do this we'll have binding source and this source is going to be relative source X relative source with ancestor type which will be X Type cart view model like this like this and the path is going to be are what was that remove cart item command right cart view model let's see what was its name cart view model cart view model remove cart item command it expects a string name so we'll provide this from here we have this remove cart item command and we need to pass the command parameter which will be binding name which is this item this piece a name basically so we should be good now if we press this then this should gets clear but when we are clearing it we want a mechanism uh what if we accidentally remove that item we want some because on this clear card we are showing this confirmation but for clearing from here we are not showing that right so when we delete particular Row from this card page we should have some mechanisms that this card cleared and if this was an accidental action you can simply undo this so we'll implement this functionality and the way we can implement this let's go to cartridge model first let me clear all these files close all tabs save and close now I'll use only the ones which I need so right now I need cart page and I need part view model these two only cool so in this remove card item inside this item is one item is not uh what do you say when item is not empty not null then we are doing this right so what we should do we should have after doing this let's have one mechanism here what is that mechanism that is we will display a snack bar snack bar is actually a kind of toast alert but there we can have some action some button so that we'll do here so we'll create a snack bar using snackbar dot make this also comes from Community toolkit dot Maui so you can read about it so here first we can have message so the message will say let's make it interpolated so we'll say like this like this item dot name this pizza removed from cart like this then the second parameter it expects one action what should happen when we press the button on this snack bar okay so this action I'm going to have it here only you can have it outside of this also after that action button text so what should be the action button text so here I'll display undo that if this removing was accidental you can undo this then we have time span for how long we want to display the snack bar so we can say time span Dot from seconds let's say We'll display it for five second after that five seconds this snack bar is going to be disappeared and then we can have snack bar options if we want first so the options we need let's have these options outside here we'll say snake bar options equals new snack bar options and here we'll use Corner radius to 10 and the background color we'll use colors Dot pale Golden Rod this color and then we can pass the snack bar options to the snackbar dot make to this last parameter last like this and we are good now cool now what we are going to do we are not showing it right now we'll show it in a bit when we press undo what should happen we should add this item back to the list which is this items collection right so that we'll do here what we'll do we'll say items dot add this item back we are adding this item back to the list and if we are doing this we should recalculate the amount again like this fine now let's show this snack bar so we can store it in a variable and then we can display it or we can directly add the show method to this make only snack bar snack bar dot show like this and now we are good save everything and let's rerun this okay the app is here let's try get started add items back let's see the cart now we have these three items let's remove these two Pizza Nine and notice this total amount will also get changed it get changed I am not undoing it let's leave it like this for now and we can see amount is amount got decreased now let's remove this piece of 5 and we'll press undo you saw this came back and the total amount also gets updated so this functionality is working let's try clearing the complete card clear yes cart clear zero and we can now go back or we can click on explore all pizza we didn't add method to this Explorer vision explore all pasta button where is it explore all Pizza okay let's have the clicked event handler only for this one here we can say a sink and from here we can say I'll wait shell dot current dot go to async and we can say name of all Pizza speeds like this save everything let's stop and let's run it on Android so we can see this complete functionality on Android where is Android emulator it is here okay app is loading get started add items go back add again view card we can see this clear card alert remove undo clear card yes everything is cleared and this we cannot see that empty layout so this is an issue on Android emulator which I faced very often but empty view that always works on iPhone but it does not work it works sometimes on Android not always okay so we are back now this thing we need to work on updating these values as well okay so we'll work on this thing for this if you are following my e-commerce grocery app using.net my you would know what we are going to do what we are going to do from our cart view model this is the main cart items so when we are clearing the cart which is uh this one clear card or when we are removing that particular cart item this case so from both of these cases we want to rate some event notify the application that we remove this we removed all the items from the cart or we removed this particular Pizza item from the cart all the quantity we removed so we need to notify so if someone is interested in this information they can simply subscribe to their event add event handler they can respond accordingly they can modify their UI in this case the detail page is the one which needs that information so that if something cleared from the cart page the detail page it would simply get that notification it will modify its UI okay so let's do one thing here we will add couple of events and those events are um where is it after this observable property or let's add on the top only so we'll have public event Handler Pisa will notify when we are removing the cart item so we'll save cart item removed this is one event we will pass this Pisa object that we removed this piece object so on the consumer side we can check if this command this event is for this piece only then we'll modify it then we'll have one more event this will be empty event handler we don't need any information in this which will be card cleared like like this okay now when we are removing the item from the cart from here we need to tell the UI not UI the consumer of this cart item removed we'll simply use invoke with object sender which is this and the pizza item which is this item like this then when we are clearing the card after this we'll say card clear dot invoke and then we can pass sender as this and event arguments event arcs dot empty like this so now we are good the only problem we now have this card item removed when we are removing the item we raise this event then we displayed the snack bar and what if user pressed undo button from here then we should add the same items to the cart again to the detail page the card quantity we should update that so for this what we'll do we will have one more event here with the same complete Pizza object here we say cart item let's say updated and from here when we call undo then we'll raise this event so we'll invoke this with the same item like this uh this Panda and then this item fine so now this is done now we need to go to the detail page where we'll simply get the values for these and then we'll update the values accordingly so let's go to details view model we are already injecting cart view model here we just need to add event and Handler for this so cart view model dot using this card item updated removed and card cleared so first let's do card cleared and here we can have one private method so private void uh card cleared or own cart clear let's see this phone card cleared we need to have the values here so that will have object nullable object sender and event RC and we don't want both of these in this case but we are good so in this details view model what we will do we will simply hmm should we have it here I think yes we should have it here we should not have it here but item cleared okay fine when we clearing this what we should do we have this pizza object we will set its card quantity to zero that is all what we need to do right when we are clearing this so in this case let's do this wheel because this is a single line we can directly have this as expression body and then we can add it here directly now we'll have one more for private void let's say on card item updated or on card item changed I am going to use same method for both of those updated in card view model we had these two events cart item removed and cart item updated for both of these I'll use the same method because in both of these we will simply modify the quantity in first one we'll simply set quantity to 0 and the second one will set quantity whatever quantity it has right now so for this what we can do on cart item remove one card item changed we will have sender and then Pizza let's say p like this and here we will check if the P dot name if it is the same Visa which we have right now ideally we should have checked IDs but we are not having IDs that's why we are comparing names only like this and now we need to set the hmm when we are removing the cut items Pizza Dot card quantity we need to set it to P card quantity but we are not okay we will have it different or maybe we can have it on card item change let's do this um okay let's do this have this logic here without this object sender let it behave like a helper method and here we'll have two methods one on cart item removed removed from here we'll simply call this method on cart item changed con cart item changed and will pass comma quantity int quantity and we'll set this quantity here like this on cart item changed from when we are removing the item we'll pass p and 0 quantity should be 0 in this case and the second one will have con cart item updated like this in this case we'll simply use P Dot card quantity whatever it is now we are not using these centers so we can simply omit this by this underscore which indicates that we don't need these because of the method signature we need to have this in the parameters but we are not going to use this cool now let me add these methods here so cart viewmodel Dot card item removed plus equals we have on cart item removed and then last one cut viewmodel Dot card item updated plus equals own card item updated like this and now we are good the only thing whenever we add event handlers it's always a good practice too uh clean up these to so what we'll do we'll simply Implement idisposable interface and at the very end of this class will have public void dispose method and in here we'll do the opposite of these events which is minus equals so we are removing these event handlers cool now we are good with this our detail page now let's check this save all and rerun this is on Android app is here let's try get started add two items Visa four and one item of pizza five view card you can see this let's remove Pizza four we remove this let's go back we are in pizza five we can see one item we'll go back 0 which is expected PSA 5 1 which we have there so this thing is also working fine now okay now let's try one more thing we'll add Pizza 4 again with let's say five quantities and this time we will clear the card yes and let's go back let's see Pizza four zero which is fine Pizza 5 which is 0 that is fine that is what we need so things are working as expected right cool now I guess we are almost there now we'll work on this place order button so when we click on this place order it should navigate us to the next page which is going to be our checkout page for this let me stop this first and in the pages folder let me create a new page new file.net Maui and this is let's call it checkout page check out page check out page fine okay I made it C sharp one so let's remove this delete delete find again create this page add new file dot net my content page with XML check out page create and we are here so first thing let's register this page so we can go to our app shell and here we can simply say routing dot register out name of checkout page type of checkout page like this we registered it now we need to move to this page we can go to our cart view model place order you can see this sword items dot clear recalculate amount and after this we will say await shell dot current dot go to async and here we can have name of checkout page with animate true like this okay and now when we are placing the order we are clearing the item items from the cart so from here also we should uh trigger that this cleared event this one because we cleared the cart in this case also so we'll simply copy this or where is the clear card this one we can simply trigger this from here as well after doing items.clear we'll do this and we'll navigate to the checkout page now let's work on checkout page first let me save everything save all fine let's run it on iPhone [Music] app is here let's get started add items three of this two of this view card and place order nothing is happening place order okay because we are not calling this command we are not executing that command so let's go to place order button here from here we can simply add this command this will be binding place order command save now it should navigate to the checkout page cool on this checkout page let's start working check out page first thing let's remove this page let's have checkout only then in this vertical stack layout we'll remove this text and here we'll move it to the center so vertical option Center horizontal options as Center and in this we will have an image image source that image is this check image this one we will change the color of this image will make it green image like this so for this we'll use image dot behaviors and we need to add our namespace xmlns we'll use toolkit namespace we can have this one so here we can say I content color behavior and tint color will set it not gray green and this is in green color now fine let's set the height and width which is default 150 I guess this image is dimension but to handle any unexpected behaviors let's have this explicit 150 and 150 this is fine after this what we will do after this image we'll have one label with the text let's say order placed successfully something like this we'll make font size bigger 30 and text color we'll use green only which indicates success let's see how it looks how to play successfully fine after this we will have a button with the text we can say go to home screen like this okay on this vertical stack layouts let's have item spacing as 10 okay or maybe more 25 okay fine on this button let's have other styles first we'll change the background color we'll make it dark Golden Road this color which is fine after this we'll use Corner radius 22 pool then horizontal options as Center and now we'll add some padding let's have 15 or let's have 50 and 50. 10. 15. 10 is fine go to home screen and we are good now okay we can come back we can go to place order and we can see these things now these are static we will add some animations to these so in order to add animations we'll use custom animation.com provides us couple of animations so for this we need to access these from our code behind so we'll name all these X name let's say IMG image this label will say x name let's say MSG message and on this button let's say x name home BTN like this okay now first thing in order to apply animations not completely but we should have some initial uh initial state so for this one for this image we will have scale 0 so this is hidden right now scale is 0 then we'll simply increase the scale to 1 and it will give us animated effect same thing we'll do with this message for this also we'll use scale 0 and same thing for our button scale zero and on this home button we'll use one more opacity 0 we'll use two animations on this now everything is fine we cannot see anything which is expected now let's go to car this checkout pages code behind check out page.saml.cs here we'll override on appearing and on appearing we can have our logic okay and the logic will be first stable first we will start scaling this image image dot scale to we'll make it bigger 1.5 so 150 scaling then we'll use MSG dot scale to scale to 1. so these both of these are async methods I have not applied a weight because I want this to be run in parallel so image will be 150 bigger and the message will be of its actual size currently it is scaling to zero so it is it does not exist on the screen but it will take its space after this for this image We'll add couple of applying so that it gives us the heartbeat effect basically so what we can do here we'll say await IMG Dot scale to 0.5 it will scale to 50 percent so it will be half of its size and then let me copy this line couple of times 0.5 to again we'll move it to 1.5 then 0.5 then 1.5 so it will give us heartbeat effect 1.5 and then finally we can set it to 1 so it will be of its actual size okay now after this we also have home button home BTN on this also we'll have two animations so one fade two and here we need to provide opacity which is one so we set home buttons opacity to zero if you remember this 0 and from 0 it will come to 1 and it will give us paid effect Fade Out basically and then for this one we will decrease the length by default it uses 250 milliseconds but we'll change it to make it fast and we'll or make it slower basically not fast this and then again on this home button we'll use scale to 1. and again I have not added a weight on these two we can await on this one there is no problem but on first line I have not of it because I want these two animations to run in parallel now everything looks fine let's try it out but before that let's work on this button as well so we are not having view model for this so let's have the clicked event only home button dot clicked we'll come here we'll make it async and then we'll simply say avoid shell dot current dot go to async and from here we'll simply remove this from stack so we'll use double uh slashes and then name of home page with animation of course so with animate true animated true we are good now let's rerun the app is here try it out get started visa7 add items go back Pizza 6 view card we have these items and now we'll do place order and you see this animation and now we can go back from here or we can simply go to home screen like this and now we are on home screen now if we'll check everything will reset to zero now we don't have any item in the cart and all the quantities are zero let's see it on the Android like this like this Android okay it is coming get started foreign place order and this animation go to home screen and we are good Okay cool so I think that's sums up everything which we wanted to achieve in this video so this app came out pretty good we implemented so many things in this we implemented shell navigation we implemented search bar right we implemented title triggers data triggers for this we implemented search functionality view models Community toolkit alerts toast snack bar right Flex layout on this also we use uh conditional UI changes for Android and iOS we created this cart and so many we also implemented these animations this nice small animation so for this initially I tried to use Kia sharp but ploty animation and all those but the problem was those does not work on the iPhone the iOS those were working on the Android but not iOS so I checked and they have some issues they have GitHub open issues and same with GIF images those works on Android but does not work on iOS simulator so I had to drop that idea and then I made it this custom animations model cool so that's all for this video so please like this video share this video subscribe my channel and do let me know in the comment if you like this video and if you have some queries or some suggestions some feedback I'm open to everything and I uh replies to comment most of the time I reply to each and every comment I read each and every comment and if you drop comment it gives this video boost and I can get more views which will help me motivate me to create more videos and you can drop some suggestions for further videos as well so I will look into those and maybe I can create videos for those as well okay cool so that's all I will be back soon with some next new video till then bye bye happy coding

Channel: Abhay Prince

Views: 17,528

Keywords:

Id: bhr7pDfFzR4

Length: 314min 4sec (18844 seconds)

Published: Sun Aug 20 2023