Templates and Behavior - WPF CUSTOM CONTROLS #1

a lot of people think that WPF is difficult my goal is to make it easier today we're going to be going over how to make a custom control in WPF that you can reuse as many times as you want so first thing we want to do it is I'm going to show you guys actually what we're trying to make here so I have it in a little test project and all that we want to make is an analog clock that has an hour hand so I'm in a hand in the second hand that moves in real time and the way that we're actually calling this clock is we're just calling it with a saml control so it's just one line it has all the functionality wrapped up inside of it into a custom control so that's what we're gonna to be doing and let's get right into it first thing we want to do is we're gonna create a new folder and we're just gonna call this we'll call it we'll call it custom controls and that's gonna have our analog clock in it just give me a regular CS file and we'll make it public and this is going to inherit from control and that's gonna allow us to call it and zamel let's actually go ahead and do that let's go into our main window import that namespace let's call it custom and put some controls and now if I do custom add a colon get in the name of space we can just plop our analog clock right there and the control is in our window so let's run the application whoops gonna switch to start our project go ahead and do that and of course there's really nothing here now let's go into our analog clock and what we actually want to do is we wanted to find a style for this clock said it has a look to it and that's going to go into a resource dictionary and we'll call this analog clock style and this is just gonna have the default style for the analog clock so we're gonna to find a style target type it's gonna be the analog clock which is just the name space is local since we're in the same namespace and we're gonna a setter for the template and this is what the control is gonna look like so let's give it a value it's gonna be a control template the target type is of course the same type that we're styling the analog clock and this is where the style for the clock is gonna go the default style the default look so first thing we probably need is a grid and it needs some lines because we're gonna have an hour hand minute hand the second hand and then we're also gonna have an ellipse for like the border of the clock let's give this some properties a stroke it'll be black strip thickness would be about one would give it some vertical alignment horizontal alignment what else do we need and we need the start point for the line that'll be zero the end point would you say negative 100 that's what I use when testing and that's what worked for me let's just try regular 100 though and then we're gonna copy all this to all of our other lines and of course this is gonna be the our hands we're gonna make this shorter and the second hand is going to be red instead of black and let's go into our ellipse this is gonna be black as well once your thickness will give it a width of 210 so I want it to be a little bit longer then if two lines were lined up with each other it'd be 200 pixels long so we want this to be a little bit longer so that the lines didn't touch the end and of course the same height so it's a circle and I think that's actually all we need for the ellipse now another thing that we need to do is we need to give these lines names because we're gonna need to search for these lines in this class so that we can manipulate them so we're gonna name it apart secondhand and part is just a naming convention for custom controls you want to name your elements inside the default template with part said if anyone tries to override the default style they know what kind of names to give the elements and then we're gonna have a part minute hands and our hands part already breaking conventions here now while we're at it we'll give the ellipse one so part order okay so that should be good for now for the clock and now how do we actually give it give the analog clock the style well we're gonna need a static constructor and this is where we're gonna define the style to user is a default style key property type ever ride metadata type of it's the type of our clock and new framework property meaning metadata meta data I'm gonna have to import that and all this is gonna do is tell the application that calls this constructor hey we need to override the style there's some style out there that needs to be applied to this clock okay and how is it gonna find that style well if we run the application now it still can't find it doesn't know where to find the style and for WPF what you have to do is you have to define a folder called themes it's very important that's called themes and inside we need a resource dictionary called generic dot sam'l and that is where this constructor the server I made of doing it that's where it's gonna find this style so we need to actually put this resource dictionary into generic that's animal and we're gonna do that just with a merged dictionary it's a marriage dictionary the source of it this is just the path to get to this animal so starting from here it's in custom controls an analog clock style dot saml so now that we have that we should be able to run this and it should show the clock and there it is and as you can see actually it's it's all like centered and I did find when I was testing if I made these negative that's why I wanted to make them negative because it pushes them pushes them that way and another thing I want to do is I want to have these at the top actually so to do that we're gonna have to put a little transform on our grid render transform and we're gonna rotate it by 90 degrees and that should that should fix that so all the lines are pointing to the top although it didn't because when we rotate it say it's say it like rotates it it like rotates it off the screen we wanted to rotate in place and to do that we need to set in origin and we're just gonna set it as the center of the control center rotates along the center there we go because otherwise it was rotating along like a point out here I know we just rotated off the screen that's not what one okay so we have our style to find that should be all that we need in here for now so we can actually close that out and we have our anti clock anti lock lock being drawn now what we actually want to do is we want the clock hands to update in real time and to do that we're gonna need the override we're gonna have to first off get I wish I had this okay let's save in this backup we're gonna actually have to get these lines into our CS file so that we can manipulate them and to do that we need to override one apply template so when the template is applied that's when we're gonna read these values and to do that let's actually define some variables up here line got an import line and this is going to be the hour hand and then we're going to have a minute hand and a second hand and we're going to set these after the template is applied so template that's the template of this control we're gonna find by name and we gave these very descriptive names of part our hands and the template of parent is just this so let's do that for all of our could all of our lines here getting an error I'll fix that in a second do a minute hand and second hand the reason that we're getting this error is because when you actually cast these two lines there's probably safer ways to do this you might want to have a little if statement check to make sure it actually is a line before you do this caster also get some kind of exception but just for this tutorial we know their lines so we're just going to leave it how it is and now that we have that we're gonna have all of these lines in these variables so that we can manipulate them and what kind of manipulations do we want to do we want to update the line angles to correspond to the current time so we're gonna make a function for that update hand angles and we're gonna take our our hands and we're gonna give it our brand they're transformed once again and it's gonna be a rotate we're rotating the hands put that and we're gonna base this rotate off of the current time so we're going to say daytime dot now dot hours divided by twelve point zero X that's how many hours or one in Oh o'clock and we're making this point serious that gives us a decimal or a double in return and we're gonna multiply that by 360 I said it would give us the angle out of how many degrees are in a circle and then we're gonna of course rotate along the center so we don't get the same issues that we had before with the grid and we're gonna do this for all of our hands the minute hand the second hand except this time it's gonna be 60 because our 60 minutes in an hour and 60 seconds in a minute and now let's just call this function after we have all of our hands in variables that we manipulate and yeah we're gonna update the hand the angles so let's see if our clock actually shares the time which it should and it does I don't actually see I don't see the minute hands maybe like the second hand the minute hand we're right over top each other no I don't see them I hadn't I didn't switch this this needs to be a minute this needs to be second that should be okay there we go so the current time is 1021 and this is pointing to about 1021 and I don't know what what seconds it is but that's I guess like 25 seconds yeah I don't know what it is in real time all right so that we have that now what I want to do is I want to update these hand angles every single second so that's acting like a clock and to do that we need to dispatch your timer and why it's just about your timer and not a regular timer is because we're dealing with UI stuff here so if you use a regular timer you're gonna get exceptions because you're trying to manipulate UI elements from a different threat the dispatcher timer is a part of the UI thread I believe so we're gonna have that timer and the interval it's gonna be every second so that's a time span one second every time it ticks we're gonna give it we're gonna tell it to update the hand the hand angles and let's start this timer and all should be good except it's not why is it not I'm an idiot I said timer let's stop that time I got started okay how it should work there we go our clock is moving along and the best part about this is since we made it into this wrapped-up custom patrol we can just define as many clocks as you want you can just it's super reusable no whoops let's make this a stackpanel so we can see all the clocks and there we go we have all these clocks so that that pretty much does it we're gonna actually extend on this and future episodes maybe add some of this dependency property so you can customize the clock just from inside zamel but that's gonna do it for now thank you guys for watching I hope you learned something from this and be sure to leave a like comment or subscribe for more thank you

Channel: SingletonSean

Views: 18,942

Keywords: wpf, programming, visual, studio, xaml, custom, control, generic, system, drawing, line, clock, analog, display, dispatcher, timer, template, binding, behavior, c#, how, to, series, tutorial, help, easy, time, hard, reusable, maintain, package, design, patterns, part

Id: -YJqoZFAGPA

Length: 15min 44sec (944 seconds)

Published: Sun Oct 06 2019