02 - XAML for Windows 10 Controls - Custom Controls

hello and welcome back to Microsoft Virtual Academy this is module 2 of zamel for Windows 10 controls that's right and we're gonna be building out a great custom control nice to have you back there and nice to be back alright so some controls yes we're gonna dive straight in over to you Jerry on your zamel all right we we know what a custom control is thankfully because of our previous session and now we're gonna build one and let's just go for it and so I it's a complex control so it'll get you a long way down the line yeah let's have a look at your visual studio all right so I've got Visual Studio up and I'm in a blink app this is a it happens to be a template in app but it is just the blank it doesn't have anything going on except main page and just so you see kind of where we're starting from it's got this is in theory our Terms of Use and this lorem ipsum is the complex Terms of Use that we paid an attorney for yeah yeah so so uh I don't feel ripped off at all anyway if you look at it's just a stack panel with a couple text blocks in it we're good to go what we'd like to do is create a button control not it we'll call it a composite control that has that will allow them to submit the terms of use but only after they accept it and so we can kind of go from there and so we'll put that right here but we don't have any sets of controls so let let's create one when we're gonna create all of those obviously now I'm gonna put in the route that just be the sloppiest thing ever we'll put it up in the controls folder and which will be in the controls namespace nothing would stop us from putting this into a portable class library as well we don't need to kind of go to that level but you certainly could do that that's what these are sort of meant to do all right so here all the types we can create there's templated control daijoubu item yes exactly so far so good what would you like to call this Oh what should we call it submit button submit button checked submit button it's checked submit button that's good enough for me perfect now it's gonna create the class under the controls folder which would expect but also it'll go ahead and create our generic zamel for us as well so that's where everything is going to be beautiful beautiful alright so let's take a look at the base implementation that's what we're looking at here let's get rid of we start all projects by getting rid of the documentation there's clutters my code and never revisit it that's right yes Danny how's the font size alright with Danny's approval we'll continue indeed very very nice alright so um so this is saying that the default style key is going to be the check submit button which we know is defined here in zamel for us okay we need to fix our little issue there with a namespace that's right first thing is to have our name States declaration up in the resource dictionary so don't have to mess with any kind of build errors I'm gonna go ahead and build just make sure everything is nice and nice it's always good to start from a firm foundation of compiling code okay from at this point it runs yep it's downhill from here okay let's see what we can do you know I I don't like I'm gonna go I'm just gonna shut off up serial I'm gonna go to the settings actually not the controller did you do do do I'm just gonna disable that regeneration beat things up so it's quicker yep now when I build you don't see that little dialog because it's not doing it because it's already done it funny it keeps doing it you know what I mean yeah yeah it's consider they are annoyed yeah maybe there's a change yeah one second ago you did it alright alright let's build out what this might look like by default it gives us this little border I don't care really much about any of this all I care about is the checkbox and the button that we're going to put in here so let's you can't put two things in type in a control template you can okay one you got to put them inside a panel I'll put it inside a panel I will elect the stack panel but I could put anything there okay I will put the check box at the top and we'll give its a default content of I agree let's just say okay that's usually what it says you know as you I think so of all the things you don't read and then a button and we'll make its content submit let's just say that's just nice very nice okay let me think yeah that's that's done I feel pretty close to shipping let's build this I'll jump over to zamel I'll open up my toolbox here and I should be able to see then there it is so there's my check submit button or your check submit button depending on how you want to claim it and I'll drag it in very nice I can see it right there yep some problem with this resolution it's hard to see everything that's right I mean yeah it's kind of tight and I spend more time rearranged in Windows alright so there it is that built out you can see it's a perfect way it's highlighting I have a single Oh object here that's because the template defines everything inside one that's part is beautiful if I were to run it now I'll go ahead and do that so here's my bla bla bla bla check and submit no rationality yet but that's my default that's what it looks great already yeah honestly it is kind of getting it it's nice now sometimes I don't want to have I agree I want to have I submit yes I comply so let's start by creating a dependency property that will specifically change just the text of the checkbox it's good so remember it's prop DP that we get that for free so this is at one of the snippets that ships in Visual Studio hey give me a double tap and I get that for free you don't double tap tap there I double tab I said double tap but I meant double tab that's exactly right and we'll call this the check text and so for sake of Awesome naming and right here what class is it belong in it's gonna be right here in our check to submit button so this is the and finally it's way over there isn't it yeah and it's lines up so it's going to say I agree is the default text so I'll bring all this around here in just a second I'm gonna change the magic string for check text there to name of let me just open everything up so we could see the whole thing and am that is our finally we got yeah yes and so yeah so this is nobody likes this right literal strings so we can say name of and we can put in tech tech so now to insert that for me when it actually compiles yep we like this and great so it's it's for this one and this is the default property now because this is a dependency property it's easy for me to data bind to because this is the implementation of the style it'll already be in the context when I'm in that style so now I can go back to generic zamel and here we are I don't want to take away this literal string of I agree in this case I'll say template binding because one way is fine for me right exact change the text of the check box template binding will go to what we call it check text check tips I think you didn't look at that it's hey visual Joe is my friend on this exactly alright beautiful so now I should be able to do a couple of things I should be able to go back to probably might need to rebuild to get rid of that but that's it is what it is let me go here so here's the here's where I've placed it on my page I'll have a new property now called check text and I could set that to I really agree really agree great that's terrific alright I'll go ahead and run it and a build will fix all those squirrely underlines and I really agree that's pretty cool so we put it in the Declaration of main page and then that flows into the implementation of our button which is bound into the template of our button that's pretty neat okay that's thing you can probably do the same thing for the button text yeah let's just repeat that with the button text I'll just copy and paste so I don't do things twice and up here I'll change the word check to button what do you think of that capital B that was great Jerry all right so B utt Oh into B you to do it there's no way we could have left that alright so this will be submit submit will be the default value all right very nice and so obviously the word check didn't need to be replaced right there so now we have two properties one for the text of the check box one for the text of the button both are basically built the same I'll go back to the template again and I'll say well here what saving this before the template binding and it's going to be button text beautiful same thing as before I'll go back to main page and I'll change it it's button binding to or it's button text I mean to click here let's just say kind of craziness but it could work perfectly as well and with a rebuild that even the design time would work great click here and I really agree yep I mean so there's custom properties so now we've created some things that influence the display but we haven't done anything that implements any behavior yeah so let's begin by maybe making it so that button to submit which we see now is click here in design time which you would want you know you don't want to be able to click that button until you agree let's you agree yeah it's not an uncommon scenario now that's I can do all that in visual visually I think it declaratively I think I don't need actually do anything in the code itself I can do it all with binding so let's try that out I'm gonna start by giving the a name to both the check box and the button let's see oops X since I've seen so my check box is I think you were suggesting that earlier and then maybe my button ah beautiful yeah originality all right good and so let's make it so this button is not enabled and so that's gonna be easy enough I'll just say is enabled equals false so now the button is not enabled great but I want it to be enabled if the checkbox is checked of course the checkbox has a property called is checked that's already part of a checkbox so I can say binding to element name so the key thing here is you're now using binding because you couldn't use template binding to do the element name resolution that's right because the context of template binding is the control itself not one of its peers here okay and I can't use X mine because it's not supported in a content or in a control template yes so right so first I'll just set the context here so I'm right now I'm binding through the entire checkbox that's not what I want become wise yeah yeah what I really want to do is bind to is checked and so I did it reverse like that sometimes I do that you do it too I'm sure so that you get Intelli sense otherwise it doesn't know what you're binding to so I can't give you intellisense so here we are and of course this is the same as path equals and those two are identical and won't be able to handle that with my OCD that's for sure on the wrong side of a coma I could barely think straight with this blue underline here I could tell you right now all right so this should give it right so the check box is not checked by default yep that means that is checked would be false which means the button would be disabled when you check it then the button would be enabled well that's that really works out great yeah I'll go ahead and hit f5 we can see what that looks like I'd say we get punished for going off-script nice so here we are not checked a not check so it's disabled I'll go ahead and check it and now it is that's really great that's really great we're really getting a lot of functionality fast for free that's what sam'l does for us yeah it really is really is all right what else should we do well I think we need to actually put something in that happens when we click on the button all right so the button automatically has a checked event or a click clicked event why don't we give a clicked event then to our control we could do that or we could look at commands we oh that's right I mean that's a typical way of using a button isn't it dude yeah add a bit button and then we could look at the can execute aspect of the command as well if you wanted to go down that route yeah let's do that all right so I'll jump over to the implementation of our button again here we go I already have these two property I'm gonna just kind of minimize those because they're pretty pretty healthy in size I'll copy the check to text and we will just use that as our base change check text to command now in this case the implementation of command is actually pretty sophisticated we're not going to be doing that we're just going to be passing it through into the button which already has the full implementation what did I talk about chec kt EXT it's live check it text check to the text oh I'm putting IDI for some ways all right checks text check text check text it's murder to say so much harder than you think all right so this will I'll set the default is going to be to null and I'm gonna change it of course this isn't gonna be a string this is gonna be an eye command that's an interesting interface for example it is it is it's something that ships out of the box but somewhat interestingly no implementation of I command ships yeah yeah that's right yep you have to roll your own fortunately in template 10 we have yeah that's right if you're a fan of other mvvm frameworks like a medium light or Caliburn or something like that you get it also but it's also part of template ten this is a template 10 project we actually have it so that's pretty nifty we'll just say I command so you can pass in any implementation of command that's the way the button has already wired up to go and so if I go back to my button definition here I could say command template binding again because all I care about is that property I'll just say to the command so now this is nice because the rich functionality of command that we interact with with a button now I can do that just pass through you don't have to worry about any of the logic in your stuff yeah that's exactly right I'm not gonna implement it I don't think back in the main page I don't have a view model or anything like that right now but I could write if I went into the control right here I can still see now there's a new command I can pass something no exactly that's not the best use but yeah all these properties I could pass X Knoll to all right I'll just leave them empty so that's important actually because if you start having controls to have some sort of rich capability you want to bubble that up to you want to make it exposed through your control so you're not recreating I could implement a full command interface as well yeah calling can execute determining whether or not I should set everything disabled or not but that's not what I want to do yeah yeah and that might be important because maybe can't execute is since it's outside of the control is determining whether or not the user has scrolled all the way at the bottom you know before that actually so there may be other rules and so on that you're dependent upon but aren't implemented yeah that's no you have to have a external control yeah so this just gives the developer more flexibility to be able to create anything they want and be able to keep the kind of the functionality they're already accustomed to all right it's a pretty easy control so far yeah let's see now let's go to events so I think that is worth bubbling up as well when I click that event I might want some or when I click the button I might want something to occur or even still when I check that box I might want something to work yeah right maybe think maybe somewhere else my UI something else is going to change whenever I click I really agree but don't click the button yet right so both of those are kind of important both of those are events that are natively part of the controls that are what we're using so let's go in and remind ourselves that my check box and my button are what we called these controls and if we remember kind of what we did before or what we talked about in the previous module we can call those templates we call those parts of the template in the on template upon apply template on apply template that's right in fact let's just do it oh yeah why not rooo don't do all right be rude not to yeah that's exactly right so first let's create just a reference that we'll be putting those in two the first will be a checkbox we'll call it my checkbox and that that equals null for now yep wait because we don't have a reference to it it's not a field or anything like that yet we have to go get it and then the button itself it will be my button so this is very similar to what happens automatically for us when we're praying say a sam'l page or whatever and we give an X name to a control the initialized component parts are in the constructor of your code behind is basically running the same code that's right as soon as you're as soon as the code is tightly coupled to the sam'l it can do this for you because we've decoupled them you can't do this for you so we're doing it manually yep easy enough all right so I'll type an override here and this is going to be on apply template that's the one we want that's what it gets called as soon as the template is available and in there we have an additional method that's given to us called get child get template child get template child into which we would pass the name so remember it's a my button for example highly complex yes as button it was gonna return that as a is gonna return that as a dependency object so that's not enough for us right you're gonna want the click event of a button specifically that's just one better than an object you're right well yeah all right so there's some things you're gonna want to do so because I'm the author of this control I want to make sure that my button is actually there because it's important for me so I would include then a little bit of logic here that says if if my button equals null no that is I would throw a new null reference exception throw a new no reference exception I must not have re F er I must I have some using system I don't have system there's a lease cuz I'm putting up your control that's the problem if you clean all your references when you've got an empty class then you're not using anything yes that's where snore of all of all the exceptions I know exist because I've hit it so many times all right then we'll just repeat this then for the checkbox so as nice as that is I think it actually makes more sense for us to have a utility method that does the casting and the testing because we might end up that we have two three four or five ten controls and all of a sudden we're repeating this kind of needless code so a nice little generic method will do this for us that will return whatever yeah we'll call it t and well in fact let's just copy this and call it so we can still call it get templated child with a generic of T and in this case all we we still want the same thing we want string name and that's all or so we're gonna do the same operation as get templated child we're just gonna make this a a of type T right so here we go so let's take this logic right here and just kind of duplicate it for now and I'll say VAR child equals get templated child I'm not gonna pass in a question mark I'm gonna be passing in a T I know I'm gonna pass my name yeah and I'm gonna cast it as T of course this will not work the reason it won't work is because T could be anything at this point exactly so we're gonna put some constraints on this let's see it's a dependency object yeah so if I say where T is finish the object now it knows it can cast it properly like that using an ass now I'll check again and I'll say if child is null because I can reuse this logic now then I'm gonna throw a null reference exception and I have the option to pass in string here so I'll pass in the name so when I get that error I know which property is no yeah I'm probably finally you want to return me back yeah well you also want to return that child don't we perfect often helps when one wants to compile so now I can kind of simplify this by saying button letting it do all the casting and the testing looks they're real and so that's all the same logic and I cannot then go into here I can say it's like you've done this before I I've typed C sharp in my in the past yeah checkbox and then it's name is going to be is a capital B it's neither it's my check post B for box silly all right so I reordered it because I wanted to be in the same because you are not handle that all right very good all right so this is nice you know I might even you know I can see this as I'm inheriting control here if I have a whole bunch of controls I'm creating I might put that in a reused base as well yep might even make a might even include it in some sort of library like a template ten library or something like that I could see an extension method I could do that why'd you do that off of a string passing in a type yeah you do that and B you'd see it everywhere but you see everywhere that would be really annoying yeah the bad you can't can contain or constrain a an extension method to a certain class type that'd be really neat I mean I know you can too what it's off of but I mean inside a certain class dad or some some sort of scope oh yes you could just by declaring it well don't use the using everywhere else yeah don't put your class in system course I didn't have that problem earlier all right so that's a nice little utility method that'll get you along the way really fast right and so then you can do all kinds of tests you may have other tests you want to do as well not only to make that make sure that it's there but to make sure that maybe it has a certain value that's necessary if your for your button to work correctly all right so that's where you go get them on apply template is the first time you can go in and start looking for all the controls that are inside the template and then you get them by name and there's really nothing we can do about this my checkbox being a literal string that's just the way it is there's no reference to the template so there's no way to get it I can move that up into a constant yeah but somewhere is gonna be a little string some way there's gonna be literal string but fortunately if it's just in one place at least if you do a typo you fix it once it's fixed everywhere yeah yeah that's right so yeah there's there's only so much we can do to get away from our human foibles I said I suppose I could make it could force him to call the control in the template the same as the field and the used name of the field if I just hated literal stream inspector I do hate literal strings in its own right okay so this is good for us in a couple of ways now we have a reference to both the check box and the button now we can do things to or listen to events off of those controls so I'm going to go ahead and and listen to the checked the event of the check box and the clicked event of the button in order to make those useful for my control however I have a place I need the set of place for those to bubble up - so my there's an event on the control itself so I'll create a public event and with an event handler and in this case I know that both of those are going to be routed events so I don't want to use event args I want to use routed event args like so and I will just call this clicked and I'll just duplicate that for checked I better put it above it it's alphabetized now yeah well I didn't want to get it wrong alright so now I have the references here and I'll just set up their their handler to pass right through it so I'll say my check dot check checks there's the event and in its handler I can just have it a simple anonymous handler because I'm not doing anything special I can call I can raise then our checked CH e cked and I'll use a question mark dot the point another nice entry in c-sharp six little bit syntactic sugar that does a null check for us and we'll only execute the invoke method should check not be null and because this is an event checks would be null if we didn't hand it any subscribers to that event yeah just because we have this capability doesn't mean a developer's going to use it and so check that could be no so now we'll just repeat that is really a great it simplifies the logos yes things I'll do it the same thing then for clicked that's when the button is clicked obviously not that though when the button is clicked then I can call our clicked event and invoke that as well passing in all the args you may not even use those arcs in all reality I could have done it as a regular event with regular event args but you might want them for the pointer or something like that and then now you've got it because maybe you want to fly out or something like that yeah I could see that actually now we've that she's studying for making behavior as well as look and feel yeah that's right and and pretty simply too right I mean it hasn't done too much really we've got a handful of methods our properties down here these two new events and and this capability of making sure that it's disabled even until the user accepts the terms and the ability to flow through the simple updates of text right this would allow for at least basic localization right away sure and and the ability to flow through if the complex stuff like I command to make sure a button is still a button and you don't ask a user to do something that's I'm not natural for them to do yeah yeah so like pizza yeah you should probably hook up something to respond to those events let's do that all right so if I were to go back into main page in fact let me do a quick build so I can make sure I have everything available to me clickety-click all right so here inside the event I'll say if once the button is checked clicked not the button is checked then when the button is clicked then it'll be a lot submit clicked I'll jump to its implementation and code behind here by hitting f12 mm-hmm it is possible that that is magical to somebody and there I'll do something and so in this case I know exactly what I'll do we're gonna put a dialog up because what else do whatever want yeah exactly you certainly don't want to journey into the crunchy goodness that is the app that's implemented behind the Terms of Use but I don't have the entire app yeah I suppose you could call out to an app using protocol active yeah you could then a little something else and it passes back something that says they they accepted so you only have one in a family of a hey you could so you could charge ten dollars for this thing which could be an MS news launcher your app is actually free but it doesn't run until you accept terms which cost ten dollars I like that Wow we just became millionaires overnight I know oh my gosh all right so let me tell me just told me you message dialog lowercase I add the using for that it's gonna be thank you thank you very courteous thank you mate okay that's so you feel comfortable yeah and speaking English show a sink and oops show a sink and and word and wait a minute but of all the things to get wrong what did I do wrong you pass in a string yes and there's a waiter there's a sink is it what you hey what you had a way to show async message dialog I pass in the stupid stream oh I bet you've cleared out the namespace that brings in the syntax for show async on a task you know you got the two different types of asynchronous hey oh my goodness there's no system anymore yes yeah oh yeah I know what you mean there you go come on was supposed to take care of me there what's the problem alright so it turns out that showing message dialog is still the same ship a new framework all right all right very good all right let's see what this looks like I'll go ahead and run it I'm breathing huge sigh oh my goodness thank goodness I know how to show a dialog all right so I'm gonna let see lorem ipsum dolor sit amet it seems good go ahead I'll buy three for that and then when I click this now I get thank you mate very nice I like how the new dialogues out can go outside like that yeah yeah it's nice I don't like have the fact they have no border whatsoever I know it that's not the only place I see it - no it's unfortunate alright those aren't decisions we make those are not decisions we make right we're just we're building on the platform we've got all right embrace it very embrace it I kind of like it I like it it's clean alright why don't why is hard to see let's look back at what we've done in fact I think what might make this interesting for us to see might just be able to look at this in a diagram so we can get a feel for the control that we kind of just built all right let me this has a neat little autosize thing I think that's so cool click it's neat alright never use this view yeah oh yes yeah it's nice especially especially when somebody else's project like I can't I can't look here well it's great if you actually code for other people and you deliver stuff that you can create you allow your documentation you can right-click this and say where's the good image there's a good image there it's copy image yep beautiful yeah oh yeah it looks so pretty over into word it looks like you spent hours on it yeah and it alphabetizes the properties so if some bozo has built it and it's not alpha dice you don't have to worry about it it just makes you happy Jerry's i I mean I it's worth saying checked and clicked is in the right order all right let's look forget the fields cuz they don't matter but let's look at the properties so we have these three properties that we created but the command the text for the check and the button text now in all reality that's probably not enough for a control you're gonna create you're gonna want to pass in a few other things like left-to-right right-to-left so they can control different things for localization you might even want to change the way that focus works you may want the entire thing to be focused you may not in this case you probably wouldn't you might want to also add automation properties as well to make sure that your bubbling the automation property of the checkbox up through a property inside your control to make sure that screen readers can still read that checkbox now there's been kind of nested and hidden inside your control and this really comes back to that decision around whether you're going to ship a control that's gonna be used across a broad range of applications and environments and so on and so forth you know to a certain extent Microsoft has tools and controls that ship that support all of these different scenarios which is to some extent why that there aren't as many controls as perhaps you might expect get to see shipping out of the box because frankly it's pretty difficult to cover all of these different usage scenarios to go through all the different testing and so on and so forth so think about that when you make your controls available think about the target and if there are limitations be very explicit about it because it's unfortunate if people invested a lot of time leveraging your toolkit only to find that there are limitations that are no longer suitable for their scenarios yeah so let's do one last thing which will be pretty cool via we are using this control now no developer would do this in all reality but I think I want to show it you'll know developers right that's fine no conflict there right exactly so now I can go to the designer course it's nice we have design time support and for cleaning that binding logic is there I can go into a designer right click and say edit template now in this case if I said edit current it would that would actually be our generic but that's not the way this works right edit current would only edit a custom template that you're creating for one and so if I said edit a copy it's gonna say okay well this is what we're gonna call it this is where we're gonna put it I'll say put it in the page dot resources that's gonna be above us call it this and I'll say go and it does the amazing feat truly this is the amazing feat of pulling it out of a generic zamel and giving me an exact copy of it you can see there's my button or there's my checkbox there's my button with all the names and everything we just typed now what's great about this is I I have determined that this always has to be foreground of of red let's say and you can see over here in the designer it works perfectly because this is my new but this sort of introduces the problem again of when we reach templating now the developer goes in generic and they're like you know what checkbox absolutely positively because of because of the law has to be below the button or whatever you know and from this point forward we're we're compliant with the new regulations in our industry and we're ready to go but unfortunately the developer has gone in and retell it'ld it so now if you run it you would think it would be back button checkbox but of course you're gonna go to the closest scope and it's still checkbox button right because we've returned plated as well so that's that's a little caveat in a warning but it's a cool thing to to be able to go in and say I wonder how it's all put together they all put together because I can copy it yeah you know and to the point you made earlier on this is a great way to learn how to build advanced controls is to look at the existing templates look at the existing styles going to generic dot sam'l and so on and so forth yeah so there it is obviously if I put this inside a a PCL or a portable class library or just a class library one that's not port a non portable class library a non PCL PCL then a non p CL yeah go anyway that's stop it there's no jokes with the word letter B we're talking about I think we're gonna recap oh yeah that's that's right slides let's go back to your slides that's exactly right so so if we started by just customizing it right so this is basically what we created as far as the template for our control intentionally separated from its implementation so the developers can go in and read template if they need to yeah we showed how that's easy to do but we also talked about the caveats around it as well so in this case the checkbox and the button both are there and it's at the developer's leisure to add as many as they want and then expose up the different properties that they need to mm-hmm and so we also remember when we were getting the the part which we called by name and the part was that get template child get template child and we overrode that and not overrode we overloaded that in case another one that was that was a generic so that we could pass in the string like we would expect but get back the type we want and do all the testing so they don't have to repeat that logic over and over again in this syntax you can see we've got it actually the name is actually in a constant but again you can't get away from the fact somewhere they're gonna have a literal string more than likely yeah then we were talking about adding behavior to it so in this case the custom behavior was actually the accomplished in binding changing the enabled for the button to toggle on and off based on the enabled or the checked of the checkbox so that was nice yeah and interesting in it because you could actually disable certain functionality without even having to subclass that control that way I actually like doing as much as I can declare div leak to be honest because of the design time support yeah so that's cool and of course you could add functionality also in the implementation as well I could have actually done all of this in the implementation that worked worried with any data binding and that's a decision you get to make partly because you may not want developers to override its behavior so think about that twice when you're doing it maybe you don't get the design time support but maybe you do get the encapsulation that makes sure that the control works the way that you think it's going to work that part's nice and then we added some custom properties right and we made sure that the the content of the checkbox the checked status of the checkbox the content of the button and all of those are exposed up as proper properties of our very of our own control so they can be accessed not just so they can be accessed too clearly in zamel but also so if any of these need a to participate in localization they can also participate in localization I would imagine I would add several more properties before I'm done for sure yeah yeah for sure but it's nice to just kind of show the basics then we talked about extending the capabilities so that it we have different events in this case we're just bubbling up the clicked event that's inside our control and we're just bubbling up those routed events as well using our own checked but we could have we could have done it even more you know we could have created one that says you know it's a terms are accepted event true or false we could have even edit a boolean of terms are accepted property before that you could bind to that as well and something happens when that occurs as well yeah but could have been a an event it could have been anything of course it's c-sharp so we can do anything we can do anything we want on that yeah that's really overpower yeah that's exactly right this is a query making it all custom here and kind of brought apart so now we have a our class library or our class diagram that kind of shows the different pieces that we had that are custom and yeah it's nice here there's a great list yep nice and reusable right I could have dragged this on about 16 times if I needed Titan you probably have I probably have just to prove it works that's kind of what we did when we were high Darrin on the other we encapsulate all this logic it's all template ready right so that means that any developer can come in and make this look the way they need to if they have to and so you get to control kind of the how much of the capability they get to re template as well it's all data binding because we used dependency properties instead of regular properties it's all programmable whatever that means right yeah because we've made it all extensible so you could I could reference it from the code behind of the main page yep and I honestly believe Nami we picked a sample that was as simple as we could come up with but for obvious reasons obvious reason at the same time I believe this is a pretty simple approach for you to be able to extend the functionality of your application if you're on a team and you have multiple projects or you're just on a team and you have different types of developers to do different things creating an encapsulated control can be one of the smartest things you ever do exactly because the great thing about that is it prevents other people worrying about how to do a bunch of things you can just encapsulate it you can share it and I think you did a very good job in terms of introducing all the various elements of what will go into a control you know thank you distilled it down so that it showed there's nothing to be afraid of putting those controls in there's nothing to be afraid of finding those parts and so on sometimes looking at the documentation it can seem very very imposing to actually attempt these controls but I think this but this particular scenario I think it was very good so this is the second of three modules in this course the first one really went into the details of explaining all of the stuff we did before we did it this is just walking through the steps of you were really gonna build your own what would it feel like and what if it wasn't just a silly hello world this is more than hello world hopefully it's the sort of thing that you might actually create for your application hopefully it kind of breaks the barrier and doesn't make it seem quite as imposing as it was before this is a custom control made with separated templates right there in sam'l you can ship it as a project or you can ship it in your project or you can just reuse it because it's in one of your namespaces it's all up to you sometimes this is the right thing to do sometimes a user control is the right thing to do either way they're straightforward to you as a developer and easy to use we'll have a third module coming over talking about styling and resources where we'll take this this control and or something like it and we'll talk about how to use all the resources to make it awesome sounds good we'll see you then see you then

Channel: RG Edu

Views: 14,169

Keywords: MVA, Microsoft Virtual Academy, Microsoft, Windows, XAML, Windows 10, XAML controls, accessing controls, packaging controls, universal App, XAML for Windows 10, XAML for Windows 10 Controls

Id: qUDaB_KZhKs

Length: 39min 22sec (2362 seconds)

Published: Mon Dec 28 2015