C# WPF UI Tutorials: 17 - Chat Message Input Box Control

[Music] in this video we're going to look at doing the right message box at the bottom here so we'll have like a button for attaching files here a text box for writing messages a button you'll click to open up like a big window of emoji icons that you can click to add to the message and a send button which I'm not sure whether we'll want that send button when we finish we might just have the enter button be impressed we'll see you know what we want to do with that what for now we'll put the send button in so this is the target for this video and then at a suggestion on the one of the comments in the last few videos that we should perhaps set a few targets like if you pause the video now looking at the screen and you try and think how you'd construct this layout not the style but in terms of like this section here now would use a grid or would use a stack panel and then if you're going to use a grid are you going to use one two three four columns to rows if your stack panel are you going to be horizontal or vertical and then once you're inside would use a button for this would use a text box for this you know think of the structure so not the visual styling but try and get in your head what structure you'd use so I'd pause the video jot down your general structure of how you think I'm going to construct this and then carry on and see if you got it right if you're struggling I watched the first video the WPF basics where it's focused entirely on that exact floor plan of thinking through how you're going to design something and it's it always starts with a grid or a stack panel or wrapping the whole thing in a border that's pretty much the only things you have to think of so it should be really easy and it's a good challenge for yourself to try and think through before you see how I do it and see if it matches so we'll go ahead and do it now and I'll just think through the process myself as well so looking at this it goes all the way across we're already in a grid here so we've set out a third grid row at the bottom here for explicitly placing our chat button message section here so this overall thing I'm going to do as a grid because we want this mainly because we want this text box to expand them fill in whatever space is left and that's what a grid does so stack panel will simply be as large as it needs to be it wouldn't grow to the full width so for that reason alone we need a grid so we'll start with a grid then in terms of columns you're looking at maybe think one column for this one for this one for this one for this but that's not what I'm going to do you only need as many columns as is needed so we'll have a column here that sizes automatically then we'll have a column here that fills the rest of the width and then we'll have a third column here that we simply place all these you know whatever goes this side inside that column and this will just expand to whatever size it needs there's no need for separating each control into its own column when it's your only need three so we want a grid and this grid is going to sit inside the grid it's ready in on row two which will be down here just set a height so you can see that for now say hi at 50 and then we will set a background chord which is the foreground like oh I think there we go then we want the three columns that we mentioned so let's make those good luck column definitions and the first one is going to have a width of auto copy three times and change the middle to fill then let's give us a comment and as much comment here comment each column this will be the touch button this will be the text entry box and this will be the additional buttons so the columns defined so in the first column we want an attach button let's do a button style icon button contents now then we've got an icon little paper flips I'll just place that in for now and I think that's it and then we also want to change the foreground color so we can see it to say foreground or brush and let's go ahead and just get that icon that we need there so you remember it is font awesome to i/o forward slash cheat sheet search for paperclip I'm guessing up the called yep there we go and copy this F oc6 and we go to our where did we put it font so thank you us yeah copy and paste one of these styles call this paperclip icon and it was OC six we can now paste that into the name there and we see a paperclip let's just change the application you model to default to go straight through our chat page for now and show the side menu and then press f5 so we can get straight into there the chat screen and take a loop and then you can see we've now got this button here now I don't really like this style we need a different style the same for here I don't really like how the Box fades over I think what we want to do instead is maybe enlarge the icon and make it go a different color or maybe just enlarge the icon for now as like a hover effect so we'll do that afterwards but let's finish up the the basic UI first so exactly a touch button let's jump ahead and write keep this commented now we'll move over to the [Music] third row to do these two things for these are nice and easy so we'll want to put these inside because they're only in a single column we'll put these inside a stack panel that goes horizontal so just filled out so this will be the additional buttons a stack panel on the grid column - and then we can copy this button and paste it into here I call this emoji button now we can't see it here I think that's because this button the one issue I noticed before was the way we do the button style if we open the buttons and take a look at icon button I think this is something we should fix in the next video maybe as we set the width to match the height but at the height and set then this is a kind of infinite value or zero value and we can potentially fix this by making it always scale so have a quick look like always scale vertically let's maybe try that and vertical alignment value is stretch maybe let's see if that fixes the issue of we compile no so that's not going to fix you can see the issue is basically we need to go for two height to see anything without the height we just don't get a height and we get this measurement override sometimes throwing and it's a in the view box is positive infinity so it will actually because we're putting the others the real reason because we're inside of a view box can we do a vertical alignment on here to stretch I know it still doesn't fix it let's make sure that is actually working I think it's because we need maybe to get the inner text box height so I think this is or something we'll come back and look at in another video separately to fix the specific style because we might be wasting time here so for now we just need to make sure that the button has a height explicitly so instead of saying you know height 50 let's just bind it to the container height here which is a grid so all's we can do there is Christy or binding of height and the relative source will be a relative source and we'll just finally unjustified type of grid and copy and paste that to this icon as let this button as well and then compile and that should be okay there we go is like force the icon hiked and we've just found it to this grid above so that will sort that for now again we'll come back and fix this nicer let's get the icon for this emoji so we want font awesome face now smile there we go has a smile so it's f11 eight so we go back to the fonts copy and paste one one eight and this is font or some emoji icon paste that into here we got a little smiley face foreground will change to the orange and let's just run this and take a look at what it looks like so you can see that looks all right we've got a again we'll change their style let's have a style but got that now so let's add a button next in that case so we've got the emoji button let's add this to my spell checker because emojis are unknown word add to dictionary we also need to make sure the stack panel is set to horizontal got the emoji button now we want the send on so we just simply want a button content to send that's way too large font especially the - the font size or is it the padding it's both so what we want to padding them about 8 font size of regular it looks okay press f5 and see what that looks like the size is a right we just want padding now on this leading edge so we'll do that on the stack panel with having no margin left top right of eight too much that in bottom of zero we could add that to the button as a margin I suppose but then whatever we add to the stack panel now will always be spaced off in case we add an extra thing so it's better put it on the stack panel again we'll make new style for this button so we have like a confirm button that fades to blue let's just do that now quickly because in the file here we have nice green button so let's make a a green button we may be able to do this just with background do we have a green at all no okay let's just Pat green for now let's see if our style already works with just fading to the blue hmm kind of so let's tweak that style to obey the foreground at the background color and fade you know to the background color or rather just remove the two from the animation and then we can simply add a green color fill out having to make an entire new style so we go to the button it will be I think just the standard regular button here so in the animations firstly we fade the background - mmm okay so now to leave [Music] yeah we can't really do that I don't think that unless we just typed from Balu maybe I'm left the - I don't know see if that works I don't think it will because it probably has no idea where go to because we've changed the color now yes that works that's cool let's just quickly check the login screen button still works so change the application viewmodel startup to login no need to buy the hide in the side menu for now I just want to check the buttons still work there we go so now all's we're doing with the animation we added this to fade to blue on hover and back to whatever color was set so now we can add green to the send button or do we stick with our word colors here we should have a green actually we must just have never added it to the color so let's take a look at colors so got the blue the orange we do have a green I thought we didn't they didn't show up in intellisense when I did that I must have messed up something so let's press f5 and see if that works okay and now we have a tap drag on touch button emoji button and a send button with a hover nothing that looks fine I know we just need the main text box and again we'll fix this in fact let's just go and fix this now because this is already starting to annoy me let's make a new button style that doesn't have the background fade that expands the icon instead or potentially adds the icon and change the background to simply not fade to anything so let's try and just remove the background fade maybe by forcing it to in fact no that won't work we need a new style so let's open up this find the icon button will inherit from the icon button so we'll override the icon button well so onto style we could do this with the touch properties I guess as well but we get booked for the sake of making a quick style amount as well do a style so we'll call it icon grow button and we'll have a target type of button and based on icon button so we take a glance at what the previous one had it was the [Music] controlled triggers so we'll simply copy and paste that I guess we're going to have to as a because we put the triggers in here let's just let's just completely copy the entire style and just making you one such a small style it went really harm us so there's a copy and we'll call this icon grow button now we will want to unmount enter instead of a color animation we want to do a transform on leave we want to run transform so the first thing we need to do is we need to make sure after over I the template here we have we need to make sure that what we want to transform in this case like a render transform actually has a render transform so that we combined and scale so because we're in view box I guess you want to render transform the entire view box so let's do the Box dot render transform scale transform so we comment this add a blender scale transform so now we should be able to I will need to name this I guess so we can access it so we've got boarder named I mean we could scale all the border because the view box is inside of it yeah let's try the lecture but just move this out and try scaling the border instead because it already got a name for that so add a render scale transform and then the animation this time is going to be a double animation it's a number we're going to scale we're going to want to go to and I guess this is a1 is 100% so let's do one point for say you know forty percent increase over the same time over the same target for this time until the background color we need to access and you have to use because this is an attached property render transform well it's a yeah I guess an attached property I'm not hundred percent sure on that let's have a quick look no it's just a render transform is part of its child object so in order to access you know the inner attributes of you well of this we have to put it in these parentheses surrender transform and then you can do dot and then again because you're accessing a child property or one be scale where is it scale transform and then again we'll want daft and I think we'll want to do scale X and I'm going on the inside so I think that's the syntax so we have the vendor transform object that we've got here and then the scaled transform object there and it's X property and we'll also want to animate the Y to you know grow the same so copy and paste that and do the wide and this should scale I think and then I would copy and paste that down and override there when we hover out or on a scale to back to 100% so I think off the top of my head maybe this will work and will no longer have the hover background colour issue because we remove that effect we just need to change the style to icon grow so we change this one to icon grow button probably going to need some tweaks here but maybe this was work first time II almost so you can see that's the old style the new style grows it's a bit slow and also what's happening here is the origin if you will of the transform is not in the center so it's basically in the top-left corner up here and the whole thing is growing by 40% and expanding down to light here so we just need to fix the speed ease of a little bit and fix the transform origin if I can remember how and where we do that is it maybe just another one okay I'll end the transform origin and on do you remember what we do with this thing what's it looking for here a point so the point X of and then this is again from 0 to 100 based on 0 to 1 so we do 0.5 0.5 I think this should work maybe I'm done render transforms in a while oh there we go oh we forgot to speed things up so let's just speed probably want twice as fast so change that to 150 milliseconds there we go that's like a nice little button effect so let's change I think we'll change these two and this to that style so we want Ike on the row button wants to be for attach as well and same for this now let's take a look at that there we go that's much better now I prefer that style for general buttons and then this for like their you know the sections of you will we can always change that but that's that's a nicer style I feel alright so now we need to get on to add in this text box and this is going to be something that will grow tremendously as time goes on to support you know emojis and hyperlinks and all kinds of things but for now we'll start easy and then build up so inside between the attach button and additional properties we'll place shall we use a text box I think we'll be fine grid column is one and start with a tag of the right message which i think is what we wrote on writer message dot dot that text is huge so let's just change the font size to regular that's better one else I sort of run that first and let's see and so two issues we'll fix firstly one we've got the blue line under here which we don't want which we made that style that was just a border so when we move the border and - when you're pressing enter and also when you're pressing tab which is two things you want to be able to do in there the message box we can't do either well I say you want to press ENTER and we'll make it so press it into first and stymied begin and then in a future video we'll probably bind or have an option somewhere maybe in this drop-down or in the settings to toggle whether the user wants to show the send on and you have to click it to send and then when you press ENTER in here it actually goes on to a new line that's one way of you know how you work others like just simply type and press ENTER an expected descend as opposed having the ability to do new lines which I think it's a more common way and the other way of handling it is a holding ctrl and pressing enter is the typical way to you know I put a new line in a message application that would otherwise send but for now we'll just default it to clicking the button to send and pressing enter gives you new lines in the message and we can really really easily toggle this afterwards so let's fix the underline first by simply removing the border and we want to I think it will accept return is true yet and accept tab is true now I think that will make the text box automatically grow it I guess it does you can just about see a little faint line of text above so we need to allow this thing to grow now so just give us a comment first message box and then we set this height here of the the main area so let's change that to min height and oh yeah and now that's the other issue with the at the height of the these buttons which you can see is that say make sure there's an icon button style that we need to fix I don't know whether to know let's just set a fixed height necklace I really want to fix this but I'm just wondering how much work is involved right now to fix the high we just bind it to hide and force a heart to be made no I thought it was just was just rebound it now to the min height instead of the height I will definitely get around to fixing that in there the next video so we do min height just build that should fix so I think what we've done here is broke we like an infinite loop going on with the compiler so you can see how it's struggling so you get this - press ctrl shift escape and your task manager will show up and you should be able to see other than my recording here this microsoft visual studio zamel i had searched enma and that will bring this back update was failed mid load and that's just because this got stuck in an infinite loop of there was no height so then the width was trying to be an infinite infinite width and in fact object so we've bound back to min width at min height sorry and we've sat them in height so we just simply reload that should compile fine now and there we go so we fix up temporarily we've now got a min height so this can grow now it sets a max height as well I don't know what we'll do say 140 something to run this and see what it looks like so five away that's not quite central either let's just fix that a minute so text box let's make sure we are vertically aligned Center just ever so slightly off wow that smells perfectly Center and now it's Rose that grows a bit too much I don't like this big send button I don't like these in the center let's align those to the top and then let's try another high to try and reduce this size a little bit it's a bit too much so a touch button we want the vertical alignment to be soft copy that paste it into the stack panel as well and we said we're going to try a different height so min hi try 110 so max height nearly right ever-so-slightly feel like the apps are slightly after the slightly fading but this is okay now so these are aligned we want to just slightly tweak the heart to be a little bit more few pixels more and then we also aren't seen any scroll bar here so let's just fix that as well let's try one 114 and I'm guessing just the text box doesn't show the vertical scrollbar by default just Auto [Music] there we go so now we've got a fits in nicely there so you can see five lines and we also got the scroll bar which will obviously style this much nicer in fact we might even move that scroll bar now I'm going to map me that scroll bar over to there and sort of self-contained these buttons inside maybe we could hide the send button I'm just thinking let's just make this invisible for the moment that's gone let's make this textbox do spun over to so it spans throughout the way across and we'd have them have a padding:0 0 50 0 something like that and I think that should shove the scroll bar right across to the end so it looks like that the this emoji is inside yeah kind of works now when we style this nicely you'd have this scroll bar over here but you can see that the issue there we've got the window resize for one that's trying to happen there so you can't really grab there to scroll anyway and likes to see now it's got plenty of space off yeah so that's that doesn't interfere with the caffeine that's fine but doesn't really work when we get the scroll bar due to just having the you know the resize border we can reduce the size of the resize border which is a bit too large at the minute anyway by a few pixels bought now let's leave the scroll bar where it is just undo those few things so I think that is for the most part the basics of this bottom bar just reconfirm so we've got there the attach that we can then do something with you've got write a message we've got a send button we've got an emoji you can fly the message and you can have multi lines and a scroll bar that will style in the next next video I feel and then what we could do is simply bind well we wouldn't even need to ever prevent the accept enter we could do we could bind the accept Center to you know a setting in the view model that says whether you want to send the message on enter or we could simply intercept every key press and if it doesn't answer and then check the setting at that point whether it should send we simply ignore you know we don't have that enter and then we send the message so we can do it two ways but until we've got a settings page and something to bind to and toggle that setting we'll just leave it by default for visual you know this this way and so we've got an initial message our world I think we can remove the padding on the left and sort the padding on the right slide okay we can remove the left and right padding on this text box is there any putty muddy fault yes so let's do try Lac no padding left and right and just padding top and bottom I don't know that looks any closer now I guess it does because there's the button as soon as you're outside the button yeah that's actually right up against the buttons it's just that the buttons we've given a you know a decent padding around so that's okay there let's just compare that to our screen shot and it's a little bit too large it's about the same size so as a ruff-ruff comparison and I think that looks pretty good so this is still a little bit larger than the real one for lastly note isn't but this is only Photoshop this is the real app so I said that's close enough to what we we want and then the harbor brings it to the same size so I'm happy with that being you know what we want it to look like so actually next I think we'll do the scroll bars because we've got two different scroll bars now that really are just making the application a bit messy so I'll clean that up and then as well as scroll bars or then what we'll do next is either probably this emoji I don't know emoji will take up a lot of time but it's fairly important where we could click this and add emojis will have a pop up menu or we just make this pop down menu like a little nice little white pop down that comes down when you click and animates down or again if you've got any ideas of what you like in the next video simply leave a suggestion and I think that's what we'll cover in the next video so I really leave it up to you guys what you want to see next and we'll tackle that but otherwise we'll just keep hammering away at this this whole chat screen the main area and potentially jump on to do in the settings page and then maybe having these clicking to load in messages and gain it's a bit more interactive so just let me know what you want to see next and I'll get that done [Music]

Channel: AngelSix

Views: 14,126

Keywords: wpf, animation, chat, bubble, message, input, custom control, user control, style, template, ui, view model, mvvm

Id: NfZ5GwSH52s

Length: 38min 10sec (2290 seconds)

Published: Sat May 20 2017