Posted by Alex on July 26th, 2011

In this article I will continue where we left off last time discussing Transformation of Drawing objects in Expression Blend. Microsoft Expression Blend offers standard vector drawing capabilities so that you can draw shapes, paths, and masks just as you would in any vector graphics program.

A Drawing object describes visible content, such as a shape, bitmap, video, or a line of text and different types of drawings describe different types of content. The following types are exposed in WPF:

ImageDrawing – Draws an image

GeometryDrawing- Draws a shape.

GlyphRunDrawing – Draws text.

DrawingGroup – Draws other drawings. Use a drawing group to combine other drawings into a single composite drawing.

VideoDrawing – Plays an audio or video file

GeometryDrawing- Draws a shape.

GeometryDrawing – Draws a shape and its Geometry property describes the shape to draw, its Brush property describes how the interior of the shape should be painted, and its Pen property describes how its outline should be drawn. A Shape is a type of UIElement that enables you to draw a shape to the screen. Shape objects are UI elements and can be used inside Panel elements and most controls.

All shape objects inherit from the Shape class and available shape objects include Ellipse, Line, Path, Polygon, Polyline, and Rectangle. Shape objects share the common properties and any object can have these properties defined for it through the Properties panel and the Appearance pane in Expression Blend.

• Stroke: Describes how the shape’s outline is painted:

• StrokeThickness: Describes the thickness of the shape’s outline:

• Fill: Describes how the interior of the shape is painted:

• Opacity masks: An opacity mask can be a path or shape that is applied to another object. The transparent portions of the path represent areas where the underlying image is hidden, whereas the opaque portions of the mask indicate where the masked object is allowed to show through:

100% Opacity

20% Opacity Mask

The Canvas panel is a particularly good choice for creating complex drawings because it supports absolute positioning of its child objects.

Stretchable Shapes

The Line, Path, Polygon, Polyline, and Rectangle classes all have a Stretch property. This property determines how a Shape object’s contents (the shape to be drawn) is stretched to fill the Shape object’s layout space. A Shape object’s layout space is the amount of space the Shape is allocated by the layout system, because of either an explicit Width and Height setting or because of its HorizontalAlignment and VerticalAlignment settings and Expression Blend these properties are accessed from:

Expression Blend also allows you to stretch your object right on the artboard using adorners:

To this using corner radius handle (adorner) :

This was a rectangle and I rounded the edges of the Rectangle element by using the adorner that appears when you move your mouse pointer over one of the two handles outside the upper left corner of the rectangle, or I could have used the RadiusX and RadiusY properties under Appearance in the Properties panel:

Also if you hold down SHIFT while you drag either corner radius handle, you can edit the X and Y corner radii individually.

The Stretch property takes one of the following values:

• None: The Shape object’s contents are not stretched.
• Fill: The Shape object’s contents are stretched to fill its layout space. Aspect ratio is not preserved.
• Uniform: The Shape object’s contents are stretched as much as possible to fill its layout space while preserving its original aspect ratio.
• UniformToFill: The Shape object’s contents are stretched to completely fill its layout space while preserving its original aspect ratio.

Note that, when a Shape object’s contents are stretched, the Shape object’s outline is painted after the stretching. Let’s look the rectangle we drew earlier:

Stretching Images

The Stretch property controls how an image is stretched to fill its container. The Stretch property accepts the following values, defined by the Stretch enumeration:

• None: The image is not stretched to fill the output area. If the image is larger than the output area, the image is drawn to the output area, clipping what does not fit.
• Fill: The image is scaled to fit the output area. Because the image height and width are scaled independently, the original aspect ratio of the image might not be preserved. That is, the image might be warped in order to completely fill the output container.
• Uniform: The image is scaled so that it fits completely within the output area. The image’s aspect ratio is preserved.
• UniformToFill: The image is scaled so that it completely fills the output area while preserving the image’s original aspect ratio.

The following image shows the output from the example and demonstrates the effect the different Stretch settings have when applied to an image:

Properties exposed:

Conclusion

Well folks, that’s it for now, I ran out of time! Next time we will continue with visual brushes. A VisualBrush paints an area with a Visual object, and the VisualBrush is the most versatile and powerful of all the brushes as far as my opinion is concernedJ! Well, here is where I signoff with “Koala” VisualBrush effect:

Tags: design, Expression Blend, Visual design

This entry was posted on Tuesday, July 26th, 2011 at 8:08 am and is filed under Expression Blend. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.