WinForms in action - .NET Tutorial

- Windows Forms development continues to be popular, even though it's the oldest desktop technology available in .NET because it is a rapid application development tool. What that means is I have a designer, you're seeing the designer on the screen here for a form. I can then drag components or controls onto the designer, and then quickly wire them up to code to build my application. Over on the left side of the screen is the Toolbox. This has all the available controls and components that I can drag on the designer. And let's start by taking a look here in All Windows Forms. Actually, let's look in Common Controls, and I can take this Button, drag it over, size it, and move it around on the screen. And then when I want to write code, that will react when the user clicks on this button, I can just double click on the button, and that stubs in the Visual Basic or C# code for that button control. I can do more sophisticated UI. For instance, there's something called the MonthCalendar. Drag that over. Notice that I get a complete calendar. Also, when I'm dragging items around on the screen, it'll tell me when I'm within the prescribed distance between the two controls. You see that little line there between the top of the calendar control and the button. Or at the bottom when I move down, it's telling me I'm at the safe distance away from the edge of the form. And if I move it further to the left, I'll get a line that tells me that these two controls are in alignment on the left side. Also, if I make this larger, you'll see I'll get a line on the other side too. Now this is a fully functioning control, this calendar. So if I run the application, I can see the calendar and I can select my dates, pick different months, and so on. Now I'm going to select those by dragging with my mouse and pressing the Delete key. And now we'll go look at the other types of controls that are available. There's a lot of different ones available. We're going to look in the Menus & Toolbars section and use this MenuStrip. So I'll grab that and drag it over, and I release the mouse. It'll dock it to the top of the screen, and then I can go up here and right click, and choose to do things like Insert Standard Items. So what that does is it builds a menu for me with the standard menu items you see in most applications. Here, I can see there's File, New, and there's Edit, Cut, Copy and Paste. And you notice that it also hooked up the keyboard shortcuts and it also placed some icons on the menu. Now these icons look dated compared to what we see in modern UI development, but we're able to build our application quite quickly. Now the next thing is to add what's called a ToolStrip. So I'll drag that over and let go, and notice how it also docks to the top of the screen. So it docks to the top, and then I can go here and click on this button on the right side and choose Dock, Top, or any of the other sides. Like so. I can also choose to insert the standard items. Now I've got menus and I've also got buttons. Another useful feature in WinForms is the ability to add a set of data that I can use throughout the application. That's called a dataset, and I've already added one here. So if you take a look at the dataset, you'll see I've got three tables from my database, Shippers, Categories, and Products. And there's also an associated table adapter for each of those, which is responsible for getting the data and pushing it into the controls. So the way I would use this is I would go to my Form Designer, go down to the Data section of the Toolbox, find this thing called the DataGridView and drag that over, then I'll choose to dock that in the parent container, and then I'll make this form a little bit taller and wider. Next step is to click on the DataGridView. Go to this little button at the upper right and choose what settings I want to have enabled for this DataGridView. So I can enable adding, editing, and deleting the rows in the database. I can also enable column reordering. I can also choose which columns. Now I haven't picked any data source yet. So let's go up here to the Choose Data Source, and I'll look in here for my dataset, there it is. And then I can see the three tables. Let's choose Products. And then I want to edit the number of columns that are shown. So I go over here and I just remove the columns that I don't want to see. (computer mouse clicking) Those are the columns I want. So I've got the ProductID, the ProductName, UnitPrice, and UnitsInStock. I can also change properties for each of these columns, but this looks good to me now, so I'll click on OK. Now we're ready to test this to see if it's working. So I'll go up here and start the application, maximize the window. So here, you see it in just a few minutes, I was able to create a form that has a menu across the top and has a toolbar across the top. It has a bound data grid view showing the ProductID, ProductName, UnitPrice, and so on. You notice I can click on the top to sort. I can then pick these columns and drag 'em around to new locations. The point is we can quickly build a user interface using this designer and these controls.