 Welcome to the Network Engineering video blog. I am your host Michael Crane. Today's video we're going to be looking at how to add this label right here to our router nodes. You would think that would be you know fairly simple and straightforward but not really in WPF. It took me a little bit of time and some head scratching to get this to work so I thought I would make this its own little standalone video because I'm sure there's other people out there that had to scratch their heads on this one as well. So yeah so what the goal is today is we want to be able to add a router and it needs to have its own unique label on it so you can differentiate between the different routers especially when you go to add a link right because if you want to if these didn't have labels on them you wouldn't know what router 0 1 and 2 would be right. So if you watched the previous video the video you know about adding the links you're probably going well how do you know which one is which and that's why we need the labels right. So let's get started. I'm going to just jump right in and try to I'm gonna try to make this a fairly short video so if there's any questions if I gloss over something just post them in the comments under the video and I'll try to answer them okay. So I'm gonna start in the main window xml.vb class basically a main window class here and if you remember this this is not new code this is old code this has already been checked in but I wanted to show this router.name. This is what we want on the router as our label right and we'd already updated this property and and this name property right here is actually part of the user control class so so I didn't have to actually create the name property it was already inherited from it looks like framework element right. So yeah so what we do is when we add a router from our main window right when we add a router we instantiate a new router node class call it router we get the index the canvas index oh here so we get the canvas index from the canvas so we know this is a unique idea on the canvas we just marry the two router underscore whatever its index is to make its name and this is the this is a unique name basically any object on the canvas but specifically just for our routers right because we when we go through our nodes we want to search by what type it is and its name right we want to use that as our label on our GUI right so yeah this is I'm doing a diff right now between router node Cisco router node dot xaml this is the original which is already checked in you've already seen this and this is the new one there's a couple things that has changed I took this height and width out of here that really has nothing to do with working on today but I did that so it automatically inherit its height and width from the main window because that's who instantiates it right and so I just kind of cleaning cleaning it up a little bit the rectangle codes pretty much the same until we get to the rectangle fill all this grayed-out lines are what got deleted and all the green lines on the right over here what got added all right okay so here's where the label comes in and and yeah that that's that looks a bit convoluted but believe me it could be worse so I would like to say that I I read all the ends all the documentation on on user controls and you know rectangles or the shape class and fill properties and and visual brushes and all that stuff but I didn't I kind of stumble across this paint with a visual visual brush and this is in the WPF brush as an overview you can just Google visual brush you'll find this and this is how you do it using the code behind but we want to stick with our MVC model so I want to visual objects and XML okay and remember I was saying it could get worse well this is worse I didn't read all the I read some of this stuff right you have to right to kind of figure out what the hell all this stuff means but I basically just took this example here and and hacked away till I got it to do exactly what I wanted it to do right yeah so what they are doing if you read the example is they basically just put hello world on top of this whatever that drawing is right and that's what most of this junk is right here is drawing that that weird shape so once you kind of weed out and all the drawing junk that they added in here which is super confusing they should have never done that but anyway they did so once you weed out all this junk you basically just get you know here's your rectangle and you can say visually have to say visual brush visual I didn't use this and then you have to use a stack panel because you want to you want to put something in the background and then you want to draw on top of it which is gonna be our text so basically you're gonna stack them on top of each other and that's kind of what they did here they drew all this junk in the background and then just added hello world on top of it and that's what this text block is right here so if you look at it see these the stack panel right here and the stack panel background right here that's everything in between this is just that drawing right and then they just add text block on top of it and so that's what I did I just basically took that hacked away out a bit and close this real quick this is a little easier to look at yeah so here's the here's the rectangle visual brush right don't even know what that means I guess it's visual visual but brush not visual see this is where reading the the documentation would probably be helpful but like I said I was just hacking away at that example yeah so we got the stack panel background I just put the router image in the background basically and that was it and then on my text block I just um this margin right here is to center the text right the foreground is white which is basically the text color and this is the text name and if you ignore this binding stuff for a minute you can just put whatever block whatever text you want in between these two quotes and that's it and that's that's how you get text on top of this this rectangle it'd be nice if they actually had a label property for rectangle but and if they do I wish someone would let me know because uh yeah this was kind of a pain yeah so so now we get our text on top of our our router picture right that was just part of it we wanted to be able to add the note name the router's name to each individual uh instantiation of the router of the Cisco router class right and that's where this binding comes in and this right here was a real booger to find um it's it looks very simple once you look at it and I'll explain it here real quick okay so we're binding name which is the um the name of the of the class geez I hope this makes sense uh which is the name of the class um with the element name router all right yeah uh yeah it's it's kind of a scratch right it kind of makes sense I guess but um so I'm I made some changes to the code to see if it would make it a little easier to explain uh what's going on here with this binding because I I think it's important and if you understand it it's it's pretty easy to to implement so up here I in in the user control um name I I put its name as xaml name right and in the class you know I I went ahead to initialize the class name and I said me dot name which is my name is is going to be class name and then I write it out okay you know my class name so it'll pop up down here in the debug window and we go to run this and then then after the main window instantiates the Cisco router node and assigns this to the name right here you'll see that the class name will have to I I added a a print statement right here our debug statement under the edit node which we haven't implemented yet and it just says my class name is me dot name again so it's the exact same debug statement is right here except this is after it's been instantiated and and the name has been the class name has been updated so our xml is binding this is the class name name and and it's binding it to the element name xaml name which is this guy right here let's go ahead and run it and just take a look at it real quick I'm okay so we added it and here's our router it says router underscore zero add another one okay so everything's still working just fine now if we click on um edit that's where I add the debug oh so if we look down here at the debug so here's where I I added the first router add router zero his class name was class name which is what's initially initialized as I added the second router router one and I clicked on edit node and um and as you can see it dumped the debug statement router zero right so um yeah so this is this is the the variable in the class that it's binding to and it's using our control as part of the Cisco router node class so it it knows um what class to get this binding name from okay and okay well if you have any questions I'll I'll try to answer them the best I can but uh yeah it is a little bit confusing and and like I said I kind of went through their quote unquote simple example right here and and yeah I was having problems with this data you know this uh I this is like some kind of two-way binding and this path and all this other junk they got set up right here and after some poking around I I came across you know okay I just want to bind to you know uh something in in the class you know it's shouldn't be rocket science all right let's just stop this and um I believe that says let's see um Cisco router node okay so we went through this uh probably a little too much these these other lines here I was just cleaning up the code a little bit removing and adding um you know spaces make it easier to read uh as far as the code behind goes um oh well here's the junk I added oh maybe I'll leave it in this time and then later I'll I'll take it out all right now for some reason it it said that I made changes to this link dot xaml but for the life of me I don't see it I don't see it doesn't have any red or green so I don't know but anyway I'll I'll check it in I I kind of went to our I went to the github site and I kind of looked at it and said well it looks pretty much the same to me so yeah I I don't know why um visual studio thought something had changed but anyway don't forget you can support the network engineering video blog by uh donation using a credit card and or PayPal or by purchasing products at the muxall store details and links are in the description under this video well that's it for this video I hope it was helpful if you like the video give it a big thumbs up that helps and hit the subscribe button that really helps if you have any questions or comments post them in the comments under this video I'll try to answer them the best I can thanks for watching and I'll see you next time