The Properties Pane in .NET

Generate Code 39 Full ASCII in .NET The Properties Pane

You can use the Properties pane to manage all the visual aspects of a particular element. Because XAML elements have many configurable properties, this pane gives you two very useful shortcuts.

The first shortcut is provided by the division of the Properties pane into several classifications that typically provide access to the following visual aspects of elements: Brushes With brushes, you can set fill and stroke options as well as use an opacity mask on an element. 4, Silverlight XAML Basics, describes in a lot more detail how brushes are used. Appearance In the Appearance section, you can set extended appearance properties for your object. Note that the available appearance properties change drastically based on the object that you are currently editing. So, for example, if you are editing a Rectangle element, in the Appearance section of the Properties pane you can set characteristics such as the corner radii, but if you are editing a Button element that doesn t have corner radii, this option is not available. Layout In the Layout section, you can edit the various layout options for your object, such as Width, Height, and Alignment options. You can also use layout options to change the position of an object in a grid if the layout is on a grid. Common Properties The Common Properties section effectively contains the properties that are common across a type of object. So, for example, typically you edit the common properties for controls that are distinct from shapes here. These options can be very difficult to use, depending on the object that you are editing. For example, if you are editing a control, a common property is its tab index, but if you are editing a shape, the tab index is not available. Transform In the Transform section, you can edit the RenderTransform of your object. This defines how the object can be manipulated by the rendering system. Transformations are covered in detail in 5, XAML Transformation and Animation. Miscellaneous The Miscellaneous section is a catch-all location for properties that aren t available under any of the other classifications.

Do note that these classification panes are further subdivided. You ll notice that many of them have an arrow at the bottom of the pane that you can use to expand and contract the properties view. With this feature, you can hide lesser-used properties until you need them. The second shortcut in the Properties pane is its Search feature, which you can use to search for a particular property. For example, if you know you want to edit some features of a font but don t know the name of the property itself, you can type font into the search engine, and the classifications and available properties will be filtered so that only those that have to do with fonts are displayed. This is done immediately upon a keystroke, so if you are searching for a font property in this example, as soon as you type fo you will see available properties

displayed such as foreground and rendertransform as well as the font properties, as shown in the list of properties displayed in Figure 2-10.

You can use Expression Blend to accomplish the following main design-oriented functions as you put together your application: Organizing the layout Placing and customizing visual elements Placing and customizing controls Designing animations

In Silverlight, you use special tools to create and organize the layout of your application. Several options are available, and the following subsections look at each of them in turn.

With the Grid layout element, you can lay out elements in a structure that looks like a table. (Do not confuse the Grid layout element with a Grid control that gives you functionality similar to a spreadsheet application.) When using a Grid layout tool, you can specify how your elements are placed by indicating their coordinates with virtual row and column designations in the Grid layout. For example, consider the following XAML:

<Grid x:Name="LayoutRoot" Background="White" > <Button Height="38" Margin="104,72,0,0" Width="58" Content="Button"/> <Button Height="24" Margin="210,72,0,0" Width="54" Content="Button"/> <Button Height="49" Margin="0,96,158,0" Width="80" Content="Button"/> <Button Height="54" Margin="297,185,270,0" Width="67" Content="Button"/> <Button Height="33" Margin="104,217,0,213" Width="87" Content="Button"/> </Grid>

When rendered, this XAML appears as shown in Figure 2-11.