Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
A frequently used tool window in Visual Studio 2010 is the Properties window. This window is typically docked to the right side of the IDE. The hotkey for this window is F4. I'm inside Visual Studio, and I have this solution called PropertiesWindow open. There is one project inside this solution called WpfApp. This is really a mixed application. It has a Windows form and an HTML page and also a XAML page in here. I am going to start by looking at the MainWindow.xaml page. I'll double-click on this icon, and that loads the designer.
Now I'm going to add a couple of controls to this designer, by going to my Toolbox and dragging the Button to the designer surface, and then I am going to drag the TextBox to the Designer surface. Next, I am going to the show you how the Property window works. The Property window is over here in the lower right-hand corner of the screen. To make it easier to see, I am going to detach it by dragging it out and moving it into the main part of the window.
You may need to size it to fit on your screen. Then I am going to sort alphabetically. By default, when you first start Visual Studio, the property grid is sorted by Category view, which means it stores the different property settings in these categories, like Layout. I don't like this view. I prefer the alphabetical view, so I am going to switch to the alphabetical view. Then I am going to show you that when you select an item in the designer, the property grid automatically monitors that control and loads the property grid with the settings from that control.
So I'm seeing the properties of this button. When I click on the text box, I'm seeing the properties of the text box. You can verify that by looking up here and seeing that I'm working with a text box, and the name of the text box is textBox1. There are a lot of properties on the button class. Let me select it again. If I want, I can filter the property grid to only show me a subset of the properties. I do that by clicking in the Search and typing in the first letters of the item I am looking for.
For instance, I want to look for the Width property, so I am going to type in "wid". I see the Width property down here at the bottom, but I also see that there was a MinWidth and a MaxWidth property that also contain those three letters. When I'm done filtering, I can click on this X button to go back to the entire view. Each property is listed here in alphabetical order. One of the cool things about the property grid is that when you select a property, like this Background property, it loads a custom editor in this section over here.
Because the background uses a brush, it's loading the brush editor. So when I click on this dropdown, I get a color editor for changing the color value of the Button. When I click on the Clickmode property, I get a different editor. Let's see what I have over here. This is an enumerated value, so I get in the list of the three possible enumerated values for this property. This is very handy. If you like to edit your items visually, this is super-easy to use.
There is an indicator down the center of the property grid that shows whether I'm using the default value or not. This diamond here signifies I'm no longer using the default value for the background color of the button. I can reset it at any point by right-clicking on this icon and choosing Reset Value. Now this only works in Silverlight and WPF applications. ASP.NET, the HTML editors, and other designers use a different metaphor for this reset. For instance, like the ASP.NET editor, it shows if I'm using a non-default value by bolding the text in this column.
Not only are there properties in this button, but this button also contains events. The property grid shows me the events when I click on this tab here. This lists every event that this button is capable of listening for. So if want to write some code for a click event, I would go to this section, and I would type in the name of the function that I want here. Or let's say I want to work with the mouse event, so I'll go down to the Ms and find something called MouseLeftButtonUp.
Now the way I can write code is I can double-click on this event, and Visual Studio will pick a name for me and write the code. Let me show you. I'll double-click. Visual Studio switches me over to the Code Behind window and shows that it wrote a function called button1_MouseLeftButtonUp. We'll learn more about these in the Coding chapter. I'm going to switch back to the designer. Now I can see that this event has the name of the event procedure listed here. If I don't like that name, I can change it here or I can suggest my own name.
Let me go to MouseEnter and type in my own function name, like that. I will press enter. Visual Studio switches over to the Code view and writes in this piece of code. Notice how the name is the one that I selected in the property grid. When I switch back to the Designer view, if I want to undo the event wiring, I can come here and delete the word "myCode".
Now when that event fires, myCode will no longer run, however, Visual Studio does not remove the code from the Code Behind window. You see it's still here. Let me put this property grid back in its normal position. To do that, you'd hold down the Ctrl key and double-click on the header. Now, it's back in its original position. Then I'll switch back to the designer, and let's review. The property grid contains two sections: Properties and the Events. In the Events section, you can see the names of the events, you can write code, you can rename the code, and you can remove the code.
If you're in the Property view, you can monitor the properties of the selected object and change them. One thing I didn't mention earlier is that you can select more than one item. If I drag a second button over here, and select the two of them, then the property grid, when I make changes over here, it's changing common properties that are shared among both of these controls. So if you are a visual person, you are going to love using the Property window to edit your UI items. If you're not a visual person, you can always hand-edit the HTML, the XAML, or the C# code instead.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96696 Viewers
56 Video lessons · 110413 Viewers
71 Video lessons · 79242 Viewers
131 Video lessons · 38000 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.