C# WPF UI Tutorials: 14 - Create Chat Message Bubbles

[Music] carrying on with the Cozzetto chart application the next thing we want to do is these chat bubbles here before we do that though I've noticed a few things that need doing so I opened up this original screen capture we did to look at what we need to do here and then I just press that v and spawn up our application and click the log in and then I was comparing where to go here and I noted there any small things but I noticed if we look at the size of these here there's quite a bit smaller than you know this one here so the first thing we'll do is correct this a lot of control I've also noticed just that we've lost our drop shadow that's probably going to be due to when we change the this padding into a margin with the animate so it just cleans up like to a padding see if that fixes that yeah there we go so we've got the drop shadow around the control back now which we seem to have lost to make sure that animates in okay still yeah okay starts okay so let's just fix this first and then the other thing I've noticed is the font sizes we've mentioned a few times I don't really like the font sizes let's start with this chat list I can control sama and right now we bring this over we give this a set height of 60 and I don't think that's really a good idea is you know setting the the main controls size because we want it to be based off the content so let's just delete that first let's rethink this and you can see now that everything is obviously all messed up and squashed and things so let's just fix that we need let's see I think we'll use the profile picture which will always be the biggest thing based on this the profile picture is going to be bigger than the text so let's use this is the thing to explicitly size and get it to make the control the size we want based on the padding so give it a set high to say 40 which didn't do much it's also add padding to the top and bottom give it a bit more space okay that's probably not a place to add this tab let's see profile picture backgrounds drive down steps a minute so we want the safe hike here to there we also resize the profile picture this was just the padding around the picture let's change the padding around the picture that was okay to give you that bit more space and then set the profile picture hike explicitly and that's kind of replaced the 60 size so is now the 40 plus 30 because 15 topper bomb so we've sort of simulated their size but now we've we've not defined explicitly so let's just see what that looks like compare it to the image that's a lot closer it's not spot-on but it's good enough this font also looks slightly too small but there's also the issue that we want to rename all these fonts anyway and we want to create some more sizes so let's just go to fonts and this is what we didn't like we we started with 14 20 and 30 and then realized 20 is a bit too big so we added 18 and instead of going back and renaming everything that you'd regular we were a bit lazy and I just stopped one in the middle called average which is not really you know what we want to do so let's first start by making a smaller one make that 10 will change the small just slightly to 12 and then the regular will shift right down so the first thing I want to do now is make sure wherever we using font size small so ctrl shift + F with the tactile app it'll automatically open this find and replace and pre fill it with this text entire solution and then just press Enter we can see it's actually not used anywhere so we don't need to worry about changing this more so that can go down to 12 we now want to delete this out we call together which is currently 18 and well let's think the size you'll probably want to go 10 12 14 20 24 sort of things so I'd say the average and regular we can kind of mix together really because 18 and 20 are close enough I think we'll just merge the two so let's just search for anything with average and just change it to regular so ctrl shift + S + Enter now exact this one spot here let's just change that to font size regular let's just delete the average and we're going to change regular now to say 14 which is like your normal text size on the screen which is what we want in a regular X is expected to be that I guess this is going to be used in a lot of places so we first need to find out what we're going to replace it with so copy and paste regular the next one up would be large what we've already got large so just ignore this for a moment so let's just call this one so it'd have been confused actually we're going to have to do this in slightly different order let's start with large so it can replace all the large first which is quite a few of so large it's 30 we're going to in fact we can do this really easy let's rename font size large because I think that's a pretty big font let's call that extra extra large and all we need to do or but select the font control shift and H this time instead of that as I find and replace this is fairly dangerous if you do this wrong to make sure you doing it right it's prefilled the box with what we selected font size large it's going to replace it with XXL so you just type in exactly the type what you want to replace with it here so we're going to replace it with extra extra large and in the entire solution so better man this is going to find every single spot in your whole application where this text is and replace it with this so you'll be very careful when doing this if you don't want to do it this way just find all instances like I just did manually double click on each reference and go in edit them one by one so we're just going to do it like this find replace all press Enter okay that should okay go down here and just click replace all and it's going to warn you as well but it wants to open all the files so that you can undo one at a time if you need to it's just kind of warning that this is a fairly large operation and can replace a lot of things because yes I guess you've replaced eight instances so now if we debate just save that seat open these files for us because it's changed them so there must be a a font extra large in here somewhere now which is there so we opened that Visual Studio open these files with the a strict on these three when it found and we placed all the fonts with that XXL or extract four large so if we do they find all mounted control shift and app on that we should see that all the places that did have large and our extra large so we bumped the large often give it a new name now we can get back to this red glow which is the most difficult one so let's see Hughes there are a lot of places in fact it's actually not used and as much as I thought so we can do this manually I guess so we need to replace this regular which is currently 20 we want to use that with we'll call it large and then we'll settle extra large in between so we can do the same thing actually control shift H we name font size regular - font size extra large or now larger font size large and then replace all that's not replaced everywhere that used regular with large now a frigate makes a few more sizes that didn't exist so we'll make an extra large of say 24 and finally we'll make the new font size regular but it's now no longer used anywhere at the moment of what did we say 14 say so now we've got decent SATA sizes with the name that's really appropriate the next thing I noticed is we never set the regular font size whenever we set the font family so that all the fonts and all the styles naturally inherit the default font family but for some reason I probably over we never bothered setting the default font size to sort of standardize the font size so let's do that here is well so now let's do font size and make everything our new font size regular by default copy and paste that to this one and then all the other styles inherit so now if we build I'm expecting this to look slightly messed up because we've done our changes there in front but we've now got a decent font size all the controls should by default go to the regular size which is smaller and we moved everything that did explicitly stated font to a new place yes and I can see everything has gone a little bit wonky but let's fix these so email actually looks okay passwords are clearly small but the password text itself says they're placeholder behind is small so let's just fix that one so that will be in the text slam old file password box so we're specifying the font size here my guess is we're not passing it into here they're overlay now as we've got font family so let's specify font size and just use the template font size because we've already specified the font size up there so let's see if that fixes that that's fixed a password that's good these are now smaller let's take a look at them the login button so that'll be on the buttons text and that a is I think a regular bun we called it something like up regular button so again we've specified the font size but it's not using it so this looks like it hasn't inherited the font size these two a lots of spinning yes or both of them need it so similar things do font size template binding font size and that's for the text of the button and then also paste it in for the spinner press f5 and what's run again and confirm that that looks like it originally there's and the spin is fine so we can also see this will come to this in a minute so the other thing is the text here which is a text button so we'll carry on looking down and fact I'll copy and paste this font size templates I'm guessing that's going to be exactly the same text bottom yep font size they're large text block doesn't have it so paste font size template binding into there as well f5 and let's see what's fix that so let's fix that which is good so the login screen and the register screen look like we did this logo looks ok so let's login now this menus messed up so we'll fix left where is the side menu control that was a good guess then we've got for us it's a button style it's an icon button so it's going to be 13 exactly the same thing again so go to the button style glama which we were just in and there's an icon button there font sizes set again text block font size and set there so let's set it there and that's it let's run that this is actually fairly painless I thought this would be a lot more work than this but it's not too bad now let's fix that so I think that's everything not sure whether this I'm happy with let's double check okay so there's a bit more white space here when we did the Photoshop between these two texts that's that does actually make it look a lot nicer on the eye so let's just add that and then I think we're good to start making the chat bubble let's go to the chapel list item control I think it is there we go we have the two text box here the zoomin Alumnus this is the name which won't highlight at a minute and this is the one below Souls you want to do without a padding to the top one on the bottom so underneath the racket that will be left 0 cos 0 right 0 bottom let's do 3 stop small then on the other one let's add the opposite so we want at the top to left top now it looks a little bit much as goes it - that looks better press f5 and let's see what this now looks like yes better so I think I'm okay with that that'll work well let's get on to this shaft bubble first thing we'll want for that is a new control we have already a shot list control which is the list let's just copy and paste that then we'll reuse this for now we will keep everything the same except this which will need to be and new when we make the new item it will be that so let's just start by renaming this so this is a chat list control runs the chat message list control now press f7 go to the code-behind shut message list control control click to select that control C to copy ctrl click to select that control V to paste that's just a quick way to copy and paste between things so you want to like select that and paste it some rage at hold the control key keep it held the whole time click let us see cliff letter B that's like a you know a quick way to to copy and paste something like that so that we've renamed the new copy of the class to a chat message less control hover over the class click the bulb here and we can rename the file which is currently called chat less controlled copy and I'll rename it to the same as the class name here so you'll see that in solution Explorer we turn that around and you can see it's currently just named this copies are more which we copied we collect the lightbulb rename file you'll see now that kind of works kinda didn't that's unusual that's not to leave huh never done that crook ah we didn't save this file so coming undo that no okay let's just rename that baton manual so there's something you learn the but let's just delete that and start that again copy the chat less control so it's the copy file open this call this chat message list and save which is what we didn't do before press f7 rename this to shut message copy and paste save we can also rename it there and now hover over here click and click rename file and we should see this zamel and the code behind me name otherwise we we all actually found a bug in Visual Studio so that didn't work so it looks like this rename file doesn't work for glamour files only me names the underline class so if we rename that manually that should have automatically put buttons out of there maybe we've got build the project now okay let's do this one more time and so in that case that's a useful thing to know don't use the rename file helper on a sample so stead let's just manually rename this top-level example the chat message less control and you'll see inside then it renames the cg art file correctly so i'll have to recall that the visual studio is a book one last time chat message to us control press f7 message let's control copy paste into three places save as build to make sure that builds which it does so all we've done there that was a little bit long-winded because we were showing you a technique that clearly doesn't work on thermal vials at the moment all's we did was copied this chat less control renamed it to chat message less control inside the code-behind class here and here and also in the szarmach here so i just saved us having to remake her you know a child basically a scrollable list with an embedded control which will change in a moment now we want to make the actual chat list bubble or the chat message we'll call this chat message list i can control to keep the same naming convention add user control chat message list item control and that creates this new control what actually add a new folder to make this a bit more organized because this is going to start growing with a lot of controls move the chat message into chat message and the chat list included the list folder so now we have the chat message list item control a brand new control let's just move that out the way men get rid of the extra namespaces of ads here just to set that word get rid of the bit there such as presented awkward and then the name f7 to go to the code behind remove the namespace here as well and then we move all these unused see the slightly gray it's not very clear on the dark theme what this it's a slightly grey of text and the ones that are bright y2 used so the only thing that's used is the controls so I just clean up all the unused ones ctrl shift B to build again build twice maybe yeah okay and then let's just use this so let's just change the grid to say red save go to the chap message list control we made and let's replace this with best chat message list item control which should just be red blocks and they look why to the minute but let's just add some text as well answers here we can see anything I should from run actually will have to add that somewhere so we can see it in the run close that so we have a chat message item control let's add that to the main connected chat tamed isn't it yeah trap page and then in this chat page we just put hallo for Seto in this text block just replace that with the chat message list control now we can see we have a bunch of just read a message boxes which is the control so we can see login and there we go we've now a list of controls which has just got you know static content to the minute and these the number of items here is because when we copy and pasted this chat message or less control we kept this data context of chat list design model instance so we press f12 on that we kept this so right now we're bound to add chat list item view model which is not right because we want a new chat message item view model but for now it basically added these items so we've got this number of items that are bound to this list which is the wrong style now but we won't bother about that for now let's just make the bubble control that'll keep us going let's close these down chat message list eyes this is the chat bubble now so first thing I want to do get rid of this design height I don't want to specify a height at all I want to actually define it based on what we put in here so now we're at the point of doing the actual chat bubble I think everything else is done bar this this is going to be a huge control by the way as well so even though right now in here it just looks like text you imagine your modern chat application you're going to have phone numbers emails pictures videos music all in these chat bubbles you're going to expect to be able to somebody send you a picture you want it to appear nice in its own bubble borderless have you got a video you want to be able to display directly in here have you got multiple videos and multiple pictures you probably want to either instead of dumping them in one big line we may want to do that but we may want to add a sideways list too if there's a hundred pictures you don't want it just a dumb ponder picture in a big row you might want to collapse them so you'd have to make that control as well if you get a link to say Google Maps you'd expect a map to appear so there's a lot it's going to go into these bubbles so this bubble will make in now which is just called chat message list item control I'm pretty sure we're going to make this a host that then injects each specific I can control into there so it would injective this just text and the message it would just inject the text bubble if there's photos it would inject the text and then the photos or the photos and the text and so on so to construct a bubble based on the content or multiple bubbles based on the content so it's going to become a lot more complex than this but we need to get started so what will make this general chat bubble as it appears now but bear in mind this is going to grow significantly so we'll make the start anyway so the first thing we want to do is have just four I guess so we can visibly see while we're designing a single one let's make a blue background and then we'll remove that once we're happy with the design so let's just change us to a border background of the blue color there we go stuff the blue we're expecting it put a little bit of padding there just to move it away from the very edge when we come to put the bubble next we'll do a grid then we will want let's do I'll just be a boarder with a corner radius so there will be a boarder still corner radius of 10 for now and we want the background to be the foreground light color and then we're going to have text inside that so let's close that and open it and now you can see we've got a rounded bubble with nothing else in so it's collapsed for that to start so let's add the text box in here in fact cominis this would be the speech bubble rectangle this is going to be the message text just in the text block will vertically align it center have the bubble in case the bubbles larger than the text so it's always nice and central we will do text so we'll say this chat art is awesome when is it coming out and we can't see anything right after you're finished the text block so there's a text one issue is it's just overflowing so let's just wrap that around tech wrapping just wrap next issue is this is got no padding at all it's going right up to the edge of the border so let's just add a padding to this border trying 15 well that looks nice already starting to come on you'll notice in here as well we did a um I noticed but this is a blue color not on black just made it Luke when I was designing this and focus your uh it just looks a lot softer with the blue background and a harsh black so let's change this font color which is foreground to the dark blue and you'll also notice it's second because this is quite small in the text you'll probably want to make this and the regular fonts not be thin font by default so this will be a static resource.regular and there's second now let's see starting to come on already now the message text the border so quick a little uh just spin it up with our five and now we can see we've got each bubble we've actually got just enough to not go off the screen so we don't see scroll bars then you'll notice let's just fix this little su of white background and blue here so we'll put this back in in fact I don't think we need the well yet we'll probably back in a moment let's just remove it for compile and I'm guessing the chat message lists control zamel has also got white somewhere yeah background is over there as get rid of that background and build so the list should have no background now so it should all become transparent and we should see just the blue of the this blue background there we go so that's fixed that little su so I can see the background you can expand off we don't want this to always be the full width 300 to be the size of the actual text if it's smaller so for that we need to just do put this background back in for the moment so we can see the blue let's make this really small text for at the moment again and let's see we're in a grid which will expand all the way well in fact let's come back to this let's add everything else and then we'll because I don't know what the grid layout is going to be yet we need to add a background bubble we need to add this little triangle we need to add the red texture time text so just finish this and then come back to and the making this bubble only size if it grows next thing then we want to put the circle behind you or in a grid already so you can just put another action here with a profile picture which again for now we'll just be a border vertical line top o is on for line left this could be the top left of the chat bubble at all times then we'll have a corner radius which would be equal to the actual we've done this multiple times the actual width of the control with a relative source of self that just means the corner radius is going to be this whatever the width is copy and paste that the height is going to be the same so then finally when we specify a width of let's say 35 we can't see cuz this chat bubbles in the way let's bump this and this one over maybe and speech bubble rectangle sucks and I think we might want to wrap this yeah that's because we've got the chat bubble then we're going to have the text and we're going to have the triangle let's wrap this in its own grid first and this will be the shaft content container I guess or the chat message container do a bread wrap that in the grid then we can now add a margin to this grid say 25 from the left push that over so now we can see this chart bubble another Chapel the profile picture rather we need a background or for now let's just do green wants a border of the light color adding a border thickness so we can see something there we go then we have their heart with thickness brush like that's everything we need for laughs we now need to put text box inside of here when the text block in this case all dummy data again right now until we do the model binding there's the text inside let's now vertical align Center horizontal align Center foreground to the white color font family make it a little bit bolder and I think that actually looks okay now what's next got that there let's do this triangle so there's multiple ways you can do shapes in WPF if you want anything complicated you can use things like I think it's called in Inkscape avengers' or Photoshop or illustrator but in scapes free and that's to do vector art so when you're drawing paths that are you know vectorize they're not rasterize so they can scale indefinitely you can create paths like SVG formats or multiple formats and then you can use I believe this like online websites if you look for SVG to zamel path and you can have it automatically generate the path for you from the SVG but because we're doing such a simple things of making a triangle I figured if we just hand type it in so we'll go to reference for that I'll pull up this website just turn on my nicer everything dark mode there we go so if you google for WPF path markup syntax I'll just look at this earlier out here he'll takes to this health page and it tells you here here's the sample to create the path let's copy and paste that in we've got the text box we've got the speech bubble the ones after the speech bubble and it wants to be in its own thing is he's doing this funky curve battle it's over here but it's put it inside the chap mobile so we want to make some column that makes them rows to this grid where everything is contained in let's make some row definitions the first row is going to be the shaft bubble so that wants to be a height of whatever it needs to be and I'll have a row below that which is going to be this triangle we're on about now so that can be just or to whatever size it needs to be and then below that while we're here we'll put the read their time text here will put actually put that below that little dot so that'll be another autos eyes now it shift this path to the second rail and there we can see this is a path so it's got a stroke which is black so you can see that's the outline of the path it's filled with grey so we can change up to say red and you could fill it or you can just not fill it at all and just have the line but you can see that the thing it's defined and because we want to triangle it's just pop back to the documentation which is here and if you read down here you'll find some basic it's pretty simple to be honest it depends how you visualize in your head drawing lines and curves and arcs and things so for simple stuff it's okay the basic definition is M is the start point so you started off so you typically tie for M zero comma zero which this hasn't so she started at ten on the axe so here's the edge of the control started tenon which is there and 100 down from the top which is right down here so we changed m to 0 0 or 0 on the X it moves over there 0 on the Y moves up to the top so let's just start point and the first one is X the second one is y X is across the screen Y is up and down start to the top left and moves downwards so positive X is across to the right positive Y is down on the bottom of the screen so we do act 10 into this point moves 10 and we do y 10 is it moves down to here so that's your M that just means starting position of wherever then the view see which I'm guessing is a curve of some kind so and the difference between capitalized and and lowercase is the lowercase is relative and the uppercase and but it says here I believe yes the the M indicates the start position of a previous points in lowercase so basically all it means as that the applicators absolute positioning if you imagine this was a grid and over here was a hundred and down here was a hundred this is absolute positioning if it was a lowercase then it would start from the previous thing in this list so view started here and then drew a line at 10 10 and then the next one is a lowercase line at 10 10 it would actually it will be 10 away from the previous position not from the absolute start position so we'll see that in a moment so upper case is absolute lower cases relative so now we get to what we need which is a line so you can see here capital alpha line endpoint so you basically specify a line and a point so let's delete this first get rid of that curve start at the zero zero capital alpha line and then we'll do other let's just do ten ten let's you can see something so you can see the line is on ten ten now this is where we can show you the absolute versus relative we do a line ten ten again you see nothing because it's absolute positioning from the start point which is here so we zoom right in on this so the zero point is obviously here this is ten across on the X 10 down on the why we've done a line at 10 10 then another line at 10 10 which you don't see we do a line at 20 and you can see that the line has drawn from the last position is always draws from the last position and then it's drawn to here so it's drawn to 20 on the ax and 10 on the Y or you change that to 20 0 you see we've starting a triangle there so let's just go back to the 10 10 example so you can see this is now not moving if we change this to a lowercase al you see jumps down so what it's now doing is it's adding the previous value to this value so it's adding 10 to this 10 which becomes 20 which is wise down here and it's adding this 10 to this 10 so it becomes 20 on the Y so if we changed it to 0 on the Y then it's going to become you can because going to have ten to ten which is twenty and ten to zero which is ten so the lowercase L is like adding the previous position if you will and then we added another one copy and paste another lowercase it carries on so it's then going to add this and this and this and that becomes 30 so it's basically relative position or absolute position I like to work in absolute position because I visualize easier so if I picture this as a triangle that I want to draw and I make a box in my head that's say 10 by 10 whatever that is or 20 by 20 like this a box I know that zero zeros here in ten tens down here so I know then exactly halfway between where I want to be would be five and then the very bottom would be whatever so I can see that here would be zero on the ax here would be five on the X here be ten on the X so to draw a triangle we want to draw from the zero to five to zero so zero to five to ten and then back to zero but that loads must be fill in and then on the Y you'd start at the zero you go down to five and you go back up to zero so it depends again if you understand this and how you understand it but all you have to visualize is you're working in a grid system here when you start typing if you use all upper case then everything you type is based on this position here this is position zero across here on the axis whatever position you become so however large you make it it becomes that and then down here again so the positive axis goes across and down so let's just draw this triangle and see if that helps so we start at zero we've got nothing we want to draw a line down here diagonally down so let's just do a line of say five five I look small let's do 15 15 and that's there now we want to go up here and we want to go the same amount so we've come across in the act by 15 so let's go across in the X another 15 and we're using absolute position with capital so we want to be 30 on the X so we go the same distance because one goes zero on the wide to come back up so as you have done down and off and then if we just had a filter this and it will be the foreground light so it looks like we don't need to close that if you wanted to outline it then yeah you'd have to close the line you'd have to do a new line at zero zero to close the line but we're not doing that because we're just filling but we can leave that in there's no harm doing that we also don't want the stroke so stroke thickness to zero and that gets rid of the stroke so there's our triangle now we could move this over in terms of the start position so you know like movies over 20 but you see what happens then all the shape is based on that position so instead of moving the path we simply want to put this path into a another control so we can or in fact I think just put a margin directly on a path so in order to space us out because the Remagen yep so we've got a margin there and we can just now push this out on the left let's push it out by 15 on the left that's it or actually no let's do 15 on the right but if this becomes a AAPIs excited chatter mobile so we then do horizontal line it comes right at a later date we want to also keep this pushed on there the right side in so we just do a left and right margin of 15 and then you can see we've got that looks a bit big so let's just resize this so we got 15 on the side let's go I think I look quite big student ten ten and that would be 20 and that's it that looks a bit better it's just f5 and let's see what this looks like now in the actual application that lives ok see that we've got this little tiny blue line here you should be able to see it on the screen if you're watching in 4k it's like a little artifact there and that's between the two graphics elements are physically separate not joining let's try and fix that with I guess one thing we can try is the Zed index to see if this is always positioned on top let's give that a go and the Zed indexes if you think of things stacked on top of each other on the screen there's that is the element coming out the screen so that's actually fixed it looking at ah oh it's a well saying that it's fixing there it hasn't fixed it here so what we've got here is probably two Hardware rendered elements in the background being rendered to the screen and this is what that's happening this is this will be like a pixel smoothing so because WPF doesn't work on the pixels of the screen it works on its own units and then the display density of the screen decides to round up and down pixels this will be at a point where one of the this is at the same pixel this line and this triangle at the same pixel but when the math operations happened one's rounded up slightly bombs rounded down and you get in this little glyph if you will that's an artifact here so I guess another simple fix is let's just shift the margin minus one on the top and that's just slightly overlap this triangle so it is physically overlapping and we should remove that line now and now we'll get that lines completely gone sighs now a seamless little chat bubble so that will do for this we want a little more padding there on that much ballistic profile picture so what did we do we're going to add any padding to this I thought we added padding let's do what let's do margin your top and bottom margin of just say five give it a little bit of a margin that's better so maybe shifty down another few pixels do 7.5 and we could just do vertical align Center here but we don't want to do that because when this chat bubble becomes more and more lines then you don't want this picture of who sent the message to be floating in the center of a message that could be the size of the screen you're looking up and down who it was we either want to position this at the top or the bottom of the message as we did here well it's really obvious there but that's la let's just close this down and we don't need this we have this now looking very much like this so that's fine so we've got to add this text here let's just add that first so we've already added the row definition here let's label this shut bubble anchor I don't know what just the name for that thing don't know whether that's a technical name or not now we just want to text block text there's 1154 a.m. we want the font I'm guessing that's gonna be black yes I want these foreground to be the light color we're on the row of the grid to be the third one with your number two we will want horizontal alignment for the right and again will data bind all this after and this all change from being hard-coded stuff to by room to a data model as always but this is how I generally design in the first places simply mock it off and then bind afterwards so that's over to the right I think that looks a little large-scale font size and now we've got a much better range of fonts we can just do small there we go that looks ok I think it being liked okay as well we don't want too much emphasis on this text here press f5 let's get a visual for that and there we go so you've got the time here and then each chat bubble looks a bit off at the moment just because we've got the same message repeating over and over we could change it to having you know specific text per one but for that we'd have to make a view model and I think that's going to just run this video up a little long so we'll do that in the next video but you can see that's going to add this natural spacing so if we put this here and five we're almost broke perfect so see this gap here there's almost this gap here so you can tell when you've got multiple messages this is going to start looking much nicer and we can also do something when we start data binding and they send multiple messages we can possibly remove this icon from each one or we could remove the time but the time won't be shown by default that will be on hover but again it won't look as bad as that's just being dumped in as it is right now it all looks a lot cleaner once we start adding the data binding and we we have a message from each person the last thing to fix is just this bubble expanding to the edge of the screen let's just take a look at that and see why that is so we're inside this grid so the grid is naturally going to let expand to whatever size you no one's going to fill the entire thing so we have a chat bubble here with the text inside then I don't know I was just whipped Porto is going to do anything there no so the issue is this is going to expand to its container which is allowing it to expand to anything I was trying to dump this inside of a stackpanel and that hasn't done anything either get rid of the panel oh I think it's really obvious we're forgetting because this is a border also needed there was a line this somewhere so if we align this horizontally left that was easy sometimes you overthink things right so that should now if we then tie this chat it's awesome when it is coming out you can see it now expands as it needs to and only goes to the size it needs to as well so there's that and if we go to small which Don we can't quite get small enough let's just write a little bit more i've spent longer text and we should be able to see it resizing the bubbles layer you can see that single line double line and that all works nice so that is our chat bubble basics so there's a lot more to do a hell of a lot more in fact but at least this is a good start to see how you wonder how to make in fact there's another slight issue there this time is now aligned over there we want it to be aligned within this border object which might be a little bit trickier let's have a look let's remove that shorter so on this to end up being in a line with that the same as this actually so we don't want to align the border can we horizontally align the intake driven it still work so with them so now all's we have to do is we follow horizontally aligned the message contained that contains everything and because we've aligned the grid itself even the grid as then decided to change from expanding fully to only expanding to its content so now you've got the chap up there a cha-cha pop the chat app rather with the time and everything else moves with it so let's just type some decent text back in here again so there's the text so I'd say that would do for this video because the next steps we're going to start diving into I'd say view model binding let's get this thing bound for an actual design time view model like we did here and let's put some text in that makes more sense and we'll do it ascent and the received version and then we'll style it with their the controller loads on this side as well and that's going to be a Big Joe and it's going to be probably another hours so we don't want to tag down to this video it's a good stopping point now so hopefully that was useful for you to see how to make what looks like a fairly complicated thing have you seen this and you'd wonder how the hell do I make that hopefully this is broken it down into again real basics just a boarder with a rounded edge a bit of a path and just grids and stack panels like everything else and this is what I always mean about WPF and hopefully you realize the more you go on of just how easy WPF is in terms of you can design visually anything you like just really easily it's easier than web designers using Windows forms it's easier than any graphics it just works it's a really nice UI design tool and all you've got to do is remember mainly grids and stack panels of you know positioning things and that really is the most of what WPF is about so again hopefully this video was useful anything you were stuck on as usual make the comment and I will reply to you almost instantly usually both if not it's always less than one day and I will reply with even if it's a complicated question or you you know you don't understand an entire section of the video don't be afraid to just say that I'll make another video just focusing on a small section of a video if you can you know struggle to understand it so as usual any comments and I'll get back to you thanks [Music] you [Music]

Channel: AngelSix

Views: 29,631

Keywords: wpf, animation, chat, bubbles, message, list, ui, custom, control, mvvm, tutorial, view model

Id: vaeg0Gwzybw

Length: 56min 24sec (3384 seconds)

Published: Sat Apr 29 2017