C# WPF UI Tutorials: 06 - Attached Properties

[Music] so in the last video we created this login screen in WPF and we got to the stage where we need to fix this password field so right now is just a text field so you can see the password you're typing so we want to change this to a password field so we click the password here start by just changing this to a password box and then let's run and see what happens now and we style the text box so obviously the password box now is a password box but there's no style so the password box very similar so all you need to do is open the text style which was this one here and just go ahead and copy and paste because it's so similar I already know the templates basically the same change the type to password box and then ctrl click to select ctrl C to copy and then change the type u as well in the control template and that will change the template styling to match and that's your bills we need now so if we run again we should now have a password box or Stiles and you can see now we've got a password box that style the same the only difference is now we're missing this placeholder text and this gets a little bit tricky now because WPF by Nature almost 40 s view model behavior mvvm and that means that really the UI should only ever bind to properties and should listen for events and it should act in that way so there shouldn't be any code behind in your class if there is this should be very little so the issue we've got here so we take all to the style the way we did the style is scroll down we had a data trigger and we bound it to the text property of the text box and when that changed to a value of blank we made the placeholder visible now the issue with the password field so let's just jump to a class somewhere so we look at the text box first and we were buying into the text now we're in binding to text as you think we were if we were actually binding to attach proxy but you can't see that so we just flat tax and then press f12 this will take this to the actual control and you can see text is just a string but in WPF when we've done the binding to string it's actually bound to this thing here text property which is a dependency property and you can think of that just like the view model I know t5 property changed and in fact if we step into that you can see even though it doesn't inherit that it's in the windows Base which is a WPF specific assembly it's actually got functions that are similar to property changed so you've got like your events I will scroll well anyway you can think of this class there's no point going into depth of this class book think of it when you're buying into a dependency property as the same as buying into a view model when the text gets changed you get an event 5 back to the UI that then fires off all the events in the UI if we then go to the password box and we do 1 you've got no text now what what's called password but that will matter and we're bound to password we take a look at password then you can see there's no dependency property for password so there's actually a rooted event for the password changed but there's no event for you know the password tax changing so we might be able to bind to this rooted event but then we want to bind to the text change in and whether there's a password in there owner so it still wouldn't really help us because password changed rooted event if we go to the receipt event is just the name and then you know we can't check the property so we still don't know when passwords change whether it's got text or not it's not exactly the same so it's now an instance where we need to add some ability to a UI element in order for it to style correctly so the next thing I would have done is gone now let's just subclass the password box so you making new class my password box and they tried subclass password box and then you'll see now it's complaining and you can't derive from it because it's sealed so sealed instead of it being public or private or rather sealed is different than the accessor so sealed means you can no longer subclass you can't then and have it from this password box so now we can't add any ability to making you control from password box so then the only other option from there with them because making you control that then inside has a password box and then when you do that you actually lose a lot of functionality in terms of it's still being a password box and it becomes a real big rabbit hole that you go down so with that eliminated the last step which would actually break mvvm and view models is that you could say okay then I'm just going to listen out to the password change event and then in the code behind which is this is where you want to stay away from as much as possible you could then say well I've now got the sender which is a password box and you can then access the secure password or you can access the password either way and you can do like the length and then if the length is greater than zero which is then try and find from the password in the code-behind go into this template find by templated name this placeholder then set the visibility but what you're falling back into there is the old windows form style of doing UI coding you're then making a code very specific your logic for that is very heavily tied to being in sui itself which means that when you went to a different UI that this placeholder being shown and hidden based on that fact would be totally different you have custom logic there's many reasons why you don't want to be doing that we want to just bind just the same as we've done here we want to bind to some property so an eye notify change property like a viewmodel property or a dependency property they're really the two things we need to do so when you've got no other option to do anything without breaking mvvm and I think this is why Microsoft probably made attached properties in the first place is you have to fall back to something called an attached property and it's basically a dependency property so like textures but it's an arbitrary one that you can attach to any element so we can attach it to the password box and you've actually seen this in grids so we're going to grid here and see inside the scroll viewer we can do grids column and we can set a property that's effectively associated with a grid on an element that isn't a grid and this is an example of an attached property so it allows us to specify extra pieces of information we need on UI elements to enhance the UI functionality that's all the purpose should be for the only time you should use an attached property is when you can't do something in UI and you can't do it any other way and that's my personal stance on you know when to use attached properties so we're now going to use it to fix this visibility issue so what we need is a property and we're going to call it say has text because we don't care about what the password is we just if we've got a password we want to hide the placeholder otherwise we want to show it so we're going to call it has has text and then this all has changed to has text so first let's just make a folder and call it attached properties and then let's make one called password box proxies for now and then in here we will now create an attached property and this I really didn't like I don't we'll have to fix this book you watch what happens when we create an attached property so we just want one called house has text so we want the Profeta called has text so it needs to be a dependency property the pen nibs gets low there and dependency property it's going to be called half text now the first quirk this is the name we want has text so to make an attached property you have to put a word frosty after it and that's how WPF finds it that's now going to be a new owner so not new it's going to be a dependency property and then we want to do this register attached function and this effectively registers it with WPF then you have to manually type a text that's the second time we've now written as text we've written it here then we've written it here but with property at the end we need to tell you what type it is instead of just defining a variable as you normally would we want it to be a boolean and on top of that we also have to tell it who the owner is so we're you know what its parent is which is again a type of and then you have to pass in the class static Tim so you can do it really really game messy and then finally we have metadata which I believe is the default value of this property effectively of the boolean property if you will and then we have to make that inside of a new property metadata and pass false and that's not even the end of it so already look how messy this is just to make what should really be a public boolean has text yes set equals false that's what we want to do that's all you have to do instead you have to do dependency property has text property and then equal the dependence property values you then have text in text and the type in a type of than their owner in this and then a new method a turn and false and that is just to register that still won't work now we have to make the getter and setter we have to make this and this and again you just follow naming convention so you have to do this can be private actually private static void set has text so now again it's the third time we've typed up text and now we put the word set in front of it and then inside there we want the password box and that's the element then you make a function and then you do the element set value so now we're setting the value of the inside the password box that is where we're attaching the property so you set the element and then you want to pass it Li have text property so this is where you're attaching that property and then we want to set the value true or false to whether the password boxes secure password length is greater than zero so if it has any text then has text becomes true and then as well as that we have to now do a will do a public because we want to be able to access this in the UI in the template and it's a boolean and it's called get out text and you can see where I'm going with this now the fourth time we've taught this text would so you don't here than it here than it here we're doing it here as if each game really it's actually hard to type because I cannot stand repetitive cone over complicated things than this is such a and messy design by windows so forget we now need to just do the needed castex these really elements don't get value so from the password box get the value of their house text property we also have to be clear not obviously and there you go all that is to do effectively this but in a way that WPF understands as a you know so you can attach this so now we could attach this property to the password box but the thing is we need to also listen out for the password box so we need another attached property and this is where the danger of having things where you go multiple times if I accidentally mistyped something there it was still compile and work well not work it'll compile and they'll think it's worked but it won't really work because when you try to attach to it they won't find the other names same as here you can you can mist I for anything in all of them and every single one I'll compile you can now compile that obviously other than this part these are too much here but this doesn't have to do this doesn't after this enough do so that alone is as dangerous to be able to tag comes in little compile and have an issue anyway moving on that's the has text property that's a lot of code just for that copy and paste all of it just want to be slightly lazy and now I'll carefully rename these we need now want to we need to monitor that password changed event in order to them set this has text so we'll call it I guess monitor password all then copy Leicester here a type is going to be and that doesn't matter what the type is actually you can stay as a boolean is we're not going to use it for that then we change this text here we change this here and set to this through a minute we need actual value so we'll just pass in a boolean here because really we using this a sort of a a way to actually hook into the password so when we add this attach property to the password box as you'll see we simply use the set money to password event - then say right let's go ahead and actually who can and start listing out for the password changed so it's just finish this off it'll make sense in them and I'll go to me head boil you'll see where it's going in a moment and then you want to get the property so again it's just return the property so these these are just state to phasic Gator in setters flat we've done here the only difference is we've passed in a value here this will need to be public because receptor needs to be accessed in code so there's your getter and setter so that's great it a bit from here for now I'm not commenting this by the way because I don't plan to keep this I've got to redesign this in some way I just want to show you the standard off-the-shelf way of doing attached properties so we can now attach this money to password property to our style but we also need to listen out for when it changes so that we can do the hook in and actually listen out for the password change so in this property method 8 as well as the default value you can pass in a callback so for that callback we'll call it on come on is that password changed and we'll create that which is to control and dot on that and it gives me an option to generate now generated this event so this should get fired whenever we attach a property so let's just put a breakpoint there so now to use this monitor password and this has texture we go back to the style of the password box in here we can set the proxy and this is the same as doing we can set it in here and just do local : class for a box properties don't monitor passwords it's true so we can do it there and that work is just that the compiler is complaining but that will work fine what we want to do that in style so in fact we can just take that because we want this on all password boxes by default we want to set this monitor and we want it to be true so now this password box should call a lat access property and when this property changes here it will call this so we've run this now if everything compiles and I've written that right we should effectively hit this function because we attached the prop in there we see so now we've got access to the password box here in the dependency object so now this is almost like the constructor if you will you can think of it because we've attached the property here so we've set the this attached property on the password box also we've used that for is to fire off this event changed of the fact that this is on so inside this monitor password first we only get the password box which you saw was there but in fact let's do a as so it won't crash the application if it's not and then if we didn't have one there's nothing more we can do again no comments because I'm going to remove all this shortly so now the password box we want to say remove any previous event and we need to make that event much comment at the moment then if we are attaching so if the value we set and monitor here to true then we want to hook into the password changed so that's in the events new value so this event new value is this value we passed in if that's a new value we want to hook into the password box so password box up password change plus equals press tab twice and then just enter to give it that name and this is created the callback for us so now I've become the password changes this will get fired so let's just run that again let's do it step by step so we hit here we get the password box which is something the new value is true what we passed in so then we hook into the password changed now if we type we then hit this password change so now we've got a password changed event so we can now use this event to set this has text property and then we can hook into that has text proxy in the UI as the thing that we want to hide or show the data so because here we flipped into the event each time this value changes by default let's just remove that event as well otherwise if we just keep adding you get end up with two events and three events than 40 them so this cleans up the previous event and then if we want it to add we then add the event and every time we change the monitor password we want to set this has text property back to false by default or back to whatever the value should be so we just want to call this set has text on the password box initially so it actually has the correct value at the start before running on typed anything so to do that call has text property so Seth has text and pass in the password box that sets up the default and that's really it that's that's now going to when you type in monitor password on your property here that's going to hook in listen out for password changes and then it's going to set the has text value there and then we also want to every time the password actually changes then we want to call the set as text again and the sender is the password box so we're just doing the same as this every time it changes we update that the have text property so now the password box will have similar to this it will have this property but it will have text as the property so all we need to do now is in this binding here instead of binding to text we want to bind to password box properties dot has text but when you binding to an attached property again another little quirk in WPF is you have to wrap it inside of parentheses and that prevents it's just the way that WPF resolves attach properties this is sort of lets it know it's in attach property and we've got the data trigger has text when it's visible we want it to be visible when there is no text so we have to change this value to false and I think that's it so let's run this I sense a crash coming on ah no just something really slow now we've got a breakpoint you move that breakpoint there we go so you can see password the hopefully there we go so we've now added the same function as a text box using an attached property and this is how we've done it and it's again it looks very messy so this is just to make one property and using all these neat app in there's four or five times you're defining things in strange ways when in reality all you want to do and all you should have to do is do something similar to this just you know probably boolean has text getter and flatten and set the default well you want it to be as close to normal as you can so that's done and that works and that gives you a brief overview of attach properties and again the only time you want to use them is when you're trying to enhance UI functionality and that's the only time you should use and so we're trying to enhance the way this UI works to show this placeholder and you can't subclass and you can't do any other in a way around getting that UI to happen then attach properties or your fallback and it just lets you add as you've seen in here to basically add a property and then do things like when it changes you can then access that UI element and then hook manually into events similar to the way you'd work in Windows forms but then when your vents finish and do what they want you then jump back to setting dependency properties or you know doing something in a UI manner so it might be a little hard to understand why to use them at this stage and they look very confusing but hopefully you get the gist of what they're doing and the best example is like I say the grid so the grid you contains multiple items and this is one of them and you've seen the grids in other examples like the window where's the window main window and we did this grid and we had some other example keep going there is a grid with column definitions so we want this the header here this column to be there that's come through there so then these elements that are anywhere in the grid have this grid column specified so that then it can lay out specifically but this has no interpretation of what a grid is it doesn't understand anything but yet you need to tell it what column it's in so this is like a prime example of where attached properties are useful so that the grid itself the parent can say well of all my children what is the column value attached to that element so it's a way to you know store information on elements in UI that the the actual element you attaching it to has no idea about you know this value doesn't know what to do with it and you aren't that logic yourself so that's all dormers sort of the point of the tutorial but I just I can't stand this we need to clean this off there's no way we want to do this and so we make 50 properties attach properties there's no way you want to retype this all the time and you want to rename this well let's rename house text okay well maybe to have text all right so that's done once but now we've got to rename it here now going to do rename has text and now you got to do it here so we namely get a head set and now we'll do it here so you've got to rename it four times every time you want to just change the name of a property and you've also got to type it that many times you've got to type all this and you got to remember all this it's it's an absolute nightmare so I'll start by deleting this I can just go we're not going to do that so you've seen what we need you to do that we need to create three different things we now need sort of a base for this so let's call this space let's call it base attached proxy let's get rid of all the unused stuff and this is going to be a public obstruct slash and I believe I've done a video on genetics I'll have to check I won't go too much into generics right now I'll do a separate video on them after but you can make generics it's a way of passing in unknown information into a class or partially unknown information so in this instance it's a base attached property but we need to we need to know something about you know the pen which is going to be our attached properties that we make and we need to do things with those parents and if you will leave that the parent class of this class so it's sort of a way of handling that so we do this angle brackets to do that and then inside here we can just say the light of T and that's now this unknown element which is just a type of property and then if we wanted to make a subclass of that we can do my attached property and that's of type base attached property open and we'll pass in say a boolean not a cool a boolean calcific target word class and now my attached property is of this type base attached property and it's actually of this type boolean we've decided but now what you can do is jump back to the base class and you could say do a public void a let's say a puppet strings what's my type and this could return type of key dot to shrink safe and now every class that inherits this base attach property light as my attack property if we then make another class just see towards Nixon in 2017 okay and then we do say making you a touch property in ZM has now got what's my type and this would return the type would be the my attach property or base attached property bully in whichever this returns I'm not sure what the point of this is you can have a base class that can do things for the parent class a various tags again so I'll do it a specific video on generic sport that's that's what we're doing the reason for passing in an unknown is so that we can do things with the parents and then the parent can simply inherit from it can get their the added benefits so it'll become more apparent now this gives us a proper description so base a touch property replace the renault swpa attached property and then it's going to be in fact we'll call it tea you can call anything we'll call it parent so the parent parent class should be the cut property and we also then leave the property itself so after we're going to now have a class for the property so have text is going to be the class and it needs to be a certain type like boolean so we need a tie so we'll call this property as the description there type of this such property we need we'll need an instance of the parent in order to access and call functions on it so I will make there properly and we'll need an instance because as you saw with the other attached properties everything was static so there's a set value with static the get value is static that the property itself was static whereas we're creating a class that's not static so we need a way to access the class itself and this is through a singleton so it's just a single instance that will always be this type or the type of the parent in this case so static and then now you could specify the type here like boolean we're going to specify this this unknown type which is parent so it's a public static variable of type parent which we don't know of we know nothing about it but we can create an instance of this parent and this is where generics really comes in handy so there's the instance we want the gaster with a private sector because were the only ones going to static we want to make it a new parent so a new version of our parent class to do that because we know nothing about this we don't even know whether you can create a new instance it could be an enum and you can't create new enums so we need to tell this subclass this base class rather that least that we're parents whole on new and that's a way to define some information little bit similar to ask you out and this tells the basis property that the parent can at least be nude it's something that you can create a new instance of social object so now we can create this new instance of a parent so any property that enhances from message subclasses the base attached property we've got an instance of itself in the static domain as well so this is a singleton instance of our parent class and again don't worry too much about them to stand in this this is this is quite forward balanced this is something I just do naturally but I can tell how this is quite a complicated thing I'm doing I'm trying to explain it but it might be sort of 40 videos in future where you fully understand what I'm doing but I'm going to explain it anyway and you'll see the end result and you'll understand the benefits of the end result it just means you don't have to write the attach of properties in a nasty way you can just use this class and make them really easy and that's good enough for you know now you don't always have to fully understand the code in order to use it as long as you have you know an idea of what it's doing so don't worry too much I don't expect many of you to grasp in fact almost all of you I don't think will grasp it exactly what's going on right now but it's good to see some you know really advanced code if you will it's simple yet advanced it's going to be a very small class but there's a lot of complicated things going on so now we've got that property we need the actual we need to jump back and do the actual attached property definitions of you will we still need to make an attached property somewhere so we're going to have to do the get value set value and value property things so I could have kept the old file and copy and paste it but I guess left to retarget now so now we're just going to redo what we've already just done which is make the standard dependency property that was dependence across key unless is just what we've done before I deleted the code file we're going to call us about you because they it's a single Templars my singleton rather it's a base property so each class is just going to have dot value which is the attached property so we're going to attach to a value so instead of it being has text property which it was before because this is a generic class and can be any I'm just going to call it value property we're going to do the expense acrostic register attached again one name we'll call value so we're going to have to retype value four or five times but that's the only time we're gonna have to do it after that has been done for us now the tag before was to the property type it's a type of the property we pass in so we pass in a boolean then it will be a boolean now we need the owner so the owner is going to be a base attached certainly attack while effectively it's this that we're going to attach it to ourselves we are the parents so apply path and then this class and then we want the new trusting metadata and we want we don't care about default value we just want to get this callback done let's make a new proper property changed call back and then inside that it finally needs a function so we'll call this on values property changed because we'll need this to do the monitor text thing will generate that with control dots and finish that so this is the actual attached property is such process for this plus and this is the full-back event when the value property is changed when below that well this is the UI element that was changed that I get property changed arguments for the event in this property changed well then we'll come back to this last let's just move on to the other two functions we have to do which were public static and then this time we want to return the property whatever that is again because this is going to be passed in so this is like where we did the gap into that this will be the gap value and we need the dependency objects passing in and that's it and I'm started doing when you've got like single line of functions like this you're going to do return the property of the elements get value of value property I think that's right so when you got one line is like this as a function if it's returning the value simply remove the return and then either way if not if it's a you know an action doing a single line then it is it's already you know a single line like that just delete the curly brackets put a space equals great for them delete the other curly bracket and then there you go it's sort of defined similar to a lambda expression so greater than equals and then the single line that we want to do in this case get the value and that's now up still a function still a method but it's declared in a single line it looks a bit cool and I'm shorter so that's still just a you know it's still a function so it's a function that returns a property and then this is the property that it gets there's just no word return here and there's no curly bracket so that's all that's doing that's making that even smaller so let's get the touch property and then this is the owner to get the property from only the setter will be void set value dependency object and it's going to be property value and then again we'll do the one-liner and we'll just do d dot set value value property and the value that's the attached property and this is the same like - so that's the conventional attached property thing we have to do for every class so we're doing it here but passing in using the generics to pass in you know the type of property where we want we've got the on value property changed we now need to add events so that we can actually listen in so that you know the callers can listen in on the property's changing things like that so we've got an instance there so we want a or an rather event so on public event this wants to be a probably event it's an action it's going to return a rose a little bit in it's going to pass in the object it I didn't press shift five times so I passed my dependency object which is to send us like the password box it's also going to pass in the the events which will contain the value so the property expensive process each Ange given tags so that's the pack of events it's going to give us the sender in the the arguments because that's that's what he does here and we'll call this value changed we'll make it a new blank methods well event the sender and the augs yes right in a minute there we are fired when the volume changes so that's just an event we can fire so then in the property changed we want to fire that event but we want to you can notice this is not static this is again on each class that we make so that you know things can hook into that event so we want to do Polygram listener it could be instant stop value changed oh yeah we also need to tell the base attached property to the parent because the parents always going to be a list type we're just passing the parent in so we know effectively the parents always going to be ours it's going to be the same type it's going to be this type so we do a little trick here in the way and tell ourselves that the parent is always ourselves if that makes sense it's always going to basically subclass in this class so we know it at least we know that the parent is going to be of this exact type of whatever we pass in so now the instance we can access any non-static information that's in the base class as well again probably over everybody's heads the book I'm going to explain it anyway value change let's plug in the same information we had we're just passing it up to the parent now and then as well as the listeners we want the parent to just be able to override an event like we want to really override this but we can't because it's static so as well as having a property changed event we want to be able to do something when the value changes like a virtual a virtual function so as well as the public events we want a event method and there's going to be a probably virtual because this is an abstract class see it doesn't have to implement so we're gonna take virtual for Eid while actually we do need to put abstracted virtual Spanish means it can be over in and pour on value changed again we want to dependency object which is the sender and the pendency object arguments is e and we just want it to be nothing for this one the methods tools when we value when any touch property of this side changed UI elements that first property changed for and the arguments for this event and then in this on property change we also want to fire effectively the parent this will be this will be the parent function at the override so call the parent function again you'll see this in use in a moment the incidents dot on value change passing the information again I think that's it we've got all those functions got the value in then to up to get to the setter and that's it so it's a small class it's 82 line to get rid of surplus space it's 81 including the the end line and so again don't worry too much about fully understanding that if you did that's great if not I hope that this will become understood fully because videos go on and I explained your notes in more depth and these things and more depth and you know I'll go a lot more in depth but hopefully now that's enough property-based we can now just add another class and let's reimplemented property if you want so password box patched properties could give it whatever name you want just delete that plus we don't need that now so now to make an attached property this works and I'm gonna put it through right let's start with the house text property so we want a public class has text property want to implement the base value converter that's not what we called it the base attached property or the base setting call it value converted to that now base attached property it's the base attached property of okay we just slow it and telecenter bacon so it's always going to be its self is parent so it's this and we wanted to get boolean and [Music] that's s voila there's an attached property one line and also have to do is specify effectively ourselves so we rename this it will rename both instances so we don't have to worry about we typing things and we've told it what tight the attached property is now let's make the has text attached property for a password box ass it's not going to find that is in a different name space and certainly is fine in the namespace in lazy again there we go so that has text tax property for the password box and I want me what did we call it before monitor monitor password in the Corbett public class reminder password property the base attach property itself its own tied monitor passer abductee and again it's a boolean and that's it we've just recreated the to attach properties with one line give this the route in and then now we also need to if you remember rightly when this property changed which we hooked into the password changed well that was the reason I made this event method here so we can override on value changed which was originally passed in in this value dependency property at the very end was passed in here but because dependency properties have to be static then when we're creating a new class you can't access the static members you can't override them so the reason I did that was so now you can just do override on value changed and that's it so now we've all got access to when the value changes and we don't need to call the base because it does nothing so now when the property changed I want to get the password basically exactly the same code as we did just in the previous one it's the sender as password box if I can remember what I've typed I think it was a password boxes until returned let's comment this get the call make sure it is a password box if it is then we want to remove the previous event handler which we haven't got yet will come up out in two seconds and then if I think it was boolean a bit event new value so they actually passed in true then we want to first want to call the or hook into the password change the event plus equals tab twice that'll give us the event and then we can now step back up a moment let's remove that then remove any previous events if the full set monitor password to start listening out start watching out for password change keys then when it changes and we just did did we do we just set the property again we also set it here so set default value which is the house property which is here so you want to do the has text property dot set value because we included those helper functions it's going to be the password box itself and now you see we want to pass the value in the previous one we had an asset value that didn't accept a value because we wanted to work it out based on the password box so we could do it here and just say password box secured password length greater than zero what the issue there is you set the default here but I'm going to password changes you need to set it again so you then end up setting password box sender isn't up having to set it here as well so we don't want to repeat ourselves this logic we're going to bake into this house property it has text property so to do that this is a class now so we've got complete access like any other normal class we're going to just do a public static function because we don't want to access it like this just give it the same name set value give it a same parameters send a bulge is not going to ask for a value so we're going to create a second value a second override for this set value we're going to remove the logic there so now when we call set value you press f12 where you just look it's going to call this and then this will then do what we did here so we copy that first paste it in here and then we just remove the value the logic there so now we set the value with no parameters and this can now pass down the sender and we know the sender is a password box so we put the logic here and then this set value as you can see here you press f12 it goes to the base class so just sets the value of whatever we want and this is allow you so we've moved the logic of you know setting a value to instead of the caller having to tell you what the you know the reason for that value being a certain thing we baked it into the house text property directly so sets that has text property based on if the poor password box of any text so we've moved the logic into the right place and we've effectively repeated the logic of the money to password from the last example but now you can see it's a lot more standard looking to create a house text property we just override this and then we didn't even need this we added this because it was custom logic to set the value easier and that's it a nice simple class no funny-looking dependency stuff going on that's all baked into the space attached property and then for the Monica password which is a more complicated example it's just as easy we override the value changed which is just a normal event a normal method and then we do our logic in here and when we want to set values we just do them by calling the classes so it just looks a lot more standard comment this so there's a nicer way of doing it so now we've got the money to pass her a property that has text property the only difference now is when we reference them in the zamel you don't reference this because this isn't an attached property you simply reference has text property docked and you need to call the property now you can just be called has text you want to know who can to this value property sir and we've registered it called value so we go to the text and we change the two places one was here password box properties don't money to password becomes now we're in the normal namespace so it's just money to password property so just get rid of that and in fact intellisense should show up it's not going to yet so this money to password property value I believe and then here it's going to be has tax property value and I think that's all we'll need let's try and build in looks okay it's running let's see we tie and now we go so now we just replace the whole ugly looking to touch properties with a much cleaner way of ice thing I just need to be loading at the login page yeah I'm failed to create ah okay so I paused on this one and how to quick Luke fixing that compile issue it turns out that I think I've discovered a bug in WPF seems to be a fairly well known bug as well where generics aren't really supported in sam'l so it looks like WPF 4.6 has made a lot of effort to support them it turned out the issue was in the fact that this style triggers data binding and style triggers specifically still doesn't support generic classes so all's I've done again the quickness there's so many ways you can do it I just remove the text block Styles completely so now we just want to and I can actually delete the easiest I was playing with trying to get to ignore it design time and things so now the text block in the style instead of having this style on the triggers because that's the issue with the binding or simply bind it here as visibility directly to the house text property and because of the boolean we then simply make a attach property value converter which is just something I called it for testing so basically I just made a trip to quick value conversion here to test that simply then takes in the boolean and returns the visibility from it so really such a boolean to visibility converter let's just rename that and let's move that into a class called the same and then this can be reusable and then we'll just comment this to state the fact and that's the class that I sort of value converting we can use which simply going to return a schedule of these or news classes it's going to return a visibility based on a boolean properties so now we've just found it like this and as you'll see now the login page is quite happy doing so and it still works if you run the application oh we've renamed this go into visibility compile still works here and when you run the application it still works here so that's just another way of again using accomplishing the same task in multiple ways so one way was to do this styles which to be honest the new ways a lot simpler than that looks how messy that style is all the does is I guess that sort of bypass is the need for a value converter but really look how much works involved there to basically take them you know say text of this value and change to this that's really a value converter right there so I'd say we start dropping the style triggers considering they don't seem to be keeping up to date with the support as well and then the new way we did it was a simple one-liner so has property value and then we just pass in a converter and that's what so hopefully this video was a useful we've been over the attached properties and then we've also created this base attached properties allowing you to much simpler or to define much simpler attached properties just as classes so yeah the next video on the way for week now for the next video will be on the e least next Sunday I'll hopefully try and do it on the Sunday thanks

Channel: AngelSix

Views: 59,897

Keywords: c#, wpf, mvvm, view model, attached property, attached properties, login, signup, form, flat, modern, guide, tutorial, password, placeholder, watermark

Id: trR5RQGEteM

Length: 62min 13sec (3733 seconds)

Published: Sun Feb 19 2017