Product List and View page for Ecommerce APP In MAUI #MAUI #xamarin #xaml.

foreign [Music] [Music] and your user can see the product this is the name description price which is Strike okay this is a line here you can see here and uh actual price and the color Okay so this will be optional in every product there will not be color under this filter and this search text box so after that we will see the new product page this is the view product detail of the product so uh before starting the video uh I want to let you know that I have created the WhatsApp group oh I have I have shared the WhatsApp group per Link in the description section so where you can uh join this WhatsApp group and there are uh there there are uh many uh xamarin developer or learning or xamarin so we are in this group we can discuss the xamarin issues or the problem you are facing uh and all the uh so I uh invite you all of you to join the WhatsApp group and the link are given in the description section and do not forget to subscribe my channel if you are not subscribed this channel then please subscribe this channel so let's begin so uh this is the product page um this is uh this is the view of the product page but I will explain through this live preview so you can understand clearly what I actually control is okay so first of all this is template okay I explain in uh last video this is uh navigation template I have created custom custom template custom control where this is the label font awesome label and the this is label uh label for the name of the title okay and I have created property here if uh user click on back button then it will go to the back page okay so for the back page you have to use a double dot in the inverted column and for and for the title I have set a getter and seta of this label value okay now for font awesome in Mao it is very simple you have to add a font in font uh folder of the resources folder okay then after that copy this name program dot CS font dot add font uh paste that file name and the extension of that file name and give the name whatever you want okay then uh how to use this after that you have to create a class file uh yeah it is here so this is specifically for the uh you if you don't want to create uh it will be okay then so you have to remember all this code so if you don't remember I obviously you will not remember this all the code so you have to create a class file this class file and copy the and and copy this code or in that class file okay this is the font code after that create a namespace for that file we have created I I have kept in model so I kept I are using the namespace of model then um namespace colon class and class dot for the name of the font okay so it will take a value of that font in this text then after font family this name will be same as we have kept in the Mao program.cs okay so in this way you can add a a font a font also uh in the mouth after that this is a simple search text box and this is the again font awesome label which is the filter and this is list view okay so in list view I don't want to view a separator here so I set the separator non none and has uneven row so that I can uh see how height full height of that item okay if I if I set false then it will be it is not working I have to restart the app but if I set as false then it will take a by default height of the template so you have to always use a has uneven rows is equal to 2 and in the item template I have created this template let's see the design of the template so name of the template is product template Dot xaml so first of all I have set a stack layout and the padding zero file so left and right is zero top and bottom is 5 so I will have a space between this two item and after that uh grid grid I have used in the grid I have used frame Corner radius is equal to 20 this is not showing Corner radius so you can see here I have here uh in Mobile uh there will be a corner radius so it will uh look a corner uh in the round shape so Corner radius is equal to 20 in the and the padding 0 because as you know frame has a default padding is equal to 20 so I remove the padding and the rose pan is equal to 4 so there are four Row 1 2 3 4 I want to consume all the four rows so I use load span is equal to 4 and the border is equal to White so yeah we will not display any border around the around this template around this image okay and after that this is Port labor this is our sum level for the title this is the title this is the this is the title this is description okay and this is the uh price so I want to show a dollar here you can see your dollar is visible so I have a string format Instinct format Dollar in the curly bracket 0 so it will automatically take a price then text color gray color this is coming from App resources and text decoration is equal to strikethrough so I want to show that this is actual price this is actual price and and but I have to show you your discount so I'm starting that actual price and this is the discount value okay and in the discount value label is will be same with the string format dollar and because it is suitable to this it is at looking attractive so I have taken a pink color after that uh this is the uh this is color label okay header for the color and the number of color is available for this item so I have used a stack layout and orientation is equal to horizontal so it will show in horizontal way and spacing is 5 so it will show a space between the Box view okay and the grid is row is equal to Third and column is equal to second after that I have added this three box View so I have also tell previously in the Box view in xamarin background color is used for The Coloring uh filling the Box view but in Maui use color property to fill up the box name okay this is a item with request so this in this way you can create a product when you click on the product is product new you page will open okay so this is again a navigation bar I don't know it is not working here uh but this is again back navigation bar this is back navigation bar I have explained now and this is the uh this is the uh label new page okay uh first of all you have to take a grid View first of all you have to take a grid view in that control uh first I have added the back back navigation uh control custom control and after that I added two label for the title and the description after that I have added a causal view okay this is a cursor View so you can use the uh it will show the all the image of the cursor View so a fork also I have added a console view in the stack layout and the margin I have set minus 20 because I have set here 20 a padding so it will show all the space around uh around around uh around the side so uh so I I don't want to show the any space between uh by the side so I remove that padding by using a minus 20 that's correspond two so it will take a two column combine the merge the two column okay as you can see I have taken a two column here don't worry I will uh send you code in the Blogspot but it will take one or two days so you can copy from there and the in the template I have added a view product template okay so in view product template I uh directly use I have only used uh image nothing else so it is in the stack layer I have added only images of height to 70 okay then to view this indicator you have to use the indicator view okay and name the indicator View and use that name same name in the indicator view property of the course of view so this name and the this name should be same so it will uh interact with each other okay there is nothing other code just you have to put the same name in the indicator value property after that to uh view this uh this this two value this is uh actual value and discount value you have I have used a stack layout orientation horizontal and I had added a space by using margin 50 okay then added two label for uh this actual price and this discount price this is a text decoration factor to show a strike after that I ball with same margin okay and uh and then description this is the header and then after that I added another a label to show the uh description okay then I use another label to show the header of Virtues color but I also kept here margin so this is the 20 margin so it will look separately and look beautiful that these two sections are different so I have kept this margin and then this is a stack layout okay in this stack layout I have added three three labels as explained in uh on product list that this is a box View and using the font awesome font awesome we uh sorry in box view in a product list I have used a box view but I want to also use your box view but uh um I want to show you another way that there is also another way to show the box I have used here a label okay so you in the boss side you can use the label it is not necessary that you in the product list you can use the Box View and your label but you can use on both side the Box on label with font awesome just to uh give a hint that there is two way to show the box I have used in the product list uh um boxes and the in the view product I have used the font awesome okay so so I want uh so user has selected this color so it to make a highlight this color I have uh get this label thoda more larger than the these two level okay so this phone size is 20 at and another two font size is 20 so it will highlight that this is selected and this is and uh and this is bigger so it get highlight so and the font awesome will be check square and another two will be the square foot okay and then there are the two button for add to cut and buy now in this two button I have set border with to show the Border and the Border color okay and background color is white and text color is that primary color and the another is buy now where uh there is no border uh border actually put a border and the background color if you don't put uh this will not work okay this border will not work because by default water with its zero so if you don't write this border color it will be okay then the background color is primary and text color is fine so in this way you can create a product list and view product okay and in next section we will check out page which where a user can see a card item in the cart and then you select the address then we will do payment okay so this three in one page how to maintain these three uh three pages in one page we will see in the next video okay till then take care and also don't forget to subscribe my channel thank you bye

Channel: Kirti Yadav

Views: 615

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: xcBkcP2q6rc

Length: 19min 38sec (1178 seconds)

Published: Sat Jun 24 2023