Monday, April 19, 2010

Drawing charts in the Windows Phone 7 using Silverlight's graphical API, part 2

Besides drawing chart graphs, axes and grid lines we may need to show several values of X and Y coordinates and descriptions for the concrete charts - legends. It means that in general we must be able to draw text. In Silverlight there are neither DrawText nor DrawString methods which are familiar to Net developers. Instead we must create TextBlock element, set its Text property and place the element on the needed position.

A few words about elements positioning in Silverlight. XAML includes the concept of attached properties – properties that may apply to several elements but are defined in a different class. In Silverlight attached properties are frequently used to control layout. Different layout containers have different properties to control position of the element within them. For example if we place an element in a Grid we need to choose the cell in the grid, but when we place an element in a Canvas we must set Top and Left properties. Attached properties can be assigned both in XAML and in the code. In XAML the syntax is the following: AttachedPropertyProvider.PropertyName. For example:

<TextBlock name ="tbTitle" Canvas.Left = "20"
Canvas.Top = "45"></TextBlock>

In the code it is not possible to use the syntax of ordinary properties for attached properties. If we want to work with an attached property's value in the code its owner type (obviously not the type on which this property applies, like elements) must implement accessor methods in the form GetPropertyName and SetPropertyName. Continuing our example we shall write:

Canvas.SetLeft(tbTitle, 20);
Canvas.SetTop(tbTitle, 45);

And finally, there are two more properties of the TextBlock element which can affect the position of a Text - Margin and Padding.
The Margin is the space between the TextBlock and adjacent object(s), which may be also a container. The Padding is the space between the text itself and the outer edges of the TextBlock. The type of the both properties is Thickness structure which have Left, Top, Right and Bottom members. In XAML, we can specify Thickness values in several ways. If you specify four Double values, these represent the Left, Top, Right and Bottom sides, respectively, of the bounding rectangle. if you specify two values, these represent the Left, Top values, and also applies the same values to Right and Bottom such that the resulting Thickness is isometric horizontally and isometric vertically. You can also supply a single value, which applies a uniform value to all four sides of the bounding rectangle. Note that although a format that specifies three values does not cause a parser error, the first value is used for both the left and right value, and any third value is ignored.
Values assigned from code do not have any behavior that can extrapolate values. If you set the value for Left, you do not automatically establish the same value for Right. All Thickness properties must be set discretely in code, although the Thickness(Double) constructor provides a way to set an initial uniform value.

No comments:

Post a Comment