This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

Now, the last stop on our tour is to go into the property inspector and take a look at how we could modify the properties of all the elements that we are working with. In order to do this, I am just going to create a quick rectangle. I am going to switch over to the properties palette over here on the right. You will hear some people refer to this as the property inspector and sometimes are referred to as the property palette. It is just different people referring to it by different names but more commonly, it is called the properties palette. Now, the first thing we notice was when I switched to the properties tag is up on the tag, it is indicating what the name of the currently selected object is and what type it is.

In this case, the rectangle in the object three says rectangle here. But, if I look at over in the properties palette, it tells me that it does not actually have a name. The square bracket around the element in the object three indicates an unnamed element and that is an element that you cannot interact within code. So if I want to say hide this rectangle under certain circumstances since it does not have a name, I cannot actually get at it. When we are renaming the rectangle to blue rectangle earlier, that was a way to name the rectangle and once it had a name, I could change its visibility or any of its properties from code if I so deem it appropriate. Here, I could also click and rename the rectangle and it does the same thing.

You will see up here that the name has changed and you will see here over here at the object three that the name has changed as well. Now, underneath that, you will see the properties. There are several different categories of properties split into logical group appearance, layout and so on. You can use the mouse wheel or the scroll bar over to the right to roll through all of the different properties. And, you will notice that the properties will give you some text indicating what that particular property does. That text however comes from the .NET framework documentation so it is not always the friendliest as to what it means. But hopefully, it will give you enough of an idea. And, you can try and figure it out. Each of these categories can be collapsed or expanded just like the panes on the individual palettes.

Many of the categories also have this small chevron indicating that there are advanced properties. Blend has really tried to set the group of most commonly used properties on the front page so you will see them immediately. For instance, here in the appearance category, the opacity or the visibilities are properties that you would most commonly use were clipped to bounce or snap to device pixels are probably not the most important. That does not mean you do not need them, it just means that they are off to the side so they are not always in your way. If you happen to know the property you are looking for, you could also type it here in the search box and it will filter the list down to only the properties that contain the string that you want. I can also type a type of property like show me all the Booleans. And now, it is showing me all the properties that contain either the string bit map or Boolean or all the properties of type bit map or Boolean.

Now, that is just a fancy way of saying that you can filter down your list to a particular set of properties to help you work with what you are working on. One other nice thing about the property inspector is when I press the F4 key to hide all my palettes, the property inspector turns into its mini mode and you can see the different categories displayed over here. As I click on any of those categories, the properties of those categories are displayed for me so I can immediately make the changes here. And then once I click somewhere else, those properties get out of my way. This is just another way to help you use as much of your real estate as possible to get the effect that you are working on. When you press F4, it will bring back your property inspector and you have your full capability.

One other side to the property inspector is up here at the top. Right now, we are displaying the properties. If I click on this small lightning bolt, this will now show me all of the events. This is that first step into interactivity and this is where you state that when a particular event occurs on an element that you want some piece of functional code to be run. The properties inspector has every single property that you could possibly set on the currently selected object. The challenge however is if you have multiple objects selected of different types. Watch when I hold down control and select the grid as well. As soon as I select that, up at the top, you will notice that two objects are selected and two types are selected but many of the properties that we saw before have disappeared. What is happening now is when multiple elements are selected. They will all show the properties and only show the properties that are common to all the selected objects.

So for instance, the opacity of all the objects, every object can have the opacity set so that property is displayed. The width of an object, you will notice shows three dashes here. That indicates that among the objects selected, they do not all have the same value here. So, it does not know which one to show. I could however click and set the width to 100. And, when I press return, it will set the width property on all of the currently selected elements to the value that I specified. This is a quick way to set multiple elements to a single value. But remember that when you got multiple elements selected, you may not always have access to all the properties that you are looking for.

Now, the last stop on our tour is to go into the property inspector and take a look at how we could modify the properties of all the elements that we are working with. In order to do this, I am just going to create a quick rectangle. I am... click to read more