WPF C# Professional Modern Chat App UI Tutorial

all right so this is going to be the application that we are going to create today i've been waiting so long to make this this is going to be a blast now as you can see we can type messages etc etc append it to there it's resizable if i can get it to resize it has a nice custom scroll bar it's movable and all that good stuff so make sure to stick around because i think you really like this one and if you have any questions regarding the code feel free to join the discord server there will be a link in the comments pinned as well as in the description and as always the source code will be available on my patreon link to that will be in the description as well that being said let's get started all right so first things first you want to open up visual studio 2019 or whichever version you're using create a new project we're going to search for wpf and usually it's going to be the first one that pops up this is a.net core project and i click next we can name this um super chat because why not as for the framework i'm going to choose.net 5.0 which is net core there is a misconception about it being dotnet's framework for some reason it's not don't worry create all right so once the project starts it's going to look something like this the theme might look a little bit different for you doesn't matter i'm going to click this vertical split in order to make sure that i have my markup on the right hand side and the designer on the left-hand side just makes it easier to actually look at the application whenever it comes around to it starting off we want to build the actual folder structure so we're going to add a folder just like that we're going to name this mvvm we're going to make a couple of copies of it actually three i made four but we're going to need more so it's okay first one is going to be called view second one is going to be called view model and the last one is going to be called model now we can select all these and group them underneath the mvvm folder so we select model view and view model group them underneath mvpm this last one we can name it core we can copy and paste it again we'll call this themes and one last one for icons just like that now let's start with the actual window properties we can remove the title because we won't be seeing it anyways because we'll be changing it and we'll use our own custom like title bar as for the height we'll set it to uh we'll do 650. the width is going to be 1200 and zoom out a little bit so we can actually see the window great i'll actually zoom in here as well so you can see it a bit better as for the background we'll do something like um 36 hashtag 36 39 uh f yeah something like that the window style is going to be none allow transparency is going to be true and the resize mode is going to be can resize with grip if we run this application by clicking f5 we can see that we now have this window which we can't move yet but we can resize it now we might as well set up the data context straight away we don't have a view model yet but we can easily create one by right clicking the view model folder going to add class i will name this main view model we're not going to write in the code in here just yet we're just going to use it as a data context so underneath window between grid and window we'll do window.datacontext we'll do open bracket main view model oops model self close that you can see that we're getting an exception right now because it can't find it so we need to add the actual xml namespace we can do so by holding alt and enter and then selecting the first one that pops up here we go still a might render but we can just rebuild the solution by control shift b and that fixes it right so we now have our window with a data context setup now given that the the view model is actually you know the data context which is the main view model it's empty so it doesn't have much use yet that's fine we'll be working on the design first now in our grid we want to set up some definitions we'll do we'll start with row definition so we'll do grid dot row definitions inside here we'll do row definition self close that we need two of them we're going to actually explicitly specify the size or well the height of the first one so we'll do height we'll set it to 25 this is for the actual title bar that we'll have up here now we'll do the same thing but for column definitions so we'll do column definition but we need three of these actually we'll go with two the first one is going to have the width of 200 and then while still being inside the the main grid this one we want to create a border which isn't self-closed we want to make sure that it spans over all the columns so we'll do grid.column span we'll set it to two the background is going to be 25 25 25 that's 26 26 we'll do 25 25 25 looking good inside this border we want a grid there we go we want to set the horizontal alignment to stretch here we go we want to create a label there we go set the content to essentially what your what you want your chat app to be named we'll call this bonnie chat because why not we'll set the foreground to gray followed by the font weight we'll set it to semi-bold there we go looking looking so nice and what's really cool about this is you can actually download custom fonts and utilize them as well so if you don't like the the the default font and by all means feel free to change it now we want to add the buttons that are going to be all the way to the right so inside the grid we want to create a stack panel there we go i'm going to set the horizontal alignment to the right the orientation oops i can't spell orientation is going to be horizontal now it's technically all the way over here and we'll create three buttons we'll do button there we go self close we'll set the width to 20 the height to 20 and for the content for you know the x button so we'll do content you can actually use this thing right here i'll be leaving a link to this in description as well i'm going to go with this one because i think it looks nice there we go now we should technically specify a theme for this button but for now we'll just do background transparent and border thickness oops now for the brush border thickness is going to be zero we'll change the foreground to gray and changing the font weight to uh bold and for the other two buttons we're gonna place one right above it this one's gonna be the one to maximize the window and for the content you can use a square essentially searching for something like utf-8 empty square on google's usually going to bring this up you can just copy paste it and we also need one for minimizing the window and the same thing goes here you can just google the uh like a minimize mark utf-8 and it's going to prompt you with one i don't like how low that one is compared to these two so i'm going to put a three pixel margin on the bottom i'll do margin zero zero zero three and that looks way better now if we're to run this application and click any of these buttons they're not gonna really do anything here we go nothing happens and that's because we haven't added any logic to them and there are multiple ways of doing so you can create commands and binding the buttons but to me honestly if you ask me i feel like that's a bit too much considering these are only for this entire view we're allowed to use some code behind it's a very sensitive topic i know a lot of people are going to be like no i don't want any code behind at all when it's specific to this window i feel like it's okay but only if it's specific to this window that being said let's start by actually making the window movable so heading over to the border we're going to add an event called mouse down we're going to make a new event handler we're going to click f7 to enter the actual code behind which we can clean up a little bit there we go as for the border mouse down event when i check if e dot left left button equals essentially pressed so it's going to be mouse button state dot pressed if so want to do drag move and that's how easy it is it's going to clean it up a little bit now if i run this application again and i press the left mouse button and then move it around we can see that the window is now movable amazing all right we can stop debugging the application and let's start working on the buttons let's start with a minimize one so we're gonna add a click event click new event handler see i don't like that it's called button click so we'll change it to button minimize click that makes way more sense we also got to change it in here otherwise we won't be able to find the function to be called this one's going to be easy it's going to be application dot current the main window dot window state equals window state here we go minimized not maximized minimized there we go if we run the application click the button we can see that it now minimizes amazing the maximize button is going to be a little bit more complicated it's going to be three lines of code rather than one don't worry it's going to be super easy though so we'll do another click event right here new event i'm going to call this window state button click heading into the code behind changing the name now we'll make the code super readable by doing if application current dot main window dot window state not equals window state maximized so if the current window state is not equal to maximized and we click the button then we want to change it to maximized so the application current dot main window dot window state equals windows state maximized else we just want to bring it back to normal so the application current dot main window dot window state equal window state window state window state there we go normal we can clean this up a bit there we go now let's try it out click this one it's maximized and it's back to normal easy and the last one which is arguably the easiest one as well we'll do click new event handler we'll call it close button click here we go heading into the code behind and let's see application.current.shutdown that's how easy it is right so the border is now done we can minimize that one so we don't have to worry about that one now we're going to continue with the actual contact list on the left hand side this is going to be a grid the background is going to be slightly darker than the actual background of the window we'll do something like uh 2f3136 i believe i guess we're about to find out once i actually oh yeah it's all the way up there let's change the row we'll do grid.row one oh yeah that's looking great we want to add some row definitions grid.row definitions we'll add the three of them so we'll do a row definition there we go self close the first one is going to have the height of 50. the last one is going to have a height of 60. there we go now underneath the row definitions we'll add a label the contents going to be contacts vertical alignment center font weight we'll put at medium for ground we'll put that gray it's looking great i just want a little bit more margin coming out from the left so the margin eight zero zero zero yeah it's looking pretty good underneath this label we want a a list view which we can self-close the item source we're going to be doing binding and we'll bind it to contacts now looking at the main view model we obviously don't have anything in here yet but we'll get around to it we'll change the background to transparent the border thickness ooh not the border brush the border thickness to zero the grid dot row to one so now it's down here the selected item and there isn't a whole lot more we can do without actually creating a theme as well as adding some things to the main view model so let's start by adding a theme right clicking the theme folder we'll click add resource dictionary we'll call this contact card and this is actually going to specify the look of each item within the list view so each list view item will inherit this theme we'll start by creating a style can't even spell there we go style we'll do target type list view item x key it's going to be contact card well as on style triggers we'll do a lower trigger with the property is selected values true oops value true then what we want to do is we want to create a or we want to do use a setter with the property background change it to a slightly darker color to indicate that it's been pressed or that it's selected so we'll set the value of i don't know 29 to be 2f should be good now underneath the triggers we want a default setter for the background so we'll do property background because this is going to be the default background of the actual item itself value a slightly lighter color i guess we'll do something like 39 3b40 3 b 40 i believe that looks about right now the last setter is actually going to be for the template itself so we'll do setter and we're not going to specify the property here actually we are we'll do a template and we'll specify the value down here so setter value and it's an open tag so we'll do control template we'll set its target type to list view item we'll create a border which isn't going to be self-closed we'll bind the background to begin with it's going to be a template binding so we're actually going to bind whatever we're setting it to be as a property so whatever the background property is that's where we're binding the the border background to the height is going to be about 50. the corner radius making it have more round corners to four and we also want some margins so the items aren't like it doesn't look like they're connected with one another and since we added eight to the left on the actual label previously we'll do it here too we'll do margin we'll do eight from the left two from the top eight from the right and two from the bottom now you can look at it as the frame of our contact card now we actually want to add some content to it so we'll do a stack panel orientation horizontal we'll add some margin here too we'll do um 10 from the left and then all zeros and since we're not pulling any data from an actual api we'll just create a border with the rounded corners essentially an ellipse that looks like a profile picture this can be easily bound later on instead of using a border you can use a image control and just bind the source property but for now we'll do border self close the width is going to be 30 the height is going to be 30. the background is going to be corn flower blue and the corner rate is going to be 25 which i think is a bit excessive but it's going to make it round right now next to the circular profile picture we want to display the user's username and the last message that they sent or well i guess the last message within the chat not necessarily from that person we'll do actually we'll do a stack panel and within the stack panel we'll put a label we're actually going to put two labels so we can copy and paste that one right now the content is going to be bound binding well it's going to be bound to the username property now again don't be confused we haven't declared anything within the main view model yet so this this username property is not non-existent but it's going to make sense as soon as we start working on the main view model and the models it's all going to connect real easy the foreground is going to be white and we'll mess with the margins once we actually see what it looks like this one's going to be the same it's just going to be bound to last message and the foreground is going to be gray we also want the font size to be a little bit smaller so we'll set it to like 10 font size 10. and that's pretty much it we can now change the the item container style so item no we can't because we that's my bad we gotta go into app dot samo in here you wanna create a resource dictionary followed by resource dictionary dot merged oops dot some merge dictionaries in here we're going to create a resource dictionary self clause with the source with the source and then we'll get a point towards the themes folder and the actual item it's going to be dot slash themes slash con contact card dot saml there we go now we can actually use it so going back to our main view undo item container style it's going to be static resource and there we have our contact card heck yeah now nothing's displaying because we don't have any contacts yet all right so now we actually want to add some contacts i'll start by creating a contact model by going to model creating a new class we'll call this contact model we'll add some properties such as prop tab tab we'll do string user name now we'll do a image source as well so we'll do prop it'll be of string too we'll call it image source there we go uh i mean it's they're gonna have a collection of messages as well let's create a message model as well we'll do message model it's going to contain a string which is going to be username we'll do a username color username color color and we'll do a image source as well so image source obviously a message so the prop string message the time the message was sent it's a good one so do date time we'll call it time you know spelling it correctly would be nice too we also want to check if it's a native origin and that's going to make sense later prop bull is native origin essentially we want to check if the last message was from me we'll also do a bool checking whether or not it's the first message and we'll make it nullable by adding a question mark right next to the bool going back into our contact model we can now add observable collections we'll do prop observable collection importing the namespace will make it of type message model there we go we'll call it messages and we'll also get the last message by doing prop string last message and we'll just use a a lambda expression to indicate the body we'll do lambda and rather than doing this we can just specify messages dot last using some link and then we'll get the actual message there we go all right now we can actually do some cool binding stuff so heading into the main view model which we have right here we want two collections we want a observer observable collection importing the namespace of type this is going to be message model we got to import that type as well we call this messages we can duplicate that one change the type to contact model we call this contact we'll add a constructor by typing ctor and then tab tab in here we'll instantiate the two collections that we just created so message s equals new observable collection of type message model and same goes for contact contacts and change the type to contact model there we go now obviously in order to showcase items we need some items to showcase obviously and these collections are empty so we'll go ahead and do messages dot add new message model we'll do a username it's equal to alison the username color is going to be equal to a hex value in this case we'll do 49a ff image source is going to be i guess whatever image you want i'm just going to pick one from google real quick there we go the message is going to be test date time oh it's just time it's going to be equal to date time dot now its native origin is going to be false first message however is going to be true and talking about what i said earlier regarding appending more messages let's go ahead and do that we'll do we'll copy this one we'll do a for loop we'll iterate through it three times paste it in here instead of first message being true we'll put it to false and we can copy this again now the reason to why we're doing it like this is because we don't have a external api to pull in the data from if you do then great that's what you should do but in order to provide some data for visibility's sake this is what we're going to do so instead of three we'll do four we'll change this to bunny bunny is native origin we'll put it to true we can remove this line right here then we'll add one outside of the loop as well like so we'll type last rather than message or test and then i guess we'll create five contacts based on all these messages there we go five contacts add new contact model the username is going to be equal to we'll do string interpolation now obviously you want to get the names based on these each message but for simplicity sake we'll just do something like this now the image source is going to be something that we just pull off with google and the messages bound to this contact is going to be well messages now since we already bound the um the list view to contacts we should be able to see five contacts yeah look at that we can also click each item how nice we can also move it around heck yeah now if you'd rather use the image than the actual you know blue circle what you can do is you can create an ellipse open it up do ellipse fill open that up i will do image brush soft close image source we'll do binding image source and the ellipse is going to have the the width of 30 height 30. running the application we can now see that it uses the image that i specified earlier what we want to add now is this bottom thingy which we'll specify underneath the actual list view right so going underneath we'll create a stack panel open it up we'll do grid dot row we'll set it to 2 because we want to specify that it's in here orientation horizontal the background is going to be slightly darker something like uh 29 2b 2f yeah that looks good let's go ahead and add a border which is we're essentially creating the blue thing we created earlier but over here we'll start by adding the corner radius we'll add it like a 25 the width it's going to be 30 height it's going to be 30. the background is going to be we'll do a green color we'll do 3b ff6f also specifying a hashtag in front of it i really like that color right now we're gonna add a margin as well in order for it to line up with everything so ten plus eight that's eighteen do margin we'll do eighteen from the left zero zero zero there we go now right next to the border since it's going horizontal we want to create a stack panel where the orientation is actually going to be vertical as it is by default so we don't have to change that what we will change however is the vertical alignment we'll set it to center and we'll add two labels first one is going to be bound to well actually here wouldn't have anything to bind it to since we don't have a like a profile model yet so we'll do a content say username set foreground to white font to wait it's going to be semi-bold here we go we'll copy and paste this like so instead of a username we'll do a custom status change the foreground to gray font weight it's going to be medium which is essentially the same as not yeah we'll keep it at semi-bold set the font size to something smaller so font size we'll do like 10. and now we got to fix the margins because they're way too far apart so doing it on the first one we'll set margin to um zero from the left negative five from the top zero from the right and negative five from the bottom as well we'll do something similar to the second one as well maybe negative eight on the top yeah all right that looks great all right let's run the application to take a look at it looking great so far now you can't obviously mess with the sizing of things if you want things to look better oh we also got to change the this thing that i don't like that right so we're essentially done with the top bar the left hand side now we're just gonna be able to display the content in the middle right so we can actually minimize this there we go and this thing is gonna consist of three rows so we're gonna have the top row for our username and you know the call button and whatnot the middle is going to be reserved for the messages obviously and then the bottom is going to be reserved for you know typing the messages all right final stretch you got this so we'll start by creating a grid the column is going to be 1 and the row is also going to be one grid.row definitions since we needed three rows the row definition first one's gonna have the height of 50 and this last one the third one is gonna have a height of 70. starting off with the border at the top create a border it's not going to be self-closed it's essentially going to be the same thing as we had up here just a little bit different so we'll do grid which isn't self-closed horizontal alignment stretch we'll add a all around margin of eight we'll add a label the content is going to be uh at the username the foreground is going to be white font weight is going to be bold and the margin is going to be 5 from the left 0 at the top 5 from the right and 0 at the bottom vertical alignment is going to be center making sure that it's centered and that's looking good to me now we also want to add some you know the call button and the camera button on the right hand side so underneath the label we'll do a stack panel orientation is going to be horizontal and the horizontal alignment is going to be right i want to create two images here image self close the width is going to be the height is going to be the same so 20. we'll do render options dot bitmap scaling mode we'll set it to fan we'll add some margin here we'll do five on both left and right so we'll do five zero five zero and we can't forget the source now i went ahead and added four icons it's gonna be a camera a phone a plus sign and a send icon i guess we're gonna change the build action to content and copy the output directory copy always now as for the source is going to be dot slash icons slash phone.png i believe yeah we'll copy this one paste it above it we'll change this we'll actually change the bottom one to camera yeah right look at that there's nothing missing it needs a border so going back to the border that we specified we'll do a border brush it's going to be a bit darker so we'll do 2f 3136 the border thickness now you can specify this just like how you do with the margins so it goes from left top right and bottom and we want to have a border at the bottom so we'll do 0 0 0 and i don't know 2. that's looking so nice look at that we're almost done now we can minimize the border and now we're going to add a list view this one's going to be pretty simple it's just going to be a list view the item source is going to be bound to selected contact dot messages because we're going to be selecting a contact and we need to bind whoever we select to a property we're going to get that property and then we're going to get the property within the selected property does that make sense if not it will in just a sec we'll add a background property a lot of properties now transparent border thickness going to be zero item container style we need to specify a style for that so we'll do static resource and we're setting it to something in just a sec uh the margin we want to keep the eight margin theme going so we'll do margin eight zero zero zero and we also want to specify the correct rows we'll do grid.row and set it to one now for the item container style let's go ahead and create a new theme so do add resource dictionary we'll call this chat item and we're gonna add that and as per usual we'll create a style we'll specify the target type that we're styling which is list view item the x dot key so we can refer to it later on we'll call it chat item we'll do a setter the property is going to be template we need a setter value we'll create a control template right here followed by a stack panel oop stack panel there we go orientation is going to be horizontal same thing here we're going to create an ellipse just like that set the width to their oop we'll set the width to 30 the height to 30. we'll add some margin to it so we'll add 10 on the left 0 0 and then negative five i think that'll be fine we'll see we'll do ellipse dot fill it's gonna be an image brush we're gonna bind or we're gonna the image source is what we're gonna bind so we'll do binding set it to image source render options bitmap scaling mode and we'll set it to fan we'll clean that up a little bit there we go and underneath the ellipse we want a stack panel with the orientation being horizontal yet again we'll add a label the content is going to be bound to the username so binding user name the foreground is going to be bound to the username color binding so username color font-weight it's going to be semi-bold the vertical alignment is going to be center and we also get add some margin we 0 0 negative 5 and 0. then right next to the username we want to display the time that the message was sent so we'll essentially just copy this save some time paste it in the content is going to be bound to time obviously the foreground is going to be we'll do gray for now i want a slight slighter darker gray so we'll do 44 47 for d yeah that's going to be good we'll keep it at semi-bold we'll change the font size to a bit something smaller change to eight vertical alignment center and we don't need any margin and it changes to the margin at least um right and then we obviously won't display the message as well of course let's let's actually wrap the stack panel that we just created this one inside of another stack panel so we can actually stack this on top of the message so we'll we'll see the message underneath the username at the time so we'll do stack panel and since the orientation is vertical by default we're going to need to change that let's move this into there and in between these two we want to create another label we can copy this one paste it in there binding is going to be message foreground we'll set it to white font size is going to be whatever the default is which i believe is 10 or 12 14 perhaps vertical alignment center and yeah that should be good now the last thing also we're getting these exceptions because we haven't bound anything yet or there's nothing to bound to but there's nothing to bind to now don't worry about these uh warnings and these two errors well we'll then that'll be fixed in just a sec now the last thing we need for this theme is underneath the setter when i do style dot resources i'll do a control template here we go we'll give it a key of custom row we'll do a stack panel orientation is going to be horizontal and we'll create a label in here we'll bind the content to message the foreground white and the margin is going to be slightly bigger because this is going to be the actual message if there's no image so the thing that i explained earlier where we append the message underneath a message that has a image on the left hand side this is essentially what we're styling right here so on the left hand side we want to do 40 to make up for the non-existent image we'll do negative two zero negative two and now we're going to implement something that actually checks for whether this is the first message when to use the style with the image and when not to do so and that's so easy using data triggers is one of the coolest things with wpf i'll show you right now so we'll do style they're triggers add a data trigger the property or i mean the the binding it's going to be binding and we'll do first message and the value if the value is false so if it's not the first message because we only want to display the profile picture if it's the first image or a first message right so if it's not then we'll do setter property property template value static resource and where's the custom row i want to self close that as well all right let's go ahead and apply this chat item so heading back to mainwindow.sample actually before doing so we actually got to specify it in the app as well to register it globally so we'll do chat item here instead of contact card and now we can go ahead and add chat item here heck yeah and changing the border brush to border thickness obviously now again we're having the issue where we can't see any messages even though we actually have data now but we've bound the item source to be the selected contact and we haven't selected anything yet and we also don't have a property named selected contact and that's what we're going to fix now actually let's finish off this first before we start adding any logic so let's add the chat message box at the bottom and then then we'll go ahead and fix the view model so underneath the list view we're going to have a grid set the row grid row to 2. we're gonna add some column definitions heck yeah we're gonna add we'll add two of them the bottom one's gonna have a width of 90. looking at it we can see that it looks like this i actually want to reserve this space right here for the two buttons that i'm going to add so let's go ahead and add underneath the grid column definitions we'll add a text box not a text box but a text box set the row to grid row to one we'll set the height to about 50. the text is going to be a message at username this style we're gonna have to specify a custom style for this because wpf does not have a watermark feature for the text box which i think is completely absurd and it should be implemented but for now we gotta make a custom one which isn't that hard not hard at all actually it's something that's pretty cool but we'll get to that so we'll do style static resource we'll do we'll just call the message box we'll do column span columns column span there we go set it to so it spans across the entire thing and that should be good underneath the text box we want to create a stack panel you guess that the orientation is going to be horizontal the horizontal alignment is going to be right and the grid dot column is going to be 1. we'll add some margin to us as well so margin we'll do zero on the left here on the top we'll do 16 on the right and zero at the bottom followed by two images to uh you know instead of so here's the thing i'm using images rather than buttons right now because it's easier to style obviously if you want to add functions to this you'd want to use buttons bound to relay commands for instance but we'll we'll get to it but for now we're going to do it like this so we'll do source not cursor source dot slash icons flash we'll do plus dot png that's plug that's plus oh that's okay uh not the size that i was anticipating i'll do width 20 height 20. render options bitmap scaling mode fat we'll add some margin to this we'll do margin we'll do five five five zero that looks centered to me we'll also add one underneath it's gonna be five five five sixteen yeah and instead of plus we'll do send there we go now the only thing left to do is style this and then display the items in here which is pretty easy we'll start by creating the message box theme so we'll do add resource dictionary called message box we will create a style there we go the target type is going to be text box the key is going to be message box setter property we'll do foreground value great we'll add a couple of ones we'll add font weight medium i will add a margin of eight there we go let's do a template setter so we'll do setter property template as always setter.value will add a control template with the target type of text box followed by a border with a corner radius of 8 because we want to make it you know the actual message box a bit rounder the background is going to be something like 3e 4147 inside the border we'll create a grid followed by a text box text box which we won't self-close because we're going to add some input bindings for the style however we'll do a vertical alignment we'll do stretch vertical content alignment center because we want to center the text that's inside horizontal alignment not horizontal content alignment but horizontal alignment here we go it's going to be stretch we need to specify a name so we'll do x name we'll call it message box the background is going to be transparent text wrapping is going to be wrap the border thickness it's going to be zero foreground gray carrot brush gray and the margin that's always going to be eight zero zero zero and the text property we're going to do some bindings we'll do binding message mode it's going to be two-way update source trigger update source trigger is going to be property changed all right that's a lot of properties i'll do text box not style but input bindings there we go we'll do key binding self close it's going to be bound to a command binding it's going to be send command and the key that we'll use is return what this is going to do is we're whenever we click enter on the keyboard or the return key we're going to be calling upon the send command which we'll specify in the view model in just a bit now here comes the part about text boxes not having you know watermarks that whole issue so we're essentially going to be masking it we're going to be having a text block which is going to act as the the watermark and whenever the text property whenever the value is you know nothing or it's an empty string we'll change the visibility to visible so underneath the text box we want to create a text block which isn't going to be self-closed is hit test visible false the text is going to be at message vertical alignment's going to be center horizontal line is going to be left margins margin is going to be 10 0 0 0 and the foreground is going to be dark gray oop dark gray the text block style not text but style let's create a style in here the target type we're going to do x type text block the target type is going to be text block setter property visibility so this is what i was talking about visibility value it's going to be collapsed there we go and going back to data triggers there i was talking about earlier and how they how cool they are we're going to use them again so we'll do style.triggers we'll add a data trigger the binding is actually going to be here let's see binding text which is the property of the element name or of the the element with the element name message box which we specified earlier up here and the value if it's nothing or well an empty string undo setter setter property visibility visibility value visible right that was kind of a lot let's go ahead and assign this now so we got to register it first and the app.tamil we'll do message box just like that go into the main window we can see this right here look at it looking so good let's try it out let's run the application see if everything works i click it i start typing something and the watermark goes away i love that feature all right so now the only thing left is to i guess fix the main view model let's head into the main view model now we're gonna add well we're gonna add a command for the actual when we click enter because then we bound it to a command which is non-existent as of right now so i'm just going to do this we'll do commands and it's only going to be one and we also need the selected object right so uh we'll do uh it's going to be a full property it's going to actually we'll do prop contact model select that contact there we go because we're not changing this one from code we're changing it from the view so it'll be fine we also need the the message property for the text box when we're sending things right and we're changing that value from code or we will be because we want to you know reset the actual text to be nothing again whenever we click enter so we'll do prop we'll actually do prop full string underscore underscore message message here we go and this is going to inherit you know it or it's going to call on property changed now if you haven't seen my video on i notify property changed and this is confusing to you then feel free to check it out otherwise just follow along and you'll be fine so we're going to go into core add class we'll call this observable object right so we're going to inherit from i notify property change just like that and then we're going to in import the namespace like so we'll actually we'll implement interface as well and we'll do on actually void we'll do public void because we need to be able to access it public void on property changed and we'll add an attribute caller member caller member name there we go we'll import the namespace there we go string property name equals null now we're going to check if the property changed event is null if it's not if it has a subscriber then you know invoke the object descenders this and we need new property changed event args which is going to be property name just like that we can close that down now we can inherit from observable objects just like that we'll import the namespace and we're going to call on property changed right there right looking good we also need a relay command and the relay command it's it's about 40 lines of code um in order to save some time on this video because it's already pretty long i'll probably fast forward this and you can go ahead and pause the video and just like check out the code if you want to all right so this is the entire relay command there might already be a video up on my channel where i explain the relay command and how to use it yes for now again just to save time this is out of the scope of this tutorial so let's not dive too deep into this let's head back into the main view model and actually create the commands we'll do prop relay command we'll call this what was it called send command i believe we'll clean this up a little bit we'll minimize that we'll minimize this thing and now we get instantiate the actual command so we'll do uh inside the constructor we'll do send command equals new relay command o goes into another's function now when i add the messages we'll do messages add new message model here we go just like that and post that off the message is obviously going to be the message property that we specified above and the first message we're going to set it to false this logic would change based on various parameters as for now we're keeping it at false and once we've clicked it we want to restore the the actual message property so the message equals and just an empty string just like that now if we run this we should be able to type things in and click enter it shouldn't show anything yet because we haven't you know fixed this part but as you can see we can type and click enter and it it's as if we're actually sending a message now the last thing that we need to do if we head over to the main window.saml is head over to the actual contacts list we want to bind the selected item in the contacts window so we'll do selected item and binding and then the selected contact and now since we want to change or we want to update this piece of ui right here that means we're going to have to go back into our main view model which we can find right there change this property right here to a full properties we'll do prop full it's going to be of type contact model it's going to have a selected contact just like that got to update that over here and over there and it's going to be selected contact there we go underneath here we'll add on property changed oops on property changed there we go clean that up and now when we run this we should be able to see all the chats just like that now i i use the same image for both of these changing that is super easy let's just type try typing something as we can see we can now add messages here as well amazing now if we want to fix the whole image thing what we do is we head over to where i added money and changing that image right here now everything is essentially done the last thing which isn't even like necessary but it's just like a nice feature it's this whole scroll bar here to me it looks absolutely disgusting and i would like something that looks way better so i'll be adding a stylish scroll bar uh i'm gonna go into theme resource dictionary i'll call it stylish scroll bar and i can't for the life of me figure out where i got this style from nor if i've changed it at all i've had it laying around for a while so that's the one that i'm going to use i will be leaving a link to this style in the description and we're not going to go over the entire thing because as you can see it's quite a lot so once we have that we're actually going to just register it within the app as always stylish scroll bar there we go and that should be it let's go ahead and start this select a chat resize it and as you can see we have the custom scroll bar right there heck yeah right and the buttons they they work and i think that's everything if you have any questions please make sure to join the discord server i'll do my best to answer your questions as soon as i can if not we have a lot of talented people in there and as always if you enjoyed the video please make sure to subscribe it really helps out a lot that being said thank you so much for watching i'll see you in the next one

Channel: BinaryBunny

Views: 119,911

Rating: 4.9560213 out of 5

Keywords: chat app, wpf chat app, wpf tutorial, chat app tutorial, how to make a chat app, desktop chat app, how to code a chat app, wpf design tutorial, wpf guide, how to code, csharp, csharp tutorial, how to code csharp, how to code wpf, wpf 2021, modern design, wpf moder, modern ui tutorial, chat app design, how to chat, modern chat app tutorial, how to code discord, discord coding tutorial, discord chat app, discord bot chat app, wpf chat, easy

Id: V9DkvcT27WI

Length: 54min 42sec (3282 seconds)

Published: Mon Aug 09 2021