MVVM - Create Ecommerce APP using MVVM MAUI/Xamarin

foreign [Music] [Music] and the another is the we will look today for the uh UI for the address okay so uh before uh starting the video please subscribe my channel if you are not subscribed and please share it to your friends so in uh check out in checkout we have added the item I feel like this so yeah um we can remove it it will show a message box then maybe click it you know that item okay so for this uh in the previous video uh uh we have uh uh cart view model I have explained all the all the things you can go through uh the previous video uh you know that if you directly watch this video can't understand so please watch it or previous video so you can understand this one so in this thing we have used the list of item view model okay so I change to observable collection because in observer using the Observer connection we can uh remove the item and list this is not possible so this is also a difference between this and observable collection so ah in remove item first you have to create a method okay first create a method that uh with the parameter item view model because item view model is binded to uh list view this is the title model and this is the uh item list which is the which is the uh this this uh item list uh I don't know where it is card model so in card view model there is a card model and card model there is item list so in this way we can know where items so this is items so it I have converted to the observable collection okay now I have to remove that selected item from The Observer collection so uh uh pass this item okay uh and uh and in the result use uh uh take a data from the user take a data from the user if they want to delete or not okay so uh your uh I have used yes or no so it will take in the result if the result is it it will be removed from the item and then assign this view model again to the card model so this list we will be refresh okay now main theme for this you have to create a command okay so in cart view model uh Constructor uh um sorry uh you know uh in while uh adding a new item item to a item to a list you have to create a command so every command will every item will have a command okay it means if there are five items for each item will have the remove item command so this is the remove item command okay and I have assigned uh a arrow and the remove item and pass the a this is the a okay so this will be the uh parameter password actual parameter is not pass from here this is the uh this is assigned that this is the this command is attached to a item and parameter also okay now for passing a parameter what you have to do in the cast list template what happened uh please uh ignore the background sound because uh one of my cousin cousin not uh one of my sister-in-laws for son has break his hand and he is only one and a half years so he's crying so please ignore this sound uh in the in in this remove label you have to uh bind that command okay remove item command and to pass a parameter use dot dot means uh all the uh value of that class all the property of that class okay if you only assign uh for example name so it will pass only name which will be interesting but if you pass a DOT it will pass parameter as a class okay uh if you have any confusion in this then please ask me in the comment section I will explain this all as I have created a WhatsApp group you can ask me if you did not understand this one I know this is little bit complicated but if you have any question that asks me in the comment section or you know WhatsApp okay uh in this way you can remove the item from the list view by using mdbm now move to the new UI color addresses okay this is address when I click on the my account this menu will open this UI is in progress so when I click on the addresses uh this page will open where user can add a a multiple address here so this is the address UI form so this is the type what type of addresses is this then first name last name and the phone number address is State and input and another thing you can add about it and also I forget to add a button for sale you can place a button I will update in the blog you can add a button here okay now our in addresses this is this part is belong to this part okay so first of all I have used a grid control uh as a main control then I have used a label okay to show the header for a type label then this is the option of type so for this I have created a control called a image label so let's see how this control is created so this is Image level so it is very simple uh I have used a grid I have added two rows for uh I added two rows for showing a icon and another Visa text okay so here I have add a label for a icon and icon I have used this font awesome family and another is a simple text okay now in code behind this is the code behind this is the assigning uh What uh icon value I have created a iPhone property this is text property to show the text and the text color okay text color for if for example so we should know which is highlighted so when I click on the office it will get highlight another bit will will be changed okay so for this I have used text color now move to the main page so in the frame so this is the this is the frame okay this is the frame and in the frame I have added grid and grid having three columns because I have to show these three types and uh and these have added a control okay it is Ctrl I have assigned a text color okay by default as X color uh home will be uh highlighted because when a user adding a uh opening a page one should be highlighted so uh uh by default IR set this as a text color another two have not I have set X color so uh you can set a text color whichever you want to highlight it by default okay or you can create another property by default and write a logic there another is a class ID uh I will explain why this I have taken okay another icon icon you remember I have created Property another is a text so icon will show uh this icon text will be show a text okay and then I have created a event for click okay so all these three item you have to add in the grid okay now what is happening in the tab so uh first of all I have created a list of image label then added a Ctrl all the three control here and in the tab what I have done I have a cast this sender okay and in for Loop of this control I have checked that this class ID control class ID is same as this class ID okay if if the sender class ID is equal to the uh list of one of the list one of the item in the list matches that it will highlighted other will get this highlighted okay another another will be get unselected so in this way you can uh change the uh color okay now text box so uh this is the text was icon and this is the text box okay so for this also I have created icon and here I am using a frame under the frame I have using a vertical stack layer so in vertical stack layout I will show this control then this line then this another control in this way same also in another frame so I will explain this you it is also uh same as this one so uh you can if and if you understand this then it will be sent as per this okay okay now now uh this is the label for name this is the frame this is the premiere then vertical stack layout to show a control in vertical this is a text box icon so let's see what is done here so you have to use a grid again with the two column because I have to arrange the column in to arrange a column uh I have to arrange that control in the in in column wise okay so this is the icon and this is a text box so I have simply added to control nothing as I have done only in the font family uh I am user font also to show the icon okay and in the back end so placeholder and the icon okay and I have not created a property for a text if you not you can create a text property here to gain a value of the text in the back end okay uh means it will not means means uh if anything you put the user here input here and how you will get the value of that to get a value I have to create a text property set a getter and set a text Dot text and text Dot text is equal to Value okay so add that control in the in that frame so simply add that controlling that frame assign that icon to the uh value and placeholder and then add a line okay height request will be one and as per as says many time that in the Maui uh background color will be used for the line and color will be used for the xamarin if you are using xamarin then use a color properties then use the background color property okay and I add another text value so in this way you can also create this another frame for a contact so in this way you can create a address layout hope you understand uh this UI if you uh if you like this video then click on the like button and please subscribe my channel and please share this video to your friends and thanks for watching thank you bye bye

Channel: Code Crafter

Views: 165

Keywords: #MobileAppDesign, #UIUXDesign, #AppDesign, #UIInspiration, #MobileUI, #UIPatterns, #MobileDesign, #AppDevelopment, #UIUXInspiration, #DesignProcess, #AppUIInspiration, #MobileAppUI, #MobileAppDevelopment, #AppInterface, #DesignTrends, #AppUIIdeas., #XamarinDesigns, #MAUIDesigns, #XamarinUI, #MAUIUI, #XamarinDevelopment, #MAUIDevelopment, #XamarinUIInspiration, #MAUIUIInspiration, #XamarinTips, #MAUITips, #XamarinUICommunity, #MAUIUICommunity, #XamarinMAUICommunity, #XamarinUIDesign, #MAUIUIDesign, #XamarinMAUIDesign

Id: Kz-y5RF9YyM

Length: 18min 30sec (1110 seconds)

Published: Wed Jul 26 2023