C# WPF UI Tutorials: 15 - Adaptive Control Design with View Model Binding

[Music] in the last video we made this shaft bubble so we just press f5 we should see that so type anything into the two boxes and we made this little a chat control here the bubble if we go to the repository like github repo into the mock-ups you can see this is really their bubble for a message that you receive and then we need to do this message that we send so we need to style it different we also for quickness didn't make a view model we just found this to this list to the side so let's go ahead and make a view model first and then we'll go from there so in the words core right click on the view model add new folder and we're inside chat book we want to make a chat list and put all that inside and then we'll make a new folder and Pat didn't turn the map place inside chat and then make another folder and we'll call this chat message and then we want to make a view model for all of the chat message going to be very similar so we can just copy and paste this one open it up add the word message to the start change the comment have you modeled for the or for a chat message the red and apologies for darken a little bit slow I caught me some today helps why the video was a bit late so I'm having to type with one and a bit hands at the moment so that's why I'm a little bit slow at typing so you start to put up with that chat message list item will also create in a minute the chat thread items for this list will rename the file then we'll copy the item from the chat list item because it's very similar and here this will be the chat message list item view model for each chat message through read item in a chat thread then the display name this chat list well this is a message so this we're going to rename to send a name so the display name of the sender of the message then we've got a message initials profile picture new content available is not valid for this it's selected we'll leaving because we'll have some additional things when you select the message we've got the sender name so we also want to add a boolean for it's sent by me will call this which means you know send by this user whoever signed into the application taking a long while khatai so that's the sent by me and that flag will be used with to style this control like this so to the right or to the left and with a different color because this is going to be a list of all messages in the you know a specific thread and that could include messages from yourself so that's the point of sent by me because you'll include the messages you also created we also then want a boolean for if the message was read or not which actually we need to create the time first so I'll have a date time offset controlled often and set it at the name space message read time and that is the time the message was read or date time offset dot min value ever not read then we'll have copy and paste that we've got a read time and we also go to send time whenever the message was actually sent and that can't be all right so this this could also be a min value because we might have a message to the list that's pending it's currently been sent but for now we're just going to ignore that far which can have a message send time and then come back to that and then for a flag we need to know the message was read or not so that we can show this read text and we tears and simply not show it if it isn't we want to have another property from a message read and this time it's just a gutter so there's no need for a setter and that will be if the message read time take greater than day time offset dot min value and I think that I'll do for our view model we can always come back and add things so click here rename this file as well now we've got the view model we need to make some design view models as well so we can visually test and create the controls inside the designer so I don't know the folder inside chat message and call it design I'll just copy these again so copy the chat let's design model drag it into the chat message design folder call this chat message design model and it will be a chuffed message list view model control click and control C for copy and then keep ctrl down and press B to paste and we can replace all these with the new name and then in here we can now create some example messages so we after the name is now send a name which will say as a loop and in fact if we look at this so send the name here we'll do top to bottom so that'll be Parnell and practically with this Parnell the initials PR in fact we can drag this now to do this way actually I'm about to write the old server we need to update the old windows so put a message similar to that old server - that will do for now for that message the caller will keep the same new contents not there anymore it's selected we don't care about read time or in this example we don't have a read time it's our message we set the read but we do want to set the sent time and for now we'll just set back to whatever time it currently is in the application so that it's difficult to type with two fingers on the left hand a time offset dots UTC now and then what else is there message sent by me in this case is false is false by default but we'll declare it for now - it's obvious and that's the first one copy and paste that and we've got three messages in this Makapuu i so i'll have three here second one is sent by the signed-in user and i say let me know when you manage to spin up the new windows 2016 server that's that sent by me message sometimes we want a read time for this as well message read time and we'll just do all make a time up so it's different for the date time offset you can see now dot subtract and date time officer dot UTC now dot now formatting probably want times fun that's it times fund up from days I will just go back say a day in a bit just to give it some random time so that was the set the read time of you know a day and a third of a day ago so just makes it look like a different time and finally the last message the new serve result go to blah blah blah username is up men then you serve res and then password is word and we'll also insert a new line here I'll be lazy for now and just put returned cabbage new line instead of an actual system environment new line unless tester that shows up correctly as well so there is the design model for the list rename this file and then we need to copy the item itself so copy the other one drag it into the design folder open up rename the chat message chat message list item via model and then it doesn't really matter what this is that I'll stay all like that we want to take a look at creating the scent bubble so this bubble so we'll set the red date send eight and also sent by me so that we can try and style this version of the control so since my me will be true then sent message sent time equals date/time offset now red time I'll do the same thing date time offset dot now dot subtract time span from days so go send by me sent time red time message hang up everything for now so we save that and make sure we can compile okay so now we want to open the actual control so let's start with the item itself and we need to now bind this data to the new chat model so first we need to bind the border which just because it's the top-level control to the design time we only want this to show up in this window visually at the design time so that wants to be design time data context is finding and it's in call the shots what was it called zone time oh you name this file as well click the rename file this item here copy the class name paste instance and valid property syntax because we don't have cor specified here so add it here for the namespace and there's nothing wrong with that thing just need a building there we go so we're now bound to hopefully the design time model which I think unfortunately shut all this chat message list item design model we give it the exact same information so let's just change this to some design time visual text and then compile up at least this time we can visually see them when we bind the text so we bound the data context in design time to the design time model like the previous one now we go to the text block here for this we can do binding to initials I think it is it doesn't appear to be working so it is initials it has this does the instance and dressed in so that's not working oh I know identity is binding you're not buying into this into the actual instance the static instance itself x : static there we go and now it's appearing here then we've got the text bound here we want to bind or the initials rather we want to bind the text as well so let's get rid of this text and they will bind into message there we go this is some design time visual text and we've got the time here and bind this to and finding message sent time and you can see this then just dumped the entire message to a string so we want to make sure we convert that to a more user-friendly string so I might as well do that now so we go to value converters just copy and paste any of them this boolean and we'll call this time and the display time converter six and a date and converts F to a user-friendly time then the first thing we want to do is get the time which is going to be a big time offset and then we want to say if you look at this if it's sent today we just give the time otherwise we'll just give the date in a different format so really the only special thing we want to do is if it is today which you can define by if time gates with equals equals date time offset dot now dot date so the date is basically if you're in a date time offset like UTC now which is right now if you do date inside that it removes all the time so this would be like midnight at 0 seconds 0 hours 0 minutes of today so this was like you know the first instance of the day so if you strip out the time of the value and also strip out the time of now and compare then that means it's a bit equal if we are on today basically and if we are then we can return the time and because this is just an offset we need to go to local time which will pick up this machine's current time and then due to string and we'll just want to show the hours in 24-hour format and the MINIX so hopefully you Americans don't do 24 hour clocks usually so if you want 12 hour clocks you can do a lowercase H and then if you wanted the a.m. p.m. I can't remember what the two string.format fingers here but if use a Google c-sharp date/time string.format will be a special character be a single h maybe I don't know there will be a specific character you do to give you the AM or PM value there I'm going to stick with 24 hour clocks because I'm in the UK that's like the standard here and then if it's not today so it's not today we just want to return a full date so then we just return timed up to local time dot to string and we'll do the hours and the minutes the same but then we'll also do the month and the year so it's like a full full string we don't need to convert back so we're not a time to display time converter so in here where we've got the message sent time we will add the converter and that will be local counter display time converter compile and there we have it so now it's saying it's for 19 which it is it's for 19 down here so that's that text the and let's make that a little bit bolder actually so strive regular Alex better we also need the red date so you might display the scent time and the red date in one so let's first wrap this text block in stack panel move that text block inside this is the sent time the rid row is now for the stack panel not for the text block and we can simply copy and paste the sent time and this would be the read time because these gone down we need to alter the stack panel is an orientation to horizontal now the side by side so now we want a bit of padding between these two just zoom in on this a bit so I wants a bit of padding between these so on the first one is just add a margin black zero top zero right 15 and that gives us a 15 that's a little bit too much try 10 now christine's okay and then for the read time it's the message read time and we'll need a new converter for this because we don't want to display the read time if it's not been read so it's the date time minimum and we also want to change this color to dark blue there we go so the colors are acting you can see now because it's not today it's yesterday it's also correctly styled the the date string using this converter but we need a new converter now anyway so let's just make the a new converter for the red date let's go to the current converter forgot to rename the file again and let's copy that date to display time because it's going to be similar to that this time it will be date to read date or read time converter converts a converter that takes a dating a visit to a user friendly message read time copy and paste that into the generic get the time passed in and now before if it's today we still want to do this well we want to do this but we want to want to return a string that says read and then pass that into want to prepend what we're returning with the word read that's the only real difference there but then as well as that if it is not read so in this case if the time equals date time offset dot min value then we turn string dot empty so basically if the read time hasn't been set we simply don't show it and that's all the list of that one copy the name let's rename the file and I got forgot to do that again yep and in the message read change the converter to the read time which I think up to compile to see that update there we go so now it says 1624 so for 24 which is the current time and then read at 912 so it's read a day in a bear go so that's looking okay now the other thing we've got to do better mine this is a message I've apparently sent so it should look like this should be on the right hand side not the left it should be a different color and it should hide the initial fudge so let's start by binding all those things together so here's a profile picture so we want the visibility of this to be bound so visibility finding to sent by me and we've already got a converter for that the boolean converter and by default you can see it's now gone in the correct way so that's now hidden for messages that were sent by me next we need to align the stuff to the right so I think we want to align this whole grid after gas let's try that yes that works so we want to change this to a binding here I want to be bound to sent by me and we want to converter which we need to create which will be we'll go make that now copy and paste any converter so we name this to sent by me to alignment converter takes in a boolean if a message was sent by me and aligns to the right if not sent by me aligns to the left and then with the delete all that we want to return give the value passed in so if it is sent by me we return a horizontal alignment of right otherwise we return the left so that's the new name of the converter we name the file and then add the converter there build hopefully that'll work obviously not work for them wrong always on for lineman binding convert it equals type that again converter 2 equals sent by me to alignment clothes I'm not close there we go so now we have a right aligned message apart from this bubble arrow thing so copy the horizontal alignment go to the bubble which is there and paste in the alignment to that as well I'm going to speech bubble right come last night there were a chat bubble anchor and there's that aligned over there so let's just press f5 and run this now type it anything in here and gives you there we've also got to bind this list and we've also got a blue background I've noticed here which we added just for while we were designing to visually see so let's just removes up limit while I say let's leave that in but let's remember to move that last what were we doing oh yeah we need to bind the actual chat message list control - now the chat message design model we need to change that to the chat message less design model and press f5 and we should see oh and we've actually that's right yeah so there we go so there's the three messages we I think you can see this one shows the red this one these two aligned correctly that one's aligned to the right and left I think we want a little bit of padding here at the right and mmm that's a little bit there I'm in fact no exerts that's already the bubble is physically spaced off and that just adds there so let's just our padding to the right there this is also aligned to the top we need to align this to the bottom so let's fix those few things first but you'll notice the speech bubble now just from view model binding this is the exact same control and yet is all left and right you've got to finish it off but you can see it already you know coming together so let's start with this is designer height 600 easy this is aligned at the top so let's just align this grid to the bottom which you won't matter once it's full because then it will fill but if it's not the full size then it will align to the bottom so let's just check that works now we go so let's fix that a little bit we want to Pat it on the right and then we'll call this chat bubble as well so back in here thank special studio for swapping my screens around and padding so we want to add probably to the grid a chat message containers say sort of margin left of nothing topping off in right 15 bottom nothing how we've already gone okay left top right 15 in fact let's put 25 6 even on both sides and let's see if that works ok I think it will because then you've got a perfectly even there yeah it's better so now you've got the exact same white space here we just regarding the image that we have here and you can resize that way so all that's left now is to style this blue and then we only really want these times displaying when you hover your mouse over I'd say so we'll add some animation there right so let's color this background next and we've got the background here so let's do light blue first let's see what it looks like I think it's very light blue that looks a lot a bit too light for me let's just darken that blew up a little bit first we use that for the hover selection but I think that looks a lot lighter than this blue so we'll make that a little bit darker we just go to where are we Stiles colors and then very light blue should be in here there we are let's just make this a little bit bluer so c3 e v f3 and progress that's already done at the eye looks better now that's clearly more blue so we want to use the very light blue if it's sent by us so the background changes to a binding again and it ascends by me and bind the converter to sent by me to background converter we'll call it and then let's go and make that so copy the sent by meter alignment I'm going to sent by me to background converted eggs and buidling of the message sent by me and returns the correct background color so again of its sent by me then we need to get the color so it's sent by me we want that blue which is called and this one here word very light blue brush so copy that name and then in order to get that from the exam of resource file we need to do application current find resource and then pass in the name of that brush if it's not sent by us then we want to return the white color which was the [Music] active colors to do the foreground light brush that'll be the two brushes we've already linked in so we compile it should then just show up there we go so now we background on a copy and paste to this little rectangular thing as well which is in fill so we change the fill binding this time based on the background rename to fill and then we can see we've got the background so let's just f5 this and make sure that both background colors work pull in there we go that's looking nice now so if we what's left on the hover on this text I think next so we don't that's always visible we want to just show that when we we hover over the actual item now we can do that in a few ways we wanted when we're hovering over the grid so this we can either do this grid which I think is it's everything which I don't think we want that one if you don't want the text to appear if you're hovering it all the way over here I think we want to dig in and go to this grid the chat message container so inside this grid which is actually here we do grid triggers because we want to listen out for an event trigger because in the event trigger can trigger a storyboard what you want to do want to animate this in to the event trigger routed events and it's mouse enter and then same as before we've done this inside some styles you begin a storyboard and the storyboard will have a target name the target name we want to call runs basically fading out this stack panel we made here this time containers let's give us a name name equals now extended details as an AR or extra details doesn't really matter what you call it copy that name paste it into the target name so that's what we want to animate and target property is opacity which is basically the other oils to describe opacity that the transparency so zero opacity is invisible and one is solid then that will be a double animation as we mentioned to go from from on mouse-over it will go from invisible of zero to solid of one and for the time I don't know let's do hours minutes seconds we'll do half a second say so on hover over we should get the opacity going from zero to one and of the copy the event trigger that is also common this mouse-over shows time copy and paste down there mouse leave hides time this will be mouth leave I do everything the same but this time from visible to invisible and then let's start off this stack panel has been invisible foil pasty of zero I think I should work slogans of the times have gone oh that's nice and then when you hover over the time fades in and that one does and that one does that's it's quite nice I'm not sure about that a little flicker if we flush through them and that'll be because we have a where's it gone we set the from so I'm wondering whether there's a work without the from and then it'll only fade out from wherever it currently is and that might stop that harsh flickering oh yeah that's worked so now it will only fade out from where it currently is review you know going over fast it doesn't do anything and we could do the other way around so don't get that flicker the same way and we quickly go out in in let's just remove the from again so we're never forcing it to be somewhere the from just becomes what the current value is and those little touches are what make the application much nicer there we go there's no more flickering at all now it's no matter what you do it's a really smooth transition to show another time so I think that's looking nice we compare that to the application or the original Photoshop file you can see that's now looking really nice and very similar we've obviously got a lot more as I keep saying this is going to take a while to do the full chat bubble so we've got I think the next video what we'll do is create this top bar we'll just put the buttons and we will do the search feature yet we'll just do yeah the actual top bar and with the two buttons and again that button we won't do anything with just now maybe we'll do a lot drop-down list with some random text and buttons in like a little mini drop-down and that do that and then we'll add this bar and again we'll just add the basic bar for now and we'll add this typing and then bounce back and forward between making bubbles that can display pictures say in here and doing say this right box and doing emoji so you can see emojis inside the text and doing links to website so there's a lot that goes into this now but if you think the application is 99% this window now so this windows are really done for the most part you click here and you this load here that I just go to another list of some people there's you chat and that'll be a list by people instead and that filter by photos and just show you some photos and that'd be a basic settings page so there's not really much I know the app doesn't look like it's anywhere near complete yet but you'll be surprised that to do all these other pages it's very little effort and the bulk of the work now is left in the screen so there's a lot to do here until to add so we'll keep doing videos and doing it in in chunks and I think just so this starts looking more complete we'll do the top header and the message box here and then we'll go between you know the attachments there emojis showing the type in and then the photos in here and we'll just keep going around until we get this done so it's really starting to come together now and and look complete so that anything else you want to see or there's a particular order you'd like to have things done in I'm always open to suggestions or simply pick something when I come to do the videos and I just choose where I want to go so if you want to see a specific thing next more than something else just leave a comment and even offer you have the same request and I can always do a video on that specific thing so again I think this was one of those videos that was maybe a little bit boring the last one we did you know a nice new chat bubble and then you have to go back and clean up and add view models and style them for the other side like this video so there's always times when you get a really exciting video and then another time when there's things just have to be done there are to make the application you know real world and this is one of those so I'm hoping it was excited enough for you guys to learn how to to use one control that can be completely restyled just based on view model binding and hopefully that was you know in turn off and then the next video like say I'll probably jump onto the right message area so again you get your dive straight into making some you know nice UI again all comments welcomed so just let me know what you think and I'll see you next time [Music]

Channel: AngelSix

Views: 18,542

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

Id: hhyGwT0TFrw

Length: 47min 1sec (2821 seconds)

Published: Sun May 07 2017