Create a Shopping UI in .NET MAUI with SQLite

hi everyone this is aaron in this session we are going to create shopping ui application in dotted my ui with sqlite database here we go we are going to develop this application using visual studio 2022 i am opening that application need to choose create new project select dotted myua app i am giving the project name a shopping ui now the application has been created now we are going to create login ui like this view we are going to add the two label and two entry box onto button we're going to achieve this view now i am going to add login page for locking page we need to choose data mining with dotted my content page so now login page has been created now we have to add the content rich content now we are going to add grid we are setting the value on horizontal option on vertical option and the padding to align the grid now we are adding label for username and password i am going to set call 670 now we will add the entity textbox let's see the frame the height of the frame going to 50. i am setting the empty text box color as white and height request 48 and withdraw cost is 200. next foreign in password introduction to set his password property is true now i am adding two buttons first one is login button second one is register button both bottom lids are up here already inside the clip i am setting button text as login and button text color as y and height request is 40 and the cost is 100 next we will define the rotation of the previous okay now we are going to set the grid row and column values for label and frame i am adding these values the column value is going to be zero and row value as one turtle escape i am setting grid row value as 4 and writing also uh now we are setting text color for label i am going to apply same color for button background color as well now i'm going to add the background image for the login page so i'm going to add the image for the background mixing resource image scroller now i am modding background image for locking page so i am writing the image to include the grid i am going to assign the image source yes so i just set the vertical option fill under aspect ratio free so i'm going to run this application i'm going to change the absence which means we just login page i'm going to run this application in android cell emulator so far we have successfully created the login page with the labels entry and buttons so now we are going to implement the functionality of the login page hence we are connecting with sqlite database for storing username and password anyway into our nucleus we need to add sqlite namespace so we will open the management package and browse sqlite.net pcs and i choose version 1.6.2.9 and install it now sqlite ninja was added now i am going to implement the sqlite database connection now we are going to create new model for log english in login model we are adding two string properties one for username on zone four password and we are assigned the username property as primary key now going to implement the create data method this method will retain the data from database so next we are going to engineer save logging data this method is used for adding username and password into database you yes i am going to create a login view model so i am going to add new folder the folder name is viewmodel now i am adding new class files and set class name as login view model now i am adding the login viewmodel method and now i am adding the property for the username and password [Music] next we are going to add i command method for register now we are going to implement the login command it will help to perform the login button click event now we are creating respective method for a command now we are going to add login database static method and static property in observer page in get method we are going to check area database are null or not node if database null we are going to create a new database now the database called login database code has been added now we are going to implement the i command property for login command method for navigation purpose i am going to add the navigation using it command login command navigation in this method we are going to check whether the given username is existing database this login command method will compare the textbox value with database value if the given username on password matches then it will navigate the next page if it's not matches then error message will pop up register command method will save the username and password into the database once the data is stored in database it will show the pop-up success message now the command code has been linked so i'm going to add this command in example page so let me know the example page now i am going to add the pointing context for login quiz now we are going to run the application now going to register username and password i'm going to type the usernames test1 successfully if we provide invalid username or password the error message will be populated now we are focusing on product page so in the in this product page uh as for this image we are going to implement in this page we are going to add syncfusion list view commands let's add new item button page so now we are going to add label inside the grid so we are going to add syncretion list view so in open manage nuclear package and type more ua list view and i'm going to install the new card you will need to install successfully now we are going to add synthesis to your namespace we are going to add sufficient listview control in example page this list view will help for the displaying product image and details now we are going to create model and view model for product page [Music] now we are create item model in this model we will create a item class and say the item class defined all the property which i am showing here now i will create product page view model now i am going to add new item i'm going to choose class and give name for product page view model now we are going to add product view model items next we are going to add the new item now we are adding product items what are the product items we are adding here will be display in the product page now we are adding picture name and product name quantity of product and price same way i am adding some more product items so far we have implemented a product which is modern delish now we will back to the product page design in this code we are adjusting property value for the alignment of the list view also we find the value for item source property next we are going to add a sublist value item template item right inside we're going to add the data template in history we are implementing data templates without other image property in second frame which will be showing the product image and label order inside the stack corner the label will be displayed the product name and the price next we are going to assign the grid road ignition and padding and background color we are setting the value in the label for text color and font since on for battlefield and horizontal text element and margin for a final purpose either one of the box view now we will add binding on this for the product page now going to add product image in image folder now the product image has been added now product page design has been completed we will run the application now we have implemented the design page for product page this page display product image product name product price details and also we have included view button now we will see the functionality of the view button now i know our selector item property under i command i can click given how are we going to implement item that's it this method we're going to move this page to another details page i'm going to create on details page further i gotten more using armor pitch don't think the navigation protocol create one project oh model assistance method vertical space now we are going to assign binding numbers for detail page so i am create product pageview model item and assign binding on this now we are going to implement the design detail page for the product uh in this case we going to show the product image and product price and product description and add to cut pattern in content i'm going to add a grid and i have assigned by the contest is circuit item next we are going to show the product image so product image i have ordered the image property inside the grid and i allow added one proxy for the corner for the image and i have assigned source for the binding feature from product bridging model next i have ordered for the code for the product price and product texas [Music] description now we will create r2 cut button and i add the respective property for the button also i have bind the value in common property so we are going to add the respective even in view model so mr product item click even in view model so now we're going to keep the card page the card page we are going to show the product details and product price and product quantity this label will show how many items were selected and we are going to add the sf list view uh in that case we are showing product quantity details under image and plus or minus pattern now going to add simulation in space our list do you control in list view we implementing data template we have added image property inside the grid which will be shown the product image and the label will display the product price and name and also showing the quantity i am adding binding contacts in cartwheels so far we have completed the design and functionality for the shopify and this shopping new application will have implemented the login page product page title page and cart page now i'm going to run the application which we created now i'm going to enter the username and password i'm going to click the login button let's navigate the product page the product which will show the other product details now i am going to click the view button when we click the view button it will navigate the display page so data will switch on digital speech issue image and description on price details now going to click the autocad button now the final card page will show now i am going to end this session i really appreciate that who took the time and listened to my presentation thank you all [Music] you

Channel: Syncfusion, Inc

Views: 16,413

Keywords: Syncfusion, Develop, Software, Technology, Developer, Components, .net maui, .net maui preview, .net maui example, dotnet maui, .net maui controls, leomaris reyes, .net maui webinar, .net maui vs xamarin, mobile development, what is .net maui?, .net maui tips and tricks, .net maui highlights

Id: EatS5vvo8OY

Length: 46min 35sec (2795 seconds)

Published: Thu Aug 11 2022