 Welcome to the Network Engineering video blog. I am your host, Michael Crane. If you've ever coded using Windows Presentation Foundation architecture, you've probably come across this walkthrough, my first WPF desktop app. And I read through this several months ago, and I thought, well, that's pretty cool. Yeah, so I didn't think this would be the right fit for Mogwai, but I was thinking about the Node Editor, and I remembered that this whole series is about using WPF, and I wanted to be able to use some of the new navigation window and pages that go in there. So for the Node Editor, I decided we're just going to go all-in WPF, all right? You can read through this. It says it takes 20 minutes to read. Yep, it does take 20 minutes to read. If you know what all the acronyms everything means, and if you know what everything means in this document, then you probably don't need to read it. So to go through this takes a while. I'm not going to read you the whole thing. That would be super boring. We'll go through the steps, and I'm going to show you, you know, what they had and what I did, and most of it's the same, especially when it comes to providing the data source. I've changed it up quite a bit. So we were going to be using the navigation window instead of a regular's window class in our GUI, and I'll show you that here in a second. And we're also going to be using pages, and pages are very HTML-like, and you can kind of read this. It kind of describes what it is. I forget where it says. Oh, here it is right here. The application is composed of several WPF pages that are hosted in a browser style window. So then the navigation windows is going to be a browser style window, and the pages are going to be like HTML pages. So if you've ever done any HTML coding, this will be somewhat familiar with you to you, and except it won't be HTML, it's using the XAML. And if you've ever done any AngularJS coding, this will be very familiar to you, because it's very similar to AngularJS, OK? OK, so here we go. So step one, we're going to create the application. When you create the application, it creates the main window. And if you remember in our code here, here's where's my main window. Oh, here it is right here. I've already got a main window, and that's what you see when we fire up Mogwai. So I didn't need to create another main window or an application. So I basically skipped that part, all right? But I did need a main window to hold the node editor application, and I called it a node editor. And it is right here, OK? Not to get ahead of the steps here. OK, so step one is create the app. Well, if you're using the Mogwai, if you're downloading the Mogwai code, you don't need to do that. It says open the application XAML. It's just going to show you what it looks like. It's going to say the startup is going to be main window, XAML. And that is true. ours does say that. Where is our application? By the way, this application XAML is also created by default when you create a new application, OK? And just ignore this stuff down here. And here's our startup URI. And it's just main window dot XAML, OK? And you notice they're using URI. I didn't catch that when we first started doing this, but everything is apparently the way it loads it. It's very web page-like, OK? Step three, open the main window XAML. This is the main window of your application, the window. OK, I'm just going to read a couple of these. They're all kind of related, right? So step three is show the main window or open the main window. So we're going to open it up. And this is where I veered from these instructions. So our main window is not going to be our navigation window. And that's what step three and four are telling you in this step. Our main window, where is it? Right here is what's. So this is our main window in Mogwai, right? So to create our node editor window from Mogwai, I just clicked on the root node and click on add. And then, oh, sorry, it's running. Add new item and then filter on WPF. And then you just go and click on window, OK? And I'm not going to go ahead and create it because we don't need it. I named this window, I called my node editor, OK? So it was like node editor dot xaml, all right? I'm not going to go ahead and create it. I've already created it. And that is this guy right here, OK? And in the instructions, it says to change the window element name to navigation window. And so I did do that step. See, this was just created as a window, right? And I changed it from window to navigation window, all right? Just so we're all on the same page, our main window is called node editor, OK? And that's going to be this navigation window. And we need to call this navigation window. So we want to call our navigation window from when we right click on a node, right? Which I kind of showed you earlier. So if we add a node, right? Right click on it. When we click on edit, we want our node editor to come up. And so this edit command is actually in our class node, which is right here, OK? So if we go down here and find edit, OK? So we're going to call up our node editor. And as you notice, so here's our node editor class that we just created, renamed it to navigation window. I'm passing it the me object, which is the class node that, this is the instance of class node that called it. So when you right click on a node, you want to just pull up that one instance of it. And then we're just going to show it. You notice I set it as a dialogue. If you're not familiar with dialogues, it's so, OK? So if we add a router and we click on something, it won't let you do anything with the application, right? Until you clear kill the child window. I kind of already showed you what the node editor looks like. But anyway, that's cool. OK, so yeah. So from class node is calling up our new navigation window. OK, so change the window to navigation. Yep, did that. Remove the grid elements. Yep, did that. And it had a couple of grid definitions in here. Did that. And change the following properties next to setting that title height and width. Not very interesting. I'll show it to you real quick. It's, I just want you to set this. I just called it node editor. And let's see here. It says open. Now whenever you see, remember, whenever you see main window, it's talking about the node editor window. OK, it says open node editor. Oh, it's asking for the VB file. And it contains the partial class, blah, blah, blah. We're not using C sharp. So we don't have to care about step eight. It's just driving from navigation window class. And I'm sorry I'm blowing through this. I don't want this video to be too long and boring. So if you have any questions, just post them in the comments. OK, so now we're going to add some files. So in this section, we're going to add two pages, all right? And to add these pages, this is very step by step with it. I'll show you real quick. You just highlight the project, right click on it, add new item, filter on WPF, select page, name it, and click OK. And I added two of them. One is called the node edit home page, and one is called the node edit config page, OK? And in the instructions, it's going to add a new page. So one of them is called their home page. So we're just going to call it the home page, right? I don't think they've added the report page yet, but it's coming. So there's another page. OK, so right now we're just opening the home page. So open the home page. And it just wants us to set the title, height and width, very uninteresting stuff. So let's go ahead and do that. I'll just show it to you real quick. So here's the home page right here. And ignore this stuff down here for now. And here's the title and the height and width, OK? Very, very uninteresting. OK, now it's going to want us to go back to the node editor page and add a source property to the navigation window. Now, I did not do this. OK, so and I'll show you why. Let me pull this up here. OK, so we go back to the node editor, xAML. Now they want us to add a source property in here. It's like source equals blah, blah, blah. Well, it actually equaled the, sorry, actually pointing with my finger. That doesn't work, does it? It wants us to point it to this node editor home page. So when you first fire up this node editor, it pulls in that page. And that does work, but I changed it because I am using, where is it? So here's the code behind for the node editor, the main window. And I'm doing it programmatically, if that's the correct term. So what I'm doing is I'm instantiating a new instance of my node edit home page that we just created. But I'm passing it a class node that called, that we right clicked on to fire up the node editor. And I'm passing in that because it's going to be our data context for our other pages, right? So when I create this new home page, I pass it the class node object. And then once it's created, then we just navigate to the new home page, right? Which is this guy right here. And you can kind of see what it looks like down here. This is what the XAML looks like. All right? And this is just saying, yeah, you can do it using the GUI. All right, so step seven is the second page we're going to add. And theirs is called the report page. I called ours the config page, okay? And it's this guy right here. So we're going to add this guy right here. Okay, so it's config, home, and main, right? Okay, so I don't want to get ahead of the steps here. Okay, so they want us to open the page, set this title, set it to line height and width. Yeah, I'm not going to go through you. It's the exact same as what we just did earlier. Okay, so it's just telling us about the code bind pages. Says your coach should look like the following when you create these new page files. And I know it's a little bit out of order, right? Yeah, so it does. It creates this class looks completely empty. And one of the things that I found curious that they forgot to mention in there is, oops, sorry, in the code bind, sorry. You have to add this. When you add a user control, it automatically adds this. But when you add a page, it doesn't, which I find very head scratching, but it definitely needs this. It won't work without it. Make sure that you add this in there, okay? So where are we? Okay, now it's telling us to add an image and they called it watermark. And so I put the images for Mogwai in this folder called images, right? And that has all our images. And I added the logo, light blue, 500 by 500. Oh, there we go. You can see a preview of it right there. Let's see, what does the instruction say to do with it? I think that's it. This is very out of order right here. So anyway, it says add the image name watermark. And it tells you, oh, yeah, it's telling you how to do it. I guess I should show you how to do that. It's just, it's pretty easy. So you just say, click on the application root node there, say add, actually an existing item. And then you just navigate to wherever your images are. You have to change the filter here, so image. And you just click on it and then say add, right? And it defaults to adding it dumping ground, right? Or in this main dumping ground right here. And then you just, you can just drag it up, right? And just drag it into this images file. That's where I keep them, okay? Okay, and then this is kind of a, I guess a sanity check if you build and run it. So if it doesn't run at this point, you need to go back and see what happened, all right? I'm not gonna show you that. It's a do nothing step. Okay, so now we're gonna create the layout. I'm not gonna read all this too. You can read all this stuff. But step one is go to the home page, right? And we're gonna set the margin property and grid. So they look like that. So let's go to the home page, XAML. Here's the margin, the margin attribute and the grid element. Gotta get all the names, right? And yep, it looks like that. Yeah, you can do it through the GUI. And now we're gonna add our row and column definitions for the grid. And these are kind of weird little things. You just, so for however many columns you want and however many rows you want, you just add one of these things in there. One of these elements, right? Tag pairs, whatever you wanna call it. And you put it in between the grid tags. And by the way, they're as bad as I am about switching between tags and elements for the XAML. So basically just copy and paste that in between the grid tags. And let's see, where is it? Oh, here it is. That's exactly what I did, all right? And you notice I have an extra one. We'll get to that in the steps. They're gonna tell us to add an extra one later. Why they didn't have us do it at first, I do not know. Okay, so the height with all that other stuff, you can read this, it's just kind of explaining that. Okay, so now we're gonna get to the add controls. We're gonna be working on the homepage. We're gonna add a list box, a label and a button. All right? And basically step one, it's just gonna tell you, copy and paste all this code. All right, that's definitely easy enough. So you just copy and paste all this code. And by the way, this stuff right here is just gonna be temporary because they're gonna change it later on. I just wanted to let you know. Okay, and I'll show you that in our code here. It's gonna look a little different because later on in this video, you'll see they're gonna have us change it. But anyway, here's a list box and the header, our border and a label for everything. And I'm pretty sure that lines up with, yeah, so here's the border, border, list box, oh, the button, sorry, button. Yeah, here it is down here. And as you can see, this stuff looks different, right? And you'll see why here in a minute. But you can just, if you're just following along with it, you can just follow along. I think they're just kind of showing you how all this stuff works. Okay, build and run the application. That's just a sanity check step. Okay, and now that image we added five minutes ago, now we're gonna actually do something with it. I mean, it seems really out of sequence here, but it's actually, we're gonna be updating the home page. So we're gonna open the home XAML and now we're gonna add another column, which is, remember what I was telling you? We're gonna add a third column and it's gonna be a fixed width and it's way down here. And while they add, they put up, while they add all this other crap in here right now, I don't know. Anyway, they want us to add another column. Oops, this guy right here. And you can see it in mine. It's this guy right here, right? Oh, okay. And then we're gonna add another row. It's funny they're highlighting. Doesn't seem to work very good anyway. So you're gonna add another row. I guess here's mine. And then move the controls to the second column by setting the grid.column property to one in each of the three controls. So you're just shifting everything to the right. And I guess they're doing this kind of show you how to move the controls around in the columns and rows. Maybe that's the point of all this. Yeah, so this is just telling you to move it to another row. All right. And you can read through this. I'm not gonna read it to you. It's like an exercise just to show you how to move stuff around. Okay, now finally we get to set. We're gonna use that water, that image file we added earlier, right? Step five is the panel dot background property. This XAML anywhere between the grid tags, right? And so we can go look at my code here and it should be around here somewhere. Oh, there it is. We went right by it. And so since I'm using a folder called images, you have to give it the path, right? So it's images slash and then the name, which is different from theirs, which is just, you know, they just put the name of the file in there. So I just wanted to point that out to make sure you get the full path name in there. If you use the images folder like I do, and then you can play around with this stretch. You can stretch this logo or the picture, you can fill it, you can tile it, just kind of like doing a background on your Windows desktop, right? Okay, let's see. Okay, so we set the background image. Okay, before the border element, oh, now here's where we add the label, which I kind of showed you that earlier. It's right before the border element. And then you run the application. Now wait, you look at the label here real quick if you want, it's just this guy right here, right? All right, and as you can see, mine is a little different. We're gonna add a style sheet here, which is similar to CSS. If you've ever done the HTML coding and then that'll eliminate all this stuff right here, right? Okay, so build and run the application. It's a do nothing step. Our sanity, I should call it a sanity check step. Make sure you're up to speed. It should look like this, right? So now we're going to add some code, so they say. And we're gonna do it in the home page. So we're gonna add a click event handler and a to the button element. And it's gonna go to the button, add this, let's click event, so you click on the button, it raises this event right here. And then we're gonna add the code behind for it. So one, step one, two, and three, and that's just gonna be in the code behind, right? And you'll notice that the code behind looks very familiar. Yeah, so this is very familiar. This is how we fired up our home page from our main window, our navigation window, let's call it. Okay, and so that's why this looks very familiar. And so that's, we're gonna look at my code real quick. Okay, here's the button. And yeah, just ignore this. This is that style sheet I was telling you. We're gonna add that later on in the video. I changed the name to view button click because button click is very non-descriptive. And the code behind for it is view button click right here. Just ignore this stuff right here. But you can see all's we're doing is we're just instantiating a new instance of config, right, of the config page. And then we're gonna navigate to it, right? And we're just passing on the data context. And we'll look at that later. But that is exactly the way we did it from, here's our main page, right? And it's the exact same thing we did in there. So from the main page to the home page, we just pass this class node object and navigate it to it and we're just doing the exact same thing with this view button click, except we're going from the home page to the config page, all right? Okay, so the next step here, we're gonna create the UI for the report page. And ours is called the config page. So you remember we've got our main page, which is, and we've got our main page, we've got our home page, and we've got our config page. Just remember that report page is the config page, okay? And it's just telling us to open our config page up and then just copy and paste all this code. We can look at here real quick. Actually, you've seen, here's more of the calm and row definitions that we did in the home page. And it says, copy and paste us between the grid tags now. So, and you have to be careful with this. So it's missing the grid tags in this example. The grid tags is actually asking you to copy and paste. So these are the, oh, that's background image. These are the calm and definition rows for the grid tag that you can't see, okay? And here is a label that we're adding. And then it's creating a grid inside of a grid, okay? So it's creating a grid inside of a grid and it's given a margin and it's got its own calm and row definitions and these are not for this main one. It's for the grid inside the grid. And then to top it all off, we're gonna put in a grid inside the grid inside the grid, right here. There's a grid that we can't see. So that's layer one. There's a grid and a grid, so layer two. And then a grid and a grid and a grid layer three. And you can see coming out of both of them right here, of course, the third one is not on here. I wanted to point that out because this can get a little bit confusing. Let's just use an STAC panel to add a couple labels in, okay? And nothing interesting there. And so instead of using a list box, this time they're using a data grid, okay? And this thing, I'm not familiar with data grid, but it looks very much like creating a table in HTML, right? So I'm guessing it's kind of the same thing. You gave it some, well, this is just styling, so this doesn't matter right here. But if you look at this and then the columns and these are the headers on top of the columns, it looks like it's creating a table, right? So if you're familiar with tables in HTML, you'll probably be familiar with that. And they comment down here, it's very similar to the homepage, except they're using data grid instead of a list box, right? And then here's another do nothing sanity check step and make sure it runs. And then you click on the view button to make sure our event handler works and and that's it for that step. And we can go look at my code real quick. So here's the XML. So here's a grid, the layer one grid. Okay, just ignore this stuff right now. We'll get to that. And there's the background image. Here's the first set of column definitions I showed you. Here's a label. Okay, so here's a grid inside the grid. Okay, and then it's got its own row and column definitions. And here's the, it's just a label. It's just saying name, and then it's gonna give it a name. And we'll look at this stuff here in a minute. I commented this out cause I didn't need it. And here's a grid inside the grid inside the grid that holds the data grid, which is like a table, right? And it's pretty much all the same as what's in the example that we looked at. And so here's coming out of all three of those grids, right? And so now we're going to create our style sheet. And this goes, they want us to put it, and I did put it in the application.xaml, which if you remember, my application.xaml from Mogwai is for the main program. But I really wanted to put it in this node editor. And I tried grading resources here, but it wouldn't filter down. So I didn't want to do any more research, so I didn't bother. I just copied and pasted that stuff that's in the example and put it in my application.xaml. And I didn't change a thing, okay? So when you're looking, so on this example right here, so this is the one part where I'm actually using the application.xaml in Mogwai, all right? And they're just saying, yeah, copy and paste the code in there, right? And this is very similar to a CSS style sheet if you've ever done HTML stuff. And it kind of tells you what all the stuff's about. And so now they want us to go to the home and config pages and take all that styling out and put in our style sheet attributes in there. And I'm not gonna go through all this stuff. You guys get it. You've done any kind of HTML program. All I'm doing, so we'll go look at one of them. Let's go look at this list. This is in the home page. Okay, so that label for the list box used to look like this. It had all the font definitions and everything colors and sizes defined right there. And then we changed it to, yeah, so they want us, then we just put the style attribute in there and then delete all that other stuff out, right? And I was, I did this, not recording it, but when I was scrolling up, looking for what it used to look like, and you can see right here, it's already been changed in one of their examples before they even told us to change it. Anyway, where are we? Sorry, that was, okay, so now we're gonna open the config page and do the same thing, right? They're just, they're telling you to copy and paste everything. I would not suggest that. I would just copy out the stuff that you want. And I think a lot of people when they're going through this walkthrough, they'd say, oh, I'm gonna copy and paste just like they say, and I think that's where they get into trouble. If you copied and pasted this style sheet attribute before creating the actual style sheet, this isn't gonna work properly, right? Yeah, just be careful when they tell you to copy and paste everything, you have to look through it, all right? Okay, so where are we? So, style controls. Yeah, we're gonna go to the config page and basically do the same thing. I'm not gonna show you this, you get the idea. And then we've got the sanity check step, okay? Okay, so now we're gonna bind the data to a control. And this is where Mogwai and this example differ quite a bit. So they want you to basically copy and paste this XML data in between these grid resource tags. And that's gonna be basically your database, if you will, right? And that's what the data they're gonna bind to. And we want real data, right? So we didn't use that with Mogwai. So I'll try to show you that as we go along and still stay in line with the steps in this walkthrough, okay? Okay, and so just to show you, so here's our homepage, here's our grid resource tags, right? And you can see we don't have anything in there except for data template, which is the next step. So it's just saying within the grid resources element add the following data template elements or tags, and mine is similar. So we're gonna use a data template, we're gonna give it a name, or they call it a key, and all that's gonna do is rent a label, right? And with the content that's being bound to this XML data. And so when you see this little app right here, this is an XML, XAML data, and of course XPath, it's kind of self-explanatory. So they're just going out on here and finding the name, property, and our attribute, and plugging it in the label, right? And for this list box. And if you look at mine, or Mogwai, it's similar, the content except I've got a blank binding. And I'll show you why it's like that here in just a minute, okay? Now one thing I wanna point out about this, this data template and binding, is this not using the data context, the data context is like the data that's for this whole XML, right? It's, I don't know, it's just domain, if you will. I don't know what it's called anyway, it's the data for everything. And of course we have it set to my node, and I'm getting a little bit ahead of the instructions, but I wanted to point this out that this data template, this template that's named name item template doesn't get its binding from the data context as you would kind of think, right? It's actually getting it from the list box that's calling this name item template. So if we go down a list box right here, we can say it's gonna be using this template called name item template, and it's gonna pass in the binding source, and I'm passing it in using the code behind right here. So here's the property, so I gave it a name, properties list box, right? And I'm saying property is list box, item source, this list of items that we're gonna create. I'll show you that here in a minute. What I wanted to point out is that this data template isn't using the data context for its binding, all right? And this can be a real stumbling block if you don't understand this, because you'll be saying, why isn't it binding to whatever you're trying to get out of your data context, and it just won't work, because it's actually getting it from this list box, all right? Or I should say it's getting it from whatever entity or element is calling it by name. So when list box says, okay, my item template is this, then it's passing its binding information or its source information to the data template, and I hope that makes sense. So you can see right here, the example is binding the source to this ExplantsData XML that we looked at earlier, right? That's just pasted in between the grid resource tags. And here's the template right here. Well, so with XML, or with WPF, I should say, so when you first instantiate this home page right here, the first thing it does is this initialize component and they're doing it with this really goofy, they're calling the default constructor inside this modified constructor. I don't know why, I don't know why they just didn't copy and paste this guy into here, but I just left it the way the example was. But when this thing gets instantiated, the data context hasn't even been set yet, right? So this is before this, when it's calling this initialize component as before, initialize component, by the way, has to be first. You cannot set it second, it won't let you. So it's initializing the XML, XML before it does anything else, including setting the data context. So I'm passing in the data, I'm passing in the source after this initialize component is being executed or the XML is being executed. The way they're doing it, in their example, works okay, right? Because their source is inside the XML, right? It's right here, right? But it won't work with Mogwai and using an external data source. Okay, and I hope that makes sense. If you have any questions, just post them under the video, right? Okay, and so if everyone is still with me here, let's see, what else did I change? I have a note here, I'm gonna point out that I actually, well, I gave the list box a name, so I could pass it its source. That's different from the example. And of course I set it in the code bind. I'm looking at some notes I have to make sure I point that out to you guys. Yeah, so it's being set right here. Okay, that's the bind data to control. Now we're gonna connect data to controls. So we're gonna be opening the config page and oh, here's where it's talking about that constructor I was showing you. And so now we're gonna add a constructor that takes an object so you can pass expense report data. So now they magically plugged this in there without even saying anything. And I'm not sure it needs this inherit page. I went ahead and left it in there. The previous, the home page doesn't have it. I do not know why this one has it. But anyway, here's our custom constructor. It's calling the default constructor new. And I think the only reason why it's doing this is so it can run the initialize component. Oh, the new constructor is getting data and they're just passing it as a generic object. I'm not exactly sure why they're just passing it as a generic object. They know what they're passing it. So I can show you on mine. I just told it what we're passing it. So here's our, oops, where are we at? So here's our node, our config page. Here's our constructor. You can see, I just kind of left everything the way that our example was. And I'm just saying, okay, well, I'm passing it a node called define as my node and it's a class node. In their example, they're just passing it as a generic object. But to me, this is easier to read. And in their example, they're not passing it a node, obviously, they're passing it the selected item from the list box. And they called their list box the people list box. So here's the people list bot in the name people list box. So whatever the selected item is, that's what they're passing to their, what they're called a report page. We call it the config page. Okay, so there's passing a selected item and then they're just navigating to the would be our config page, right? We can look at ours. And this is just same thing, basically I'm just passing it a node and we've already discussed this. And from the homepage right here. So you click on it, goodbye. So this is the homepage and I'm setting the data context to my node that's being passed from the main page. And basically that's just so I can get the name variable right here, right? Because all our properties are actually in a properties class. That's a property of our class node, right? If you remember from previous videos. I'm passing a data context, which is basically my class node. And I could put my node in here, but since it's declared locally, I'd have to make it a property, blah, blah, blah. This is already public and can be easily shared. So I'm just using that to pass it through. And then we're just navigating to the config page, which is this guy right here. And then we call up our custom constructor, right? And since we're on our custom constructor, I might as well show you the rest of the stuff. I set the config page's data context to my node. And here I'm using reflection to get all the properties from our class node properties. And you've seen this in the previous videos, in the mod.io module. This is how I build our config save file, right? And it's just listing going through this and building a list of class KVPs, which you saw also in a previous video. And it's just a simple little class. I can show it to you real quick if you'd like. It's just this right here. It's got two public properties, key and value. And I'm just building this list. And we'll probably come back to this constructor here in a second. Hopefully I won't forget. But let's continue on. The next section here is style data with data templates. This title does not make any sense. None whatsoever. It should be bind data with data templates, not style data with data templates. And if you're just going through this example and saying, well, I don't care about styling, I'm more interested in binding data. You might skip over this section and you would be doing yourself a great disservice because this section has nothing to do with style. Well, at least CSS type styling. Okay. And if you read it says in this section, you'll update the UI for each item and the data bound list by using data templates. Okay, so we're going to open our config page and we're going to bind the concept name and department to these two labels right here. Okay. If you remember, I kind of showed you earlier, but I commented this department out and this right here is pretty much exactly the same. In fact, I am using name, but the bindings a little different because I'm not using that XAML, right? I'm using the, I'm binding to our class node, which does have a name property by the way, right? And so we'll go look at that in the code real quick. Oh, okay, here it is, right? So here's the one that's commented out, right? The department, here's the name. Okay, and so I'm just binding to name, right? And there our context is the class node. So, and it has a name. Oh, okay. So let's say next step is, okay, so step two is bind. Okay, we did that. So it says after opening grid element. Oh, what does open grid element mean? So this is nonsense. Whoever was writing this, I think started losing focus or something. Anyway, it says add the following data templates, which should define how to display the expense data report. Okay, so display, I don't know if it's telling it to bind the data, right? So you got a reason template and amount template and in ours, in Mogwai, I should say. Oh, there are resources. Where are we at? Here we are. So here's our data templates. It's in between the grid resources tags and I open the grid, whatever that means. So I just call them name and value for the config and we're binding it to key and value. And we'll look a little bit more at that here in a second. Okay, so step four is replace a data grid. Text column element with data grid template column elements. This is pretty much identical to mine. You can see the item source right here that they have. This is gonna be different in mine because ours is gonna be binding differently. Okay, we're gonna look at Mogwai real quick and scroll down and you can see this is the two column definitions and they want us to bind to this name template, name item template and value item template, which are these two templates that we just copied and pasted in. I renamed them of course and I changed the binding path, the key and value. All right, and these are getting it from, remember from this data grid right here. And as you can see, I don't have a source item set because I set it in the code behind again, right here. So it's called the KVP data grid and here's the item source. I'm just building a list of class KVPs. Yeah, so this is just using the reflection to get all the properties out of our class node right here. So here, this is how we get all the properties. I kind of talked about this earlier and then it's just building a list and feeding it into the last list of KVPs. Okay, so step five is another check here, sanity check, build and run it, select a person, hit the view button. Oh, well that's it. You should get the list of names, hit the view of whatever name you want and then you get the name and the value. And of course, if we look at mine, that's all it's doing. Just put the name value and I'll go ahead and run it. I kind of showed it to you earlier. All right, so we're gonna right click on a node and click on edit. And here's our list of names, configuration status, testing and reports and these names. I should probably call them categories but I didn't wanna, I already made enough changes. I didn't wanna confuse it even more doing this video but this, all this stuff's probably gonna change over time. The biggest thing I wanted is to kind of show you where I'm, what I'm thinking about doing is so, so this first page right here will be, you know, you can either look at the status of the node, you can do some testing on the node or you get reports out of the node or you can edit its configuration. And so if we go view and then these fields are not editable at the, at the moment, but they will be. And of course, some of these fields will probably not include. Like I don't know about, we probably don't need to edit this stuff but this stuff up here, all the index value definitely we can't edit. So I'll have to, I'll have to put some checks in there to make sure that we don't accidentally edit the index value. Because that could cause all kinds of problems in the collection. And another thing too, you notice the name, it's a router zero and not router underscore zero. It's the same with this right here. And that's because label interprets the underscore as some kind of control character. I kind of read it and I, I'm just like, okay fine. So this will probably change to a text box or something that's not gonna mess up my underscores. All right. Okay, and we can look at this and I guess this thing's a little bit kind of responsive, if you will. I notice this doesn't move around any so it's not that responsive. And here's the back and forward arrows. Well, that's kind of interesting. This seems to be more responsive than this. But I, maybe it's because I didn't finish. I don't know if I said it or not, but as you notice, I didn't use a style sheet for this data grid. I didn't change any of this stuff. I was just trying to get this video going, a video out, right? But it's the same as what we did in the previous one. I'm sorry, the homepage is you just put these, you know, this style attribute in there. All right. One other thing I wanted to mention that I think I should point out is when I did this right here, I am pretty sure, well, not this one. That's probably not a good example, but when I did this as reflection and then put it in this list object, right? This list object. I'm pretty sure I broke the, the data binding. So in other words, let me fire this guy up again. So in other words, if we click on this edit node, right? Say configuration, let's say we, we change the make of it to something else or the model, right? You know, of course, we'll have to have a button say, okay, or click, or even without a button, if we just change it with binding, we should automatically go update this guy. The name, name's not on here, but let's say the name is on there and we change the name. We should automatically see it, you know, pop up in the main page right here, right? And I don't think that's gonna work with, with this right here. I think I broke it. And, and I wanted to point this out because I, I tinkered with this for quite a while. I was looking at this webpage right here. It's using entire objects as binding source. And they say you can use an entire object as a binding source. And, oh, by the way, yeah, so here's that. All's you have to do, it's a, I'll just read it to you. You can specify a binding source by using the source or data context property and then provide a blank binding declaration, right? The scenarios, which is as useful as including binding to objects that are of type string, binding to objects with multiple properties you're interested in, or binding to a collection of objects, right? And for an example, binding to an entire collection of objects, you can use this, yeah, look at this link right here. And it says, no, you may need to apply a custom logic so the data is meaningful, blah, blah, you can read this. Anyway, I, and I kind of went and looked at this example but so this list box right here in their example is it only takes, you have to give the thing a list or a collection. I didn't try a collection but I'm guessing it can iterate through a collection. What does that mean? So I don't think this is what they're talking about. You know, yeah, so I took my, the class, the properties. Oh, did I close it? Anyway, I took the class node properties and then did reflection on it to get all the properties out of it and then put it in a list. But I don't think it's gonna work backwards. I don't think, if I update one of the properties in this list, I don't think it's gonna put it back into my class node properties class, right? Right here. So I'm thinking that I probably am gonna have to put some kind of function in here that you can do a get properties, right? And it'll get all these properties and return a list to whoever's requesting it and then a set properties where they can shoot me the list back and set it and that way that maybe the binding will work. We'll do some more research on it but I wanted to point that out. And I don't know this for a fact it may work but I doubt it. I would be very surprised if, where are we at? I would be very surprised if this actually had a two-way binding. So don't forget, you can support the network engineering video blog by donation using a credit card and PayPal or by purchasing products at the Moxall store. Details and links are in the description under this video. Well, that's about it for this video. If you liked 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. Thanks for watching and I'll see you next time.