The Importance of an Impressive User Interface
Microsoft and other companies have invested millions of dollars in software research and development. The primary factors that affect and influence end users are performance and the user interface. The compilation of factors that influence the end user are referred to as the "user experience" (UX). Software developers are on a continual quest to improve application performance, however new rules and guidelines have recently been introduced that define higher standards for the creation of user interfaces. The new guidelines were primarily released by Microsoft and coincide with the release of Windows Vista, WPF, and, in turn, Silverlight.
Basically, the more impressed a user is with the overall user experience that an application provides, the more impressed they will be with the application and the more likely they will be to refer the application to others. This module, obviously, focuses on how to create user interfaces by using Silverlight.
Drawing Graphics
Silverlight is a subset of WPF as applied by using principles of an extended ASP.NET AJAX. As such, Silverlight implements many of the features included in WPF. For instance, Silverlight provides the ability to draw two-dimensional (2D) graphics in applications. Graphics of this caliber are more than adequate for most user interfaces and applications, particularly business applications. However, there are applications which require more elaborate graphic capabilities, three-dimensional graphics (3D). For example, an engineering application may benefit tremendously from 3D graphics in the user interface. Whilst WPF provides 3D graphics, Silverlight, currently, does not.
In order to provide 3D graphics, an application must utilize the hardware of the local workstation and the facilities of the local operating system. Silverlight is designed to be cross-platform and cross-browser compliant. With that in mind, it cannot be tied to any particular hardware configuration, operating system, or browser. This design coincides very well with the design goals of Silverlight but does not lend itself to rendering 3D graphics.
Silverlight, currently, does not support 3D graphics but may do so in a future version.
Graphic Elements
Drawing in Silverlight is accomplished through the use of graphic elements such as an ellipse or a rectangle. All graphic elements in Silverlight extend the Shape type. As a result, all Shape type objects in Silverlight include some common functionality as listed below:
Stroke: the stroke defines the outline of the shape
StrokeThickness: the stroke thickness defines the thickness of the outline of the shape
Fill: the fill defines how the interior of the shape is filled or painted
Lines
To draw lines in Silverlight, use the Line object. A line can easily be drawn on a canvas by using Blend and can be created directly in XAML by using Visual Studio 2008. A line is defined through the definition of two points. Each point is comprised of a combination of an X coordinate and a Y coordinate.
The markup snippet shown below is used to render a red, diagonal line from 10, 10 to 100, 100.
The canvas that results from the markup snippet above is shown in the following figure.
Ellipses
An Ellipse object is used to draw round objects in Silverlight. The circular characteristics of an ellipse are defined by specifying the height and width of the ellipse. The markup snippet shown below renders an oval ellipse with a blue gradient fill and a stroke of 3.
Sometimes, when using a graphical design tool, such as Blend, it may be tough to create an exact circle. To create a circle with a Silverlight ellipse, ensure that the height and width values are the same. To create a circle in Blend, when sizing the ellipse, hold down the Shift key. The markup snippet below renders a circle with a diameter of 100px, a stroke of 3, a green fill, and a yellow stroke.
The result of the two ellipse definitions above is shown in the figure below.
Rectangles
The Rectangle class is used to draw rectangles in Silverlight. The markup snippet below illustrates drawing two rectangles, a larger, blue rectangle in the background and a smaller, orange rectangle on top.
Just as with an ellipse, when sizing a rectangle by using Blend, if you want to draw a square or maintain the current aspect ratio of the rectangle, hold down the shift key. The result of the markup above is shown in the figure below.
Paths and Geometries
The Path object also derives from the Shape object, however, the Path object has no defined shape. Instead, a Path accepts an indirect or abstract definition of a shape to define how the Path is rendered. The Geometry class is used to define how a Shape is rendered. There is only one Path class but many types of Geometry classes. The Geometry class itself is an abstract class that cannot be directly instantiated but one of its child classes must be instantiated.
The Path class can be used to define simple shapes such as lines, ellipses, and rectangles in the same manner as the Line, Ellipse, and Rectangle classes, however the PathGeometry class is used to create more complex shapes. Creating paths can be rather tricky by hand coding the path coordinates directly in XAML. When using a design tool, such as Blend, paths are created as a combination of simpler elements or freehand by using a pen / pencil tool. The markup snippet below shows several path elements that were rendered in Blend when a sketchy little stick man was quickly drawn with the pencil tool.
The result of the markup shown above is shown in the following figure.
There are several types of geometries that can be utilized with a path including a LineGeometry, a RectangleGeometry, an EllipseGeometry, and a PathGeometry. The PathGeometry can compile complex shapes from multiple path segments. Path segments include arcs, béziers, lines, and variations of each.
The PathGeometry is used above in shorthand form. The Path object includes a Data attribute that accepts multiple coordinates to define points along the path. Upon closer look, you will notice that the Data attribute value also contains characters such as "M" or "C". The Data attribute value is actually a mini markup language and the characters are very meaningful as well as case-sensitive. For instance, an uppercase "M" signifies a move command and the coordinates that follow indicate the movement of the path.
Brushes
Brushes are used to paint spaces contained by a stroke, or border or the stroke itself. For instance, a brush can be used to paint the interior space of a rectangle. In fact, in the rectangles example above, a gradient brush is used to paint the interior of the rectangle as shown in the markup snippet below.
Brushes can be used to paint solid colors, gradients, images, and even video. The ability to paint with images is fairly common among graphic design tools, however the ability to paint with video is only available in a very few elite graphic tools. Expression Blend currently supports image and video brushes but only for WPF and not for Silverlight applications.
However, it's fairly easy to create an image brush fill as shown in the markup snippet below.
The result of the markup snippet above is shown in the following figure.
To paint by using video, a little more work is required. First, a VideoBrush does not directly play video but utilizes video from another source such as a MediaElement object. The MediaElement object is discussed again in the section below. In the example below, video is being played as the fore ground of text. The TextBlock.ForeGround utilizes a VideoBrush that, in turn, utilizes video from a MediaElement object.
The result of the markup above is shown in the figure below with video playing as text.
Transformations
Transformation objects are used to transform other Shape objects. There are various types of transformations including rotations, scales, skews, and translations. A scale is a resize. A skew transformation skews the shape of the Shape. A translate moves a shape.
The markup snippet below illustrates applying a 45 degree rotation to a TextBlock.
No comments:
Post a Comment