➤ A pop-up like the tooltips in Expression Blend Cursor —
➤
➤ Defi nes a standard cursor other then the default.
DataContext —
➤
➤ You use this for binding.
This section might also feature the following:
Text —
➤
➤ Appears only for controls that have properties like a text box.
IsHitTestVisible —
➤
➤ Appears if you are using drag-and-drop and need to ensure that something is not going to interact with the cursor on a drag.
Tag —
➤
➤ Sets an undefi ned text value of anything to any UIElement so that it can be used in any way you like.
The next section you could see is the text formatting property box if the selected control supports text (Figure 3-11). Otherwise, this area doesn’t appear. The section contains three tabs — one for the text’s regular text and font properties, one for paragraph properties, and the last one for text alignment. All the standard settings are there, including font, font manager, font weight, point size, and so on. Under the Paragraph tab is Line Height, Paragraph Spacing, and Paragraph Alignment. The last tab has Right, Left, and Centered justifi cation settings. Past this tabbed sec-tion at the bottom are the addisec-tional text settings including FontStretch, FontStyle, FontWeight, LineHeight, TextAlignment, TextTrimming, TextWrapping, and LineStackingStrategy.
Some settings are duplicated primarily to make them easy for designers to use.
For example, the tabbed area features icons for Bold, Italic, and Underlined, where these values will be refl ected in FontWeight and the like.
In general, it is best to leave settings in their default states. Notice that settings, not only here but also everywhere, only appear if you change the default. Manipulating typography using this box is great but you need to consider design practices when you deal with text.
Depending on the selected UIElement on the design surface, the next possible section of the Properties pane, is the Transform property box. This box is suffi ciently complicated that it is covered in greater detail in the next section.
Miscellaneous Settings
The last element of the Properties pane is the Miscellaneous settings box. This is for all the settings that do not fi t anywhere else. Here you will fi nd settings like AllowDrop, CacheMode, Clip, FontSource, Inlines, RenderTransformOrigin, and Style.
figure 3-11
AllowDrop is a true or false setting that is used for drag-and-drop operations. Clip is a popular setting that is used to add a geometric shape defined by a path or other shape object that clips the contents of a given control. RenderTransformOrigin is used to set the center point of any transforms you might use (see the next section to learn more about transforms). Style is the last value you typi-cally see in this section, which is used to apply predefined styles to a given control.
Now that you have taken a look at all those sections of the Properties pane, it is time to take a closer look at the Transform section.
Transform(s)
The topic of transforms could probably be a book in itself, especially if you want to get into matrix transforms; but for the most part, Expression Blend hides this complexity with a nice Transform tool in the Properties pane. Start by looking at the Transform tool shown in Figure 3-12.
You can see that the Transform section is broken down into two subsections — RenderTransform and Projection, sometimes referred to as 2.5D or Fake 3D. Let’s start with the RenderTransform section.
Right above the RenderTransform tabs is the title RenderTransform, and there is a small box to the right of the text. If a RenderTransform of any
kind is applied, this little box will be a white box. (The same is true of the Projection section below it.) Sticking to the RenderTransform section, it is good to note that under the covers (that is, from a compiler rendering engine standpoint) these are all Matrix Transforms — for all the super math geeks. Expression Blend has broken this down, and, in fact, XAML generally hides this. You can still do Matrix transforms, but that is abstracted from us by XAML language constructs and Expression Blend. What you have here is the set of tabs that correspond to all the kinds of things you would normally do using transforms.
The tabs each have their own set of properties or tools related to the specific kind of transform you might want to do to the selected element on the design surface. The tabs are in the following order:
Translate, Rotate, Scale, Skew, Center Point, and Flip transforms. Center Point is not so much a transform but an element of a transform that manipulates how a given transform is applied.
The Translate transform is used to effectively move a selected object based on x/y values and a given center point. To the very left of the area is a 9-point map that represents the key points on the object; based on that center point, an object is moved the set x and y values. If you use relative values and click that checkbox, then your x and y values are lost. Anytime you are manipulating these values and you click Apply, then the current values are thus applied to the selected object.
The second tab is the Rotate transform tab, which has an angle tool that is a circle along the left side (see Figure 3-13).
You can click the line in the middle that goes from the inner circle to the edge of the angle indicator and move that line around the circle to get the angle you want. If you try this in Expression Blend, you will also see that the bar next to this angle tool shows the angle in degrees, and you can move the
slider in this box to adjust it as well. Here also, if you use relative values, your degree/angle setting will be lost. If you do not see changes on the design surface immediately, you can click the Apply button here as well after “Use relative values” is clicked.
The Scale transform is used to change the size from what would normally be the size of the selected object. The resize is calculated for you by an x and y value applied by the Scale transform. What this means is that if x and y are set to 1 (a double type in this case), nothing changes; but if you change both values to 2, the object will be rendered twice as big. This can be used also to only render the transform on one axis by changing only one of the values, but this will skew the object on either the x or the y axis. You can set relative values here as well and apply them using the Apply button.
The Skew transform works like the Scale transform but moves the opposite sides of the object on the axis on diametrically opposed vectors on that axis — meaning if you have a square and set the x value to 2 of the skew, then the rectangle looks slightly like a parallelogram with the bottom moved slightly to the right and the top moved slightly to the left. You can use negative numbers to do the opposite. You can use relative values and apply them with the Apply button as with the other transforms.
The Transform Center Point is for setting the center point of all transforms. This is done using an x and y value that is a double, where 0.5 represents the center point of the given object on the selected axis.
For example, if you set the x and y values to 0, then the center point would be the upper-left corner, and if you applied the Skew transform, then the difference would be that the top face of the rectangle would stay where it is and only the bottom would move.
The Flip transform is really just a Scale transform using one axis with a negative number. A designer does not care to know how it happened — they just want to flip something and not think about it.
A good activity to really get your head around what these Transform tools do is to open Expression Blend in Split view and play with these; see what happens in XAML and visually on the design surface.
One of the big things that many Silverlight Developers like to do is three-dimensional (3D) effects, but because the Silverlight run time needed to be small and there is just so much space in the binary, 3D (as in WPF) was left out.
Owing to a need or want for the look of 3D, however, you have the ability to do PlaneProjection, which allows us to do things that look 3D without all the heavy lifting built into WPF. Look at the projection in Figure 3-14.
figure 3-13
figure 3-14
The Projection section next to the title Projection also has a small box that is white if you have a Projection Transform applied. The first Projection tab is the one that actually sets the 2.5D transform based on a set of x, y, and z points. You also get a small 3D-looking line globe next to the three point values that allows you to manipulate the PlaneProjection settings using your mouse to figure out the angle you want. This can have relative values applied like the regular transforms as well.
The last three tabs of the Projection area are used to set the center of rotation, global offset, and local offset. These values are all used to change how the PlaneProjection transform is applied.