From the course: Visual Basic Essential Training

Work with a Windows UI project - Visual Basic Tutorial

From the course: Visual Basic Essential Training

Start my 1-month free trial Buy for my team

Work with a Windows UI project

“

- [Instructor] We are working in this MainWindow.xaml file. If you want to open it, you can double click on it here in Solution Explorer. That brings up this two part window. On the top part of the window, on the top half of the window, is the visual designer 'cause here we can drag controls and move them around with our mouse. And the bottom half of this window is a text editor. This is the xaml editor. This is the XML markup that also defines the user interface. So here you can see that there is a window. Let's scroll up here. Here's the window. So that's an instance of the window class. And then I can see here the title at the top. So let's go ahead and change this title to To Do Example. And you can see it's changing down here in the text. It's also changing up here. You can also change it in the properties window. So when you select an item, Visual Studio reads the settings, the properties, I should say, for this selected item and shows them in this property grid. If you don't see the property grid, you can go to View, scroll down to the bottom of the list and choose Properties window. We're also going to be working with the toolbox. If you don't see that on the left side of the screen, then go to View, Toolbox. And then for this example, I will pin it to the left side for a few minutes. Inside the xaml is a grid. This is for layout. This controls the positions of the items on this screen. And so now when I go look at all WPF controls, the first thing I want to add is a ListBox. Find that down here. So I'll just go ahead and drag that over. By default, it gets docked to all four sides. So I want to make this narrower. So I'm going to grab this edge and slide it over. That's what I mean by this being a designer. And then you can see it's writing out this xaml down here. It gave our list box a name. I'm going to change the name to. I'm going to change the name to "ToDo_lst." Looks like I lost the closing single quote. And I also need to add a button. Scroll up to the top. They're in alphabetical order. There's the button. I can drag that over. You can see that I get a cursor that shows I'm carrying something. When I let go, keep your eye on where I drop, it drops it where the point of the cursor is. Now that is definitely too small, so I'm going to grab the edges and make it larger. And as I'm doing that, you'll see these visualizers appear on the screen. Two of them are showing me the size, 70 and 110, and the other two are showing me the number of pixels from the top or from the other object. So when I drag this around, you can see those numbers changing. So I'll make this a little bit larger. Let's put it down near the bottom like this. Next I want to add a TextBox and a TextBlock. TextBox is for editing. TextBlock is for showing. So I'll take the TextBox, drag it over here. Now I want you to see what happens when I move this around. You see there was red lines. That gives me an indication of when I'm aligned with other controls. So now I can see I'm aligned to the left edge and then I'll resize it 'til it's aligned with the right edge. Take my TextBlock and do the same thing. What happens if you double click on that item? Well, then it gets placed in a default location. In this case, it's over here and I made it too big. So let's go ahead and drag that down. That's way too big for a TextBlock. That looks good. Another thing I want to change is the font size for all of these controls. So I could do it individually, but I can also do it at the parent level. So the parent in this case is the window. So I've selected the window. I can then come over to this properties window and I can look at text and I can see the font size. So let me change this to 22. What that did is it wrote out this xaml font size equal 22, and it changed it in the root element in this case it was the window, and that affects all of the child elements. So at this point, I think we have our user interface ready to go. The next step is to write code in the code behind.

Contents