C# WPF UI Tutorials: 24 - Advanced Edit Text Control

[Music] in the last video we made the settings page UI so we started with making the chi-wai which is right now just plain you know static text there's nothing really done there's no binding there's nothing there so in this video we're going to make this actually the real UI with editable text and things before that for those following along video by video I want to stay up to date I've done a small well I say a small ticket I did a video on repairing these framework animations and they just turned out to be long-winded and very boring so I didn't bother including that but all's I've done really is just fix the framework animation or did two things wanna tidied off see to this framework this animation slide indirection enum and this was a guy on YouTube that also commented on the recent video of suggesting why you know I hadn't done it as way in the first place and to be honest as there was no reason I simply overlooked cleaning up the code because we originally just started with more animation so I started by cleaning up the animations so now there's just a slide in slide out its x and out of the way and instead of having a slide in left sliding right sliding topside in bottom which is simply now pass in the direction share all the code and simply do this a little bit per direction and that cleans up the animation a lot then I also added a fix it was basically one fix that turned out to be a decent amount of work but in short these the mistake I made was these properties animation based properties to turn into specific animations and then do do animation we were setting or we were checking as an individual variable called already loaded or first load have you remember and the problem with that is this class is actually shared between multiple controls so multiple elements on the UI so we bind as a fade in to six different elements it's going to be this exact same copy of this class so the original value what we had which was it's a single boolean if one element loaded and was set to first load is true or rather first load is false on the second way around but then the next element loaded it would say that it's not the first load so it was an issue with that so what I did instead was made a dictionary and linked in the boolean to the specific UI element and then set the flag per one and that fixed that issue and then the last issue I noticed was what would happen is we'd say we are all we loaded and we're not so we'd come into here we'd wait this five milliseconds and then we'd do an animation but then what happen is would fire this value updated it would be the first loaded coming to here set it to false then the value would change before this five millisecond had ended to say another value so then I come in here this was didn't match and it comes straight to do animation so it had set it up to the correct value but then five milliseconds later that old value kicks in and animates to the wrong state so it was also to fix that issue and I'm not going to bore you with you know how a fixer it's simple enough fix and if you look in the peseta word commits and just look for this fix animation property bugs and you can see the code added here in exactly the changes so if you want to scroll that just do that you've got any specific comments just leave them in the video and I'll answer them but I didn't want to waste a video on just that because it's a fairly boring thing it's basically a bug fix so there's I didn't want to do a video just on an animation bug fix stuff that will need font or simulator for the icons for the button so we'll leave that open for now so that's the framework animation stuff fixed and then if we run this as you mentioned we're now going to do this codes let's get into it I think the first thing looking at this the more I look at it of other quick glance between that and the preview we did I think this wants more spacing and I think those are ones be slightly thinner still just to tweak that so let's just open up the settings page first settings control and let's change the width down a little bit so I think this 700 a little bit much to right on the edge so let's just bring that in a little bit more that looks more realistic then let's picture margin as well I think I'll just bump up a little bit so it's try 2030 yes go for that nice big space in let's have a look Alex much nicer now just I think you just needed that space normal space these out more in a minute as well but the first thing we want to do is to move these right now these are just in a grid all dumped in and all individual things and now when we get to one thing to add hover over and edit effects it's going to start getting messy so we want to create a another user control to host all this basically a label a Content to button per one let's start with first let's do the simple stuffs get all the bulk work out the way we know we'll need a view model let's go into the view models one one the core view models let's just tidy this up as well at the minute just make a new folder call application just for general application wide and then we want a new folder called inputs I guess for the text entry because we'll have what's called input will have more entry fields a lot like a password one and we'll have potentially other ways being input from the user they'll make a new plus we'll call it text entry view model it's going to be for any kind of text entry we put it a copied a existing view model but also want to do is inherit the base view model in this case so it's just and how it the base view model view model for a text entry to a string value now you can see this new that's one thing I didn't fix I was gonna so you can see this new one's already created the default constructor for us because I can also call the public because I added the default configuration file that again and all the YouTube comments showed me where to go to tweak this start up I can't remember top my head now but it'll be in the last video we should also edit this I don't like this namespace constantly be in the folder I should tweak the and templates I don't have to keep deleting that as well so we've already got the constructor is ready commented so we want public processes now and we want labeled which will be the name username password that's the label then we'll have I guess original text because you've got a bear in mind we'll have the tactical mes plus the text that starts getting edited in case the cancel and you want to revert so you need the original and the edited current saved value edited text and connect apparently not a word then non-committed that desire they okayed non-kinetic seems like the current non-competitive text we've got the original text the edit text label we also need a flag before it in editing mode on/off and I think that's it for properties now we want some commands for do things we'll have the obvious one first edit command and this is going to put the holder put the text edit put the this will control into edit mode then we'll have a cancel command cancels out of added load and a save command commit the work connects the edit and saves the volume goes as well as goes back to a non edit mode now let's create those commands and here so click command equals new relay command Eddie now we've got canceled save a little new region for command methods put the floor and left heading node up couldn't be any simpler editing it forced crew simple and type in the word crew correctly there we go public void camp so again it's just a simple editing those walls and finally the save so in here we'll have to do to save the content which you have nowhere to save any content yet because we have no server we have no back-end storage but it's all the plumbing that's now done ready for when we do have a so once we were saved with them go out of edit mode as well so now we've got the action here whenever we want to do anything to save that we can plumb in later so I think that's the view models for the text entry done let's make a design view model as well I'll just copy another one for the minute paste it in and this will be text entry design model that will inherit the text and preview model it's actually got the wrong description compared to the other design models it should fix that for the message dialog line as well we just which one are we in here the name the same we need to be careful here so we named this class first because it gets confusing we name the file rather click the comment fix the singleton and fix it instructor it's now in a text entry design mode we are label so we'll do name original text will do name and edited text to do editing I think it was it for the three values and then editing by default is false which is fine there's our design model for it so now we've got that we can make a control for that but then also in here where we've got this grid of currently four items these want to be view model bound so in the I think we've got a set into your model already oh yeah so in here we want Shawn texts and review models this one will be named the current users name and then I'm aware that right now we're doing a text entry for a password again we'll change that somewhere to the login screen we'll make a password entry viewmodel with you know current and previous and things but for now we'll just make it a normal one you got username password and email so there's the four properties we can now bind to and now we want to create a control so we will need to start with we go a little the longer job now start with a new folder here and controls called import make a new user control call us text and create control then in here again hide down a minute we'll get rid of the controls and inputs namespace on both of those get rid of it here they put a blur and I should add it this template as well like I did for the other one really now we just build to make sure this builds I always do that one over add a new control first just make sure it builds before we go any further so we have a buildable control now so this control wants to be the zoom out it wants to be a control / item so per row so right now the way this is all done it's not really going to work so let's just get rid of that profile details it's in column 1 there we go that's gone and then we'll fill this back in once you've got the control so let's just save that move over so starting afresh the first thing we were messing on our controls from the screenshot was the gray on the line so we know we need to start with the border to add that so I'm a border where's a board of brush of AA set of dark and a border thickness left off right and the bottom will have 0.4 so this is our and grade from the line now in there we will have again the label the text box an edit button so we need a grid filler we also want to background on it so we'll of the foreground line and at the background foreground lie and we will want three columns of it or want the label the text box in the bottom live grade column definitions common definition with Auto for the first one the middle one with the text editor come fill and then the end one can be the remaining that would be label name balloons that one will expand I'll do one side up so let's put in the actual text block now the label bullet mark in text can now be all we need to bind this actually first so we want the design-time binding remember I can never remember what this is static local where is it just local static local text and free design model dot Val you see that I think I might've got it right forms and then divides that we have something called label so will that work notice it's complaining about that oh it's not that it's in core and I'm going to define X amount in space for because it's in a call library now it's complaining about that so what exactly sneak building nope okay so that's also nice three I mean I could just look this up I always forget the design time data context else I've got it like typical go right there I just that's instance not value there we go now we have name which is the label value so we'll good there we've got the label in just start with that let's also just remove the width and height so it just fills to whatever size we need bring this over then we'll have the we'll also have a label here because we're going to have two things here we're going to have the content and then we're going to the editable content as well so the content is going to be a text block again text of original text on the grid top column is one so it goes in the other column then we will want I guess looking at it we need some padding in these two so the first one we'll put some margin let's just get some spacing around so K looks a bit high on that looks about right we've got some margin there on that control I live same again here need a bit of margin actually we also need vertical align by the police because things are going to be in a different order let's just do vertical lines Center on both and then same on this control like some margin will do 15 again okay closely matter what that is so let's just leave up there and then we have this wants to be like it let's be bolder there we go and then we'll have a button actually we need the Edit content as well so for when we do go into edit mode we will need a text box and that will be text is edited finding edited text same for exact column one as well but huge let's change that down fun family an American family different font size regular that's better they can see the slightly misaligned as you can see all these aren't quite lined up with unless just put original text for them and so we can align exactly the same text so it doesn't start messing with the let's do for just the padding first to get that right down so it's closer to the line which is not showing but there's a line you know the blue line let's remove that now let's just tweak this margin until it hits so we'll start with to see what 10 does we're going to need to do this individually to tweak each one so the top left top right let's bring it in close let's not move in now okay so that goes over there now I need to swap that need to be more so that's not far off I think I'll be fine with animation you can see we've actually got the wording spaced out more there because it's a different font I think actually you know what I think the issue is here this content needs the font set explicitly we mentioned that the font is not always exactly right unless it's specified explicit or we could just quickly spin this off and take a look at it in the real the real view so this will be text entry control this will be tricky even a stackpanel first there's gonna be a bunch of them and thread comm is one let's just run this and let's just see what they look like in terms of where they're positioned because I think we've just got a bit of design time oh yeah let's put it as a design time binding we need to change up to full binding for the minute again so let's just do data context is four rather let me just do that so buying this one we're running so you can see it's actually we need to shift back up a little bit and I think that's about it then we just need to shift up slightly let's change up to ten let's run again so you can see this what visual is not exactly perfect to how it really runs the design camera is slightly out and I'm pretty sure let's do two fonts so let's move the loop slightly back so that M blends in a bit nicer so we'll leave it at la that's close enough for when we fade because the that text in the little fade out and little fade in so you're not going to see it exactly like that anyway so it should be okay there so got the label the Edit box a content box now we need the buttons so we're going to have multiple buttons here again up there Eddy button initially and then the other two buttons afterward so let's just make a grid then let's have bridge rock polymers to bottoms container really adding button and then we'll have the text on the edit button content in the schedule took three dots clearly need to remove from a lot padding or margin so it's got padding down I don't quite trust this designer to remove all margins a minute as well so the margins are still it's a bit big but I'm sure like isn't there just try running that again I don't fully trust this designer knowing it's slightly out yeah that looks way too big let's reduce the font size as well for a bit of party man then we'll have whole family font size let's get small still looks too high oh I know we're stretching out a new vertical line Center that's what was going on there we go does it looked a bit long for a big the padding was that looks quite nice so a quick run of that maybe we've got might want to reduce the border radius slightly maybe but I think other weeks that looks okay actually I want to change that color to gray and then we want to start doing some fade animations and binding things correctly so let's change the background color to foreground dark there we go we'll come back to the other buttons after and or yeah because you want to start getting this fading in and things and working correctly so the label is a label the Edit content which is here we want to have animate fade in so we have the animated fade in property value and then we want to by not to that editing so we should run that now we should see a that's disappeared until it goes into edit mode we don't see it so that's now got rid of that this once a hand but nothing for this I don't know just so it's an obvious click I think just as a little emphasis that that's a click so to the button cursor hand also we can just bind this button now to forget with this commands now so do this to the edit command and that should actually put this into edit mode so what would happen is the Edit box should fade in usually that's faded in now but we also no need to fade out the label behind so to do that animate fade in again on the content and put that top but the difference is the content we want it to be the opposite of editing so it does make a new value converter such a copy and paste that we name this to boolean [Music] invert converter converter that takes in a boolean and invert it so we can simply have in an exact opposite and just return not a boolean value I am assuring these functions these methods into the quicker way in our short - one of the if the just returning a value you can do the shorthand that looks somewhat to making the properties but it's it's still a function it's simply there's no need for the curly bracket so just keep saying shorter so now I have a boolean invert converter just a matter that we don't use and we can go to the content and then the converter of this I think it's badness - static are too many different ways of doing this until remember converter just local [Applause] in 2000 roads at dot put on the back again was it just the name of it so should just be left thinking let's run that and we should now have the box on show and that should fade out in the other one should fade in there we can tell now because we can select and then we now have no way of canceling another minute so let's just quickly tweak the text entry view model I just change the edit command to toggle between troubles just so we can test the UI so now we have fade in fade out fade in and that looks close enough that it's the nice transition and now it becomes editable fewer annoying thing as well for one we need to change us back to the edit text and not bind directly to the well we'll leave it bound for now what we want to when you plug in that really you want it to focus and select this box words like that so let's make a few attached properties to do that go to attach properties they are um framework element button attached base attached property text attached properties could be taxed because it's mainly used well in fact it's pretty much exclusively for text so and here we'll have copy and paste this one focuses keyboard focus as element if true and I'm going to call this focus so similar to the S focus that focuses on load or simply use this one to focus at the values true so if I have a dot new value which I'm guessing is not get here so if the boolean if it's true so the new value is true focus less control and you simply do the focus itself so now we can just focus the property if we pass in or rather if we add and edit control local call so we do local focus prop it up with value and we we burn up editing then basically whenever we go into editing mode it will focus this text box that's the theory till we click this now we go what ends them in focused the other thing we want to do was to select text as well not just focus it so we will go back to here make another one on the other than will do too will simply combine them focus on select you can always make a separate one and select full text in this almond of cruel focus on select focus and select now this will need to be a set box maybe possibly a text box base what keeps a text box for now because otherwise we can't do the Select tool which is part of the text box in fact we can see where that's part of what text so we just see where this select all live with f12 and the outer is in text box dates so at least we can change that the text box and base and anything that has the Select tool we can use this on using primitives that's fine so we'll select all the text now we change it to focus and select property we should now have when we click the button it will focus and highlight all the text which is the way I think we'd want it to work you can tweak it to just select if you like or to do what you like but I think it's that's what I'd like to do and then just tap in your name that's coming along these buttons we don't want just on show all the time either these buttons wants to well dis button rather wants to be only shown I think on hover so I should to add that now so in the grid itself and make sure you've got a background otherwise to hover won't work so in grid glass over over social button this will be grid triggers and so look it again copy and paste let's find some triggers where we already do this which is an opacity it's close enough and that's a control template actually it we double animation I think be probably the best thing find so we have an event triggered that does a ask just go for it just copy this close enough we'll figure the rest out so in the triggers paste this event trigger mouse over want one animation third one then we have two duration name target property we know wants to be taste of T target name needs to be adding button which we need to then name the button your radiation will be one second just to see no pasty on however will go to one so fully visible copy that taste that go to zero on leave and so now we just need to name the button edit button and by default to make sure it's invisible before any of the hover commands kick in now you're here and on hover there we go now that's a little bit slow so there's a speed that animation on steel point for say and there we go that's nicer so now we hover over the cliff we cancel that's the hover for that so now we want to get the buttons themselves so when you click this you want this button to to fade out and then you want to show an edit and a save or other cancel and a Save button so let's make the first let's make the Eddie button disappear so it's going to be the fade animate once the fade away with the content so copy the same command paste that in there I've pasted it just below that so now it will fade out when we're in editing mode and then we won't be able to exit edit mode because we don't have the other buttons but we'll see it hopefully actually fade out so when they aren't so the issue we've got here as well is we can't have this fade in on here because we're also using a trigger to check the opacity and this fade and also tries to change it so we need to move this we can move it into the bottom container and that's going to contain other this will have to be the container for that Eddy button only and then we'll have put the other buttons in another one otherwise they will fade out as well so because we have the and this animation working on opacity that tries to control the opacity as well as the animation was trying that's rather buttons weren't hidden when we spoke last time so we put it on the parents so the parents controlled by the animation and inner buttons controlled by their triggers so now there we go so they're not visible there and then your hovered on the visible and now clicking there we go and now it's completely gone so this is now one we want to show the save and the cancel buttons so we're getting there we're doing this a lot quicker than I thought we would so we want stuck counters you've got two buttons just columns to same as the other orientation will be horizontal cuz the side by side and then we'll have the donut which way around save button the button we want is to fade in with the addict so the same as the edit content so of this button fade n I just content yeah just for now let's just we'll change us to the font awesome content afterwards why am I not seeing the button I'll be just the edit mode let's just hide that minute so I can see if or not we'll see negative yeah that's just a run see if we can see the button yep the design is just messed up a little minute there we have 90 hours to work so we can work with the compounds it's like say we'll tweak this afterwards we want when we press Enter wrong as default to true so we can simply type and press ENTER and it runs a save so the commander won't be bound to the save command the background wants to be green so if I get a positive color padding similar again to the last button nice and short vertical line Center and then for small there we go I've liked a lot of small Save button so paste that back in for the visibility copy and paste for the cancel button to the counter bottom I can put an X for now finding the same as default wants to change this cancel but escape button when you press escape on the keyboard to cancel out this will be the console command background will be so that word orange is like a negative color and I think that's if that's just run that and see we should be sitting area the Eddy buttons faded out for hover that's why we can't see anyone so hover over we see those click and it's more padding there but you can see we've got two little buttons that should cancel and also got padding issues that it's growing shrinking growing shrinking but these should now be triggering the well sort of hands on those you should be triggering the actions so this button wants a margin of say five to space out those the Beaufort cursor:hand and then we had issues with when these buttons were visible so let's just fun fact yeah the padding was just too much somewhere so as we or was it the buttons this check of it was the buttons format need to just remove a long margin fireball around last zero stop zero right five bottom zero just want to push out the margin on the right let's just remove the bottoms are men and let's see if we get that jumping down let's figure out this the text box or the buttons that have got the extra padding I'm pretty sure it's a text box so hover over no no for the buttons of the buttons are adding not sure I'll have what the buttons seem to be pushing out the box large room that they don't feel so something slightly off there because maybe we've got you know why are they because it's the same as go up into here up there let's change up 2.5 so then I get likes point 4 yeah I'm not sure why this is growing because they don't fail anywhere we've got to zero out the margins on that button because by default the button style has a margin so that was why just make sure that margin is zero now we shouldn't have an issue with it being too big there we go so now we get an ax hover over to edit click fades into an editable text box click the close or click to save and we'll put those button images to some fonts or some icons but also let's before we forget to change the Edit content back to actual edited content edited text and let's also make sure that when we go into edit mode change that back to normal and also set that edited tough to be value so whenever we cancel out of edit mode we expect it to go back so basically I set it on the console simply whenever we come to edit we'll update it with the latest current value so this is edited text equals original text go edit mode so now if we edit some text and then type and cancel and come back it should revert to the original value which is there you know the behavior years expect so change it cancel I think from the scraftman it's the same so that's what we want and then we could simulate the Save button here just for kicks this won't also save anywhere other than in the RAM but we could say original text equals edited text and then go out to the mode and that's the not really saving but it's obviously committing it's the view model so in memory it's it's matched and this is the affected gear so you'd click in here you've gotta cancel reverts clicking here type save and it saves so so you've canceled that's the box working and I think we just tweak these icons now and then I think that's I think quite happy with I think that's everything done there so we've got the cancel the save and the hover effect so let's just fix those icons so what do we want for you want like a tick for the save all under the gun actual save okay floppy disks a little bit retro thing for the Save button that's it tick or a check maybe whatever the call in it must have there we go yeah fhx oh oh oh see so we go to fonts copy paste font awesome yeah I'm going to call it tick and it was out Oh see so we can change the and where are we the Save button content will be that and the font family will now be font awesome so now we should have a check button for the save there we go and we want a prop across them in this case little font or some cross and know how to do not search for I also leave the other than cross so see we didn't spot it guess it bit clothes or cars or maybe alloy wheel clothes so could be instead of see don't really have that doing no so that's the tech clothes and that's there we go however a nice-looking UI in fact let's change this dot dot dot to an actual ellipsis as well which I think we've already got and that lease the old match and the wall nice-looking icons who that's not too good okay let's put a a bit more padding on that button because now it's oh no that's the wrong way around that's right it's a vertical one so we only have a vertical that's just okay let's go on get there is on poor lapses so one for one let's call it ellipsis one for one there we go that's massive so a little dot for editing you click you have a technic Lowe's tech now works and like it's only in memory but the whole application keeps the same instance it actually technically immersive and well they're apps running but it again will do that properly will save to our date to store and we have one black gives you an idea of making this quite complicated but quite neat user control that's completely now view model bound and all you have to do is bind the values and you can now have a so you can present anything to the user to to save out you know edit text so I think we'll leave this video here next video we will make the will basically change these values in the settings you model to be the actual ones name username password email and then we'll make the password box as well so that we can see the password so we'll do that in the next video hopefully this was a bit more fun video we're back to doing some I'd say bit more exciting thing about this user control I really like these little buttons and keeping all the effect except thing it looks nice so hopefully you enjoyed this video another one will follow soon [Music]

Channel: AngelSix

Views: 16,258

Keywords: wpf, settings page, text edit, edit text, textbox, control, settings, slide up, dialog box, custom, ui, style, view model, tutorial, mvvm, binding, popup

Id: DG7XcBWHuwg

Length: 55min 8sec (3308 seconds)

Published: Sat Jul 08 2017