Build WhatsApp UI using .Net MAUI Step by Step

hey guys welcome to my channel on this channel we are going to build some of the cool stuff using uh latest trending Technologies so this is my first video and if you are facing any audio issues or video lighting issues so please bear with me so I am starting my general Journey so I'll be improving all these things throughout my journey so who am I so I'll tell you about myself in a bit but first let's see what we are going to build today so most of you would be aware of this screen so this is WhatsApp UI so we are going to build this WhatsApp UI today using.net moving so all the folks who are not aware with dotnet Maui so dotnet Maui is basically a a framework and is an evolution of xamarin forms so using.net Maui we can create cross platform native apps for Android and iOS mobile and then for Windows desktop and Mac OS so all four using single code base so most of the code we can share so I have this Visual Studio open so let's create new project so I have Visual Studio 2020 to install and this dotnet Maui it comes with net 6. so let's create a new project and we are going to call it WhatsApp let's say Maui Okay so yeah it comes with dotnet6 so this is the first version which supports.net Maui okay so while this project is being created let me walk you through about myself so my name is I am basically from India and I am having almost nine years of experience mostly in cold development my main stack is dotnet full stack and I have worked with dotnet framework.net MVC and web apis then food.net core I have worked with razerpages.net core apis dot net core MVC then for databases I have worked on MySQL and Ms SQL server for database connectivities I have worked with Dapper and Entity framework core then I have worked on all major front-end Frameworks including angular react view JS and Blazer and for mobile development I have managed to work on react native for a short period of time and now I am working with Dot and Maui so all these Technologies we are going to build some cool stuff on this channel using all these Technologies one by one so yeah please like share and subscribe my channel so I'll try to uh be more frequent on this channel and to get some tutorials some best practices some of the real life problems and issues I am facing I will try to make videos on that so that fellow developers can get help from there okay so that's all about myself now okay so we have this project open so let's start now first thing so we have this WhatsApp UI then we have these three tabs let me minimize this okay now we have the COI we have these three tabs so dotted Maui supports tabs out of the box we have a shell concept so we are going to use that shell to build the these tabs so first we are here in the shell app shell we are going to remove this shell and then we are going to create a paper and in tab bar we are going to have a stab and we will have these is it yeah sorry yeah so I'm just starting so you might find these glitches or so I'm not much familiar with this video recording all these so I'm just starting so yeah please support me yeah okay so we have this shell content in this shell then we have three tabs so we can have these shell contents or maybe before that let me create those three pages so we are going to add a folder edges and we are going to have three pages uh new item dot net movie content page so where is that yeah so we are going to have chat page status page and calls page okay so let's say yeah so we will call our chats page then we will have another page we will call it status page then we are going to have third page which will be calls page okay now add to Shell we are back to Shell and Michelle we are going to set content template so we will get this content template from all these pages so to get these Pages enabled into this uh into this ml file first we will need to add namespaces for our Pages folder so we will simply say XML NS and let's say we will call these pages and we have these Pages yeah so now we can access these Pages using this page then in content template we can have data template then Pages we cannot chats page okay this one now and we will keep the touch title now chats only okay now I'm going to replicate it three times and one for status and the last one for calls foreign so I have this [Music] Android emulator already set up so I'm going to pull that emulator on so that we can see what we are building we can see that live in the dot Android emulator so it is going to take some time and we can continue till the time so we have these three pages so for now uh let's go to chat page and let's say let's call these chats then call space let's call this all page and on status page let's call this status page so I'm Gonna Save and let's see where is our emulator I should have already opened this so it should be quick but let's wait uh let me pause the video to I'll resume it once emulator shows up okay so we have emulator up and running let's try to push it again we have checked space till the time uh it is building we can see that what all models we need so if we'll see this for this list we have one Avatar then we have name of the person then we have last message then we have last message time then we have this unread count so we will get back to this 100 count later let's first try to create a model for these values Okay so what is it doing okay just trying to build till the time we can oh we have to wait again okay let the deployment finish okay it's here we have this chat status and calls let me make it bigger yep we have this chats status page in calls okay now first let me change this chats page uh the Titan it says WhatsApp okay fine okay so now first let's create a folder now let me stop it let's create a folder models and we are going to create a model uh let's say chat and then let me choose to public and it will have Trust ing name of contact then it will have last message that and we let's say we show the last message also right oh my God yeah the last message we show last message also then I'm read count okay so last message I'm gonna need them only come okay should I did I just okay let's use the latest features let's do it using trick card Okay so we can have these name last message last message and then I'll leave count so yeah okay let me clean it up okay now we have this chat model and now we are going to use this chat model to fill data to our chat screen main chat screen okay so before that let me uh again run it and let's go back to chats page let me pin it so here let me create a helper method uh let's see load chats so we are going to have some dummy data or maybe let's return I number multiple logs chat model from here load chats and let me return a list of shared model from here okay and now we are going to fill it with some Journey data we will say I can check okay so I have uh I have to SVG files one for single laptop and one for uh group so let me pull those okay I have those here okay so I'm going to paste these in resources folder in images okay so we have our past SVG and we have a third underscore group dot SPG so one thing uh in dotnet Maui we cannot have hyphen and capital letters so all these names of these resources must be in lower case and if you want to separate the words you can add underscore now I find no other uh special [Music] okay so I have these two so I am going to use this to fill my data so the first one was let's say after this PC then name okay so I already have this list let me pull that list also so it will be quick let me find it I'm going to find the list okay so I have this data and I have duplicated I have created some placed then I have duplicated all these okay so now I'm going to have a public property for absolutely collection to this list to be shown on the UI observable list of chat models and let's call it chats and we are going to fill this inside the Constructor chat sequence let's say collection and their checks sorry launches okay now let's set The Binding context to this okay so I guess follow the CS site we are done now let's come back to this chat so first thing uh we have this this collection this list so we'll have a collection view let's have a collection View and go cycling yeah so and we have this floating Fab icon Floating Action button this one this uh create new message button so in order to create this I am going to use a grid so maybe in upcoming videos I will talk more about how we think that word control should be used and how we should uh and when we should use those practical controls so I'll talk about these in my later videos so now just I'm going to use a thread with two rows so I'm going to have no definitions so the first one is going to have all the width and second one let's say Auto now of first row it will have the collection view the complete list and for now uh let's have it this only and then the second row it will have that button for now let's have a button character we will apply cosmetic changes to this so for now let's say Plus and okay now we are going to say although these means understood but I like to have these explicit that grid dot row zero then button will also be foreign okay not so the second row row zero only and I'm going to uh add this as a floating action button so first thing I am going to have let's say 50 height 50 width and let's write it down okay now the vertical options that's I'm going to move the to the end same for horizontal options let's move it to the end okay now we can have Corner radius let's see if this will also be 50. now uh let's add some margin from so how it works it works from left top right bottom so we will have 0 in general then time and then 10. okay and let's increase the font size for now uh that's 25 let's see how it looks okay or maybe let's make it 30 for now yeah everything and let's say Nifty board font attributes we can have bold italic and underline okay now adding zero okay cool so we are good to go with our Floating Action button now we are going to fill the chat models into this collection view Okay so so to add items first thing we need to set the item source and items source we are going to bind the value from its code behind so we can say binding then we can access this chats collection and we will say thanks okay so now we are going to provide this particular design so you see all these are items of this uh the chats collection so we are going to build these one by one uh not one by one we are going to build it Dynamic so it can render this view so we have image then we have this name and last message time so all these items we are going to create a item template an item template it would be a data template and when we say data template so we can now have whatever design we want to have we can have that so in our particular case we are going to have this sorry so we are going to have this image then let's uh think it as of uh let's say grid so it has first row and column as this image then second row and column as this complete thing then we will break it down further so for now let's have a grid and it will have two columns this time so we will have column definitions first we will have Auto that means whatever size we are having for that particular image it will take that size then star and whatever is remaining the second column is going to take all that now create the first item it will have an image and that image that is going to have source and this Source we are going to get it from the Avatar now we need to tell this data template that the type of each item you are going to have it would be of this chat model so this chat model it exists in this namespace so we are going to add this name space here so we will say it's mlns and let's call it models and we are going to have these models now for data template we can say that data type for you is models of chat model so now we can have this intellisense now we need to set the height and width for this so maybe for now uh let's take it 50 only reason revisit it later so 50 and 50 okay and this should be column one so we will say I'm going to create we've got column so that should be column 0 the first column then put second testing this thing I'm again going to use a grid which will have let's say two rows one row for this name and this time the second row for this last message and this hundred count so now I am going to have second okay but before that let me retrigger it so that we can see the changes live so this dotted Maui with Visual Studio 2022 it has this hot reload feature so we can write anything in the XML file and emulator it is going to pick the latest changes live so we can see the output while we are typing okay so let's see okay so it's here fine cool okay now we are going to have the second you can wait and we will move this to the first column I mean column number one now in this grid we are going to have two uh rows so first row we are going to define the row definition so let's have this Auto now the first row it will have name and the time last message time right um name and then last message time fine so we can have uh multiple approaches so maybe we can have one grid again I like grids so we can have one grid with two columns first one would be having this name and the second one would be having this time second approach would be we can use flex layout with these two items with space between third option would be uh we can use a horizontal stack layout so first item would be this name and the second item would be this uh this time so we have a couple of approaches uh let me maybe uh let me do this with grid only okay I will say can we do something else okay the second approach can be we can have one grid with two columns First Column would have this name and this last message then second column can have this time last message and then this unread count so we can have let's do this okay so you see we can have multiple approaches to do the COI so let's have one grid which will have two columns and the First Column let's say rule space in the second column whatever we need now in this grid we are going to have two columns the First Column let's use vertical stack layout for First Column so let me show you visually so this First Column it will have two items two rows right so for now I am going to use horizont sorry vertical stack layout for this first item would be this name the second item would be this last message okay so let's use this vertical stack layout and it will have two items first one would be name and the tag for this name would be we are going to get it from The Binding so so this data template so how this is working this is taking chat model one by one so if you go to chat model we have these properties after name last message at make time then last message then unread count now we need name and now we can see we can have intellisense support name we have this name so we are going to have this name and the second item so vertical stack layer how to it works it is going to stack your items vertically so the immediate children it is going to put these one above other so like a stack and the orientation would be vertical so you see I've copied it now we can see these two names and if I'm going to change this let's say the last message so you see the last message so now it is having these two items right vertically now we are going to uh make some UI changes so first let's say the name it should be 16 font size okay then it should be pulled bold and yeah it is looking okay then last message and for this vertical stack layout so we can have spacing we can add spacing this spacing is going to add space between these items so let's say five you see now there is a space so we are having this space then okay fine looks okay we are getting somewhere so now uh this thing the second column let's add some padding for this second grid so let's say padding and 10 yeah nice okay now we are getting this padding now here I think the first column is doing good now let's move to the second column second column is this time and this and red come so for now just take time but I'm again going to have this vertical stack layout for this and this should be the column number one and now the first label the same thing we are going to apply here it will have the last message at that time and the second label which would have done that count okay now we need to move this 100 count to write horizontal tax alignment we can save and fine let's add the same spacing put this vertical layout as well we have added five right here so five now you see this time uh this is a complete long date time format and what we have we have here time right so we have two approaches either we can have converters so there is a converters Concept in dotted Maui we can have converters for these bindings so it will be a class there we will provide the what type of input this class is going to have and what would be the output so that we can output that to the UI so maybe in my upcoming videos I will talk more about those so for now uh the short option what we can do we can simply come to this record and we can have some Dynamic computed property let's say it will give a string only and say last message that display and we can compute this so for now let's say I am going to have the last message and I'm going to use this h h 12 Watts clock and then mm okay and I can use this directly within this so instead of last message that I am going to use this property so because this was a C sharp change so we need to retriger the deployment so when there is any C sharp change or any uh page and let's say layout change at that time we need to retrigger it re-run it and if the change is purely on saml side then it will automatically it gets a hot reloaded onto the UI so we can directly see that okay yeah now we are getting this okay fine you see 12 46 0 0 1 so we are having all these now let's yeah and we have this nice scroll also so this is a feature of collection view so in my upcoming videos I will talk more about this collection view also we also have list View and so collection view we can say is an easy and simple implementation of list view so collection view is not uh ideal for all the cases so we can have some complex cases we need to have some custom uh renders or let's say custom templates for items and we can have grouping and all these things we can have using list to be only so not with collection View okay so now you see these Avatar icons these are touching the left eyes of the screen so let's add some padding to this also let's say we can edit some image or we can add it on the grid itself so maybe let's add it on the grid side so let's say with that 10 so if the value is single it is going to add the space the padding from all the sides not padding we can use now here we can use padding also okay the problem is okay bye-bye this padding this is going to add padding because this grid this is actually a single item of this so when we say padding 10 it is going to apply this 10 padding from all the corners Left Right top and bottom but we don't need this right so we need this padding from left and top and not from Top also okay from left only so what we can do we can say 10 0 0 and 0. right so this is left top zero right 0 and bottom 0 we need from left side so we are now having this space from the left side okay looks cool yeah now if you see on the screen we have these options right these three options then this search icon so we are going to add this so we can have a Content template dot toolbar items these are called toolbar items we can have the first toolbar item and we can have the text for that for now I'm adding this text but later I will add icon to this then we have these properties on this for now what we need we need is folder so order primary so let me tell you what is the shorter primary so primary means it is going to be displayed directly on the toolbar and then let let me check on my mobile what options we have okay so we have new group and if we edit primary you see this new group is on directly on this uh this menu title bar if we change it to secondary you see there is this uh three Dot then it is opening so this is the secondary so we are going to add couple of secondary items so I am actually looking at my screen my Mobile screen right now so we have new group and then we have new broadcast and then we have linked devices then we have start messages foreign now we can see here we have all these options okay so okay now let's change the color because in our image we can see the color is greenish and I got that green color from WhatsApp web so I have copied that and let's so to add this color we can directly add a couple of places or the second approach we can have these colors you see this primary color so we can directly change this you see this greenish color yeah so the button color all these colors so these are styles we can have this common style that we can use across the project so maybe in upcoming video I will talk more about this also so this is my first video I don't actually I didn't knew that what all I should tell so I'm just uh trying to see whatever I say and I can tell you at the time I can and else I will try to cover all these topics in my upcoming video so now you can have this so it looks nice now I think we are almost there so this phone size sorry not font size this font type of this font we can change this font family as well so for now it is using the this default font what to change the fonts you can come here you can add the font here in this fonts directory then make sure to when you are copying the font make sure to check the properties build action must be this movie font you can verify it from here or you can verify it directly from the Cs Pros file so you'll go here so by default it actually converts all the items of this fonts folder to Maui font but you can anyway check from properties also then to add your font you will need to go to this Maui program file here so you can add your fold here whatever font maybe uh let's say it's a new font then this is the second item this is Alias so you can say whatever name you want then for this new font you can directly use this new phone inside your xaml so let's say if I wanted to change the font of this name so what I could do I could do font family and I could directly use that new phone okay so this is the way how we can add the fonts so I think yeah we have achieved a lot and this video is going to be long and long it's already 44 minutes Okay so I think we should continue it in the next video for now uh it's my request so please do if you like this video please do like share and subscribe this channel so this is just starting we are going to cover lot of new and exciting features of dotnet Maui and we are going to touch other Technologies as well uh for example Blazer angular react all these things we are going to develop some cool stuff some cool clones and yeah thank you for bearing me yeah bye

Channel: Abhay Prince

Views: 7,850

Keywords: .net maui, maui, whatsapp ui, whatsapp clone .net maui, .net maui from scratch, step by step .net maui, .net maui crash course, .net maui cross platform mobile app, whatssapp ui clone using .net maui

Id: gglcSXvMRHs

Length: 45min 13sec (2713 seconds)

Published: Mon Oct 03 2022