 Welcome to the Network Engineering video blog. I am your host, Michael Crane. In today's video, we are going to create a single parent application that holds our TCP socket client and our SSH.NET client that we created in videos number 66 and number 69. We will still be using Visual Basic 2017, but instead of creating a Windows Form app, we are going to create a Windows Presentation Foundation WPF application. I'm referencing Microsoft's Visual Studio 2017 WPF overview and walk through my first WPF desktop application to get me started. I'll put the link to both articles in the video's description below. To keep this video from being three hours long, I will only cover the code related to our application. However, WPF creates several default files. If you're not familiar with WPF, I highly recommend reading the WPF overview and walk through. If you are familiar coding using Windows Forms, but new to WPF, I recommend checking out the Windows Forms Controls and equivalent WPF Controls page as well. That will really help you transition to WPF. The link for it is below as well. Mogwai is the name of the application we are creating today. Mogwai is an acronym for Muxall Automation GUI. You can download Mogwai code from the Muxall GitHub repo. If you are curious what the goals are for Mogwai, check out the readme file in the repo. The link to the repo is in the video's description below too. OK, so that's about it for the intro. Let's get started. OK, so to create a WPF app is pretty easy. Select new file, new project, and WPF app. But before you click on OK, make sure to give it a name because it is a pain to change it later on. So we're just going to call this test demo and click on OK. OK, and as you can see it will create several default files for your application. And I'm not going to go through all these with you. You can go through the WPF overview and the walkthrough, and they'll give you a lot more information about these guys. But the one we're mainly interested in is this main window, XAML. And this is going to be your GUI code. And if you're familiar with Windows Forms, you know it has a designer window and then the implementation code in another file. And this is kind of the same thing. And they call this code that's in this .vb file. They call this the code behind code in Microsoft. Some people call it implementation code. If you've ever done any HTML programming, this would be the equivalent of your JavaScript behind your... This would be like your HTML file, the XAML file, and the JavaScript would be all in this. And the code behind, OK? Or your implementation. All right. One of the things you'll notice is there is no multiple document interface for this window right here. But this main window is going to be our parent window. And another thing you're going to notice is it's not called a form. It's called a window. And if you go to this Windows Form Controls and Equivalent, you can kind of look at what the... If you're familiar with programming and using Windows Forms, you'll be able to find the WPF equivalent because they've changed some of the names and it can be a little confusing. You can see it went from form being a form to a window, all right? And it says window does not support child windows. OK, so WPF doesn't support child windows. Like when you're using Windows Forms, you have a parent, a multiple doc MDI, and you have children forms inside the parent. Well, WPF considers the window root. So you can't add to root... You can't have a root window controlling another root window. You can spawn another root window, but that's something different. So if you go up here, right-click on this, I add new item, and it's like filter on WPF. So this is your root window, so you can add pages. You can also add user controls and this other stuff. So we're not going to use page. We're going to be adding user controls later. So that's going to be our children are going to be the user controls. And we'll get to that here in a second. So anyway, this main window is going to be our parent window. And let's just take a look at the XML real quick. Well, let's look at our other app. Okay, so these are the items you're going to want to change. You want to change the title to whatever you want to call it. I called mine Muxall Automation GUI. And then we're going to add these... This is a menu. So when you... Let me just fire it up real quick. I'll show you. This is so when you right-click on the background, you get this menu right here. All right. And you can see it lists these four items. And these are going to be the callback functions that's in the code behind. Right. And another thing, when you create this... Your first app is going to default to a layout of grid. And I changed mine to canvas. You might be able to get away using grid, but I think some of the functions that are at least in mine aren't going to work properly using grid. Just for the layout, canvas is more of a... You tell it exactly where you want it. And grids use like framing to get everything straight. Okay. I probably didn't explain that real well. You can go look up a grid means and the different layouts. There's a bunch of different ones. Okay. So when you change the grid to canvas, you want to give it a name. I called mine canvas main. So I know what it is and what I'm doing the code behind. And you want to add these list box items. And you can do this from this properties window right here. Let me see if I can remember how to do it. So if you go to properties and... If you just type in menu right here, it's a nice little search for finding items in this very long properties list. And then click on this context menu. And I think it's under item way down here. Items. Yeah. So if you click on this collection, you can start adding these buttons. And this will get you some of the basic setup or the basic layout of it. Right. You can come back. It'll populate all this in there for you, which is real nice. You don't have to remember how to code that. And then you just have to add what events you want. Okay. All right. And that's about it for this main window XAML. Or I'm just going to call it XML. I'm saying that A is kind of a tongue twister. All right. Let's go take a look at the code behind real quick. And this is the implementation. As you can see this, these menu items just call these different subroutines. There's four of them. And so we've got the add router, add switch, add test it, and add link. That's all that's in here. And we'll just look at one of these. You can go download this code from the, from the GitHub repository and take a look at the others if you want. They're all kind of identical. Or they're close to identical. You can download the code and look at the differences. But except for this right here, this doesn't really work. I was just playing around with it. So that'll be, we'll fix that in another video. But we're just going to, let's just look at this add router real quick. Okay. So we're going to come over here. And this is a class, this router node right here. So what it's going to do is it's going to say, I'm going to, I'm just going to create a new instance of class router node. Right. And I am going to add it to my canvas as a child. So it's just canvas dot children add router. Right. And then I just put in this little debug statement when I was testing these things. And, and the switch is basically the same. So let's, like I said, the, all this is the same. And actually most of the, the classes are the same. So let's go. We'll just start from the top. We'll look at the Cisco router node. And it just has a little picture of a router right there that he see where I defined that at. Oh, here it is. Here's where I defined it. That's the image source. We'll just look at the canvas right here. I changed it from grid to canvas again. I named my canvas UC canvas. Which stands for user control canvas. I gave it a default height and width. And, and then I, I'm creating a rectangle. I gave it a name. It's called a user control node. And I gave it a default height and width. And, and then it's got these mouse down and mouse move events. And that's so you can drag it around. And this render transform just says the, this, or we got a measure from the left-hand corner, right-hand corner. Since it's a circle, or at least the picture is a circle. We want to do it right from the middle. Yeah. So I'm just fill, I'm just using this rectangle fill. And I put a picture of that router in there. And here's another menu. So when you click on the route, right-click on the router, you get these commands, right? The subroutines it calls on the mouse up event. All right. Now we can go look at the code behind on it. Okay. So here's our, our constructor or here's our copy constructor. And this looks like it's got an error in it. And here's a send command. And this is kind of what we're looking for. The, the edit node and the delete node don't have anything, any implementation codes in there. So we're not going to look at those, but we'll look at this real quick. This send command going to create a new instance of the Cisco client class, right? I'm just going to call it router. And, and then it's going to show it. And this is interesting. So this Cisco client right here is the form that we created in the previous video. I had to recreate. I didn't have to, but I recreated the Cisco client. And the reason why is I was trying to add the windows form application and, and it's, it's doable. I can go in here and say add a new item and you can, you can add a windows form if you want to, right? I didn't want to create a windows form app in this. I wanted to copy the one I had already created, right? So I was, I was trying to do new and existing item. And I went looking around, trying to import that windows form into my new WPF app. And, and it just wasn't going to do it. Not cleanly anyway. And I said, okay, well that's fine. I mean, so here's the code behind for the Cisco client class, right? And, and as you can see, it's exactly that's exactly what we created in the previous video. So the only thing I really had to create was this client GUI. And as you know, this is, it's just a simple drag and drop all these text boxes and buttons on there. So just recreated the GUI and you can see, you can see that it's pretty ugly, right? Cause I just, I just dragged all this stuff on there and just moved it around to where I wanted it. And I didn't make anything real pretty. But it works, right? And I also even left a grid, right? So I didn't bother to change it to canvas. So, and that worked pretty good. So, I mean, this took a little bit to create. And I could show you, but it would make this video way too long. So we're doing add router, right? Click on, do a send command. And here's our GUI, right? And this is a separate, separate window. If this is a true MDI document, you would not be able to move this child window outside of this parent window, but this is a separate root window. So anyway, yeah, I had to do that for both the Cisco client and the Xena to set. Where'd that, where'd that go? Oh yeah, here it is, Xena client right down here. And that's the, the TCP socket that we did in video 66. The Cisco client we coded in Windows Forms, video 69. And then I basically just recreated the GUIs in WPF and then copied and pasted the code behind into this XAML.VB file. And of course, you know, I had to change some of the names around, but it didn't take very long. It was actually pretty easy. So, and now everything's in WPF. I don't have any Windows Forms and the old Windows Forms code to deal with, right? Okay, so to create these child classes like this Cisco router node class or the switch node classes, it's really pretty easy. You just go up here, highlight the project name, right click on it, say add a new item. And you just say, click on user control. Make sure to give it a name of what you want and click on add. We can do that in our other one over here. So we'll just say, add new item. And I'm not sure why it doesn't default with just WPF as a filter, but anyway. So use control. We'll just leave the name default say add. And this is what it creates for you. Okay, so we added the Cisco router node class and it's also, it's a user control. It's just a canvas. It has a rectangle on it with a picture of router in it and a menu. And when you right click on the router, it instantiates like if you do a right click and do a send command. It instantiates an instance of the Cisco client that we created. All right, well, I hope that makes sense. Okay, so one of the things I wanted to show you was this code behind for moving like the rectangle around, okay? And the reason why is I could not find a decent example of how to do this anywhere. And I was beating my head trying to figure out how to make this work. I saw, I literally saw examples of people doing this, doing the same kind of thing with like two pages of code. And after some poking around and playing around and as you can see doing some debugging, I finally got it down to a couple subroutines. And they're event-driven, so when you get the mouse button event down, it populates this point origin variable with the X and Y location of the router. And then this translation point is a translate transform object. It's measuring how far away we are from these origin points. This is when you do the left click down it. It records this information, right? So then soon you start moving the mouse, you start getting mouse events where you're actually moving it. And then you can record the mouse location on the canvas. And you can see this is the user control canvas, not the parent canvas. So this is saying, okay, the mouse is moving. So it's going to get the location of where the mouse is moving. It's going to check to see if the left mouse button is pressed. So this one is, okay, I pressed on it and now the mouse is moving and it's double checking, okay, is the left mouse button still pressed? In other words, have you left clicked on it and are dragging it, right? And it's going to say, okay, I'm going to translate point X to mouse location minus the point origin dot X and translate point Y to mouse location point Y minus the point origin. And then I'm going to actually move it. So it's going to say, okay, move UC node, render the transformer, which means move it to the translation points that we just assigned right here, the X and Y points. And that's how you make it move around. This right here would probably be a good video on its own, just a little one-minute video on how to do a drag and drop with a control in WPF because this literally took me hours to figure out how to make it work. And why Microsoft doesn't have a built-in function for this is a head scratcher. If someone knows, I wish they would let me know why this isn't just something that's a library in WPF. Anyway, I digress. Okay, so it was a Cisco router node. I'm going to go ahead and show you a couple of other ones real quick. So we're back at our main. There's our main window. And okay, so we did Cisco. And that was a Cisco router. Now the Cisco switch node is, as you're going to see, is going to be pretty much identical. It's a rectangle. It has the exact same commands. It's got a different image, of course. And the code behind is pretty much identical, even has the same error in it. And this code is identical, too. So you can see we're getting a lot of duplication of code here. This can all be cleaned up in the future, but for right now, it doesn't really matter. A lot of this stuff will probably change. Now, we can just consolidate all this code into one class and then pull it in as we need it in our different nodes, right? But we'll do that later. Okay, so that was the switch node. And it actually, I think it calls up. Yeah, so it does call the switch. But it's still a Cisco client with a send command. So it's identical because they're both using SSH into the nodes. We can look at it real quick if you want. So we can right-click, say, add switch. And it gives us the box or the switch. And you just do the send command. And as you can see, it's the exact same Cisco client. And the only one that's going to be different, let's look at the test set real quick. So I don't really have a nice little picture for the Zena, so I just use their logo. Right-click on it, send command. And as you can see, the Zena client's a little different because it's not using SSH, right? Okay, so that was a switch. You can see it's identical. And let's take a look at the Zena real quick. But as you can see, as you'll see, it's identical. That's a Cisco client. And I did recreate this GUI as well. But it was very quick. You know, I just, like I said, I just dragged all this stuff in there and dropped it in there and made it look pretty much identical to what it was in Windows Forms. And then I just copied and pasted the code behind right from the code we did in Windows in video number 66. Oh, here, the Zena test node. Yeah, you'll see this is all identical. Same commands, different picture. Oh, I did add a drop shadow effect. And there's probably some other stuff in here. I'm forgetting, yeah, I added a favicon. So when you're, you know, you pull this up, it's got this little icon right here. And actually, my original thought was to make this look like a Mogwai. And if you Google that, you'll know what I'm talking about. You know, double click on the name, you double click on my project. And yeah, you can add that little icon guy right here. All right, well, I hope all this made sense and I'm not going too fast. I don't know how much detail to give or not give. I try to keep these automation minutes under 20 minutes or at least around 20 minutes because a lot of times people are just looking for a quick answer. They don't want to hear me blabber on. But I do want to explain how this WPF works and how all these, how the main form, fires off its children forms and adds it to the canvas. And then how do you add the menus to the objects? How do you add the menu to that? I just wanted to cover all that but it takes a little while if you're not familiar with programming and WPF, it can be a little different. And especially this XML stuff, that's kind of different, trying to figure out where do you add the code to add it and XML, I mean, because you can add a bunch of this Windows code directly in the implementation right here. You could do almost all these commands in here. But I think we would be missing the point of the MVC architecture. So anyway, we'll do our best and keep plugging away at it, okay? Anyway, I hope you liked this video. If you do, give it a big thumbs up, that helps. Hit the subscribe button, that really helps. If you have any questions or comments, leave them in the comments of the video. I'll try to answer them the best I can. And if you want the code, that code is freely available on the Muxhall GitHub repository. And I'll see you next time.