Mobile Software: Windows Phone - Elements and Shapes (8)

Hello

Basic Shapes

Ellipse :

Fill - Brush for painting the interior of the ellipse
Stroke - Brush for painting the ellipse outline
StrokeThickness - width of the stroke outline

Transforms
Transforms applied to visual elements means :

Shift to another location
Size change
Rotation

Transforms can be applied in Silverlight to any object that inherit UIElement : text,bitmap,movie,panel,controls.

Transform is possible using the UIElement property RenderTransform. Silverlight support few types of transform :

RotateTransform - rotate by an angle around an x,y point
ScaleTransform - scale in x,y coordinate system relative to an x,y point
SkewTransform - two dimensional skew
TranslateTransform - move the object in x,y plane
MatrixTransform - transform using a matrix
TransformGroup - compose transform using a group of existing transforms

Sample source
BasicShapes_NK.zip
Scale transform is used. The application allows to scale an ellipse up and down using two buttons.
The scale is done relative to ScaleTransform.CenterX and ScaleTransform.CenterY which are by default 0,0.

The Border Element
You have a TextBlock and you want to make it's border color red - problem. TextBlock does not have border, yet Silverlight has Border element which can be used in this case.

Important properties :

Child - chiled element to draw the border around
BorderThickness - thickness of the border
CornerRadius - radius of the corner
BorderBrush - brush of the border

Sample source
TextBlockBorder.zip

TextBlock
Common properties :

Font :

FontStretch - Not used

FontStyle - Normal\italic

FontFamily - Ariel, TimeNewRoman,..

FontSize - 10,12,... (pixels)

FontWeight - Normal,Bold,..

TextDecorations - Underline
TextWrapping - what to do when text is longer then the line. Wrap,NoWrap,...
TextAlignement - Left,Right,..

Note that ContentProperty (see Windows Phone - XAML (7)) of TextBlock is Inlines which is a collection of content element name Inline.

Sample source
Note that Run element inherits Inline.

Running application TextBlock inside it's ContentPanel will produce

Playing Movies

Use MediaElement

Mode of Opacity
UIElement has Opacity property. It defines how transparent the element is. Value of 1 means transparent , value of 0 means full opacity i.e. you will not be able to see any element underneath it.

Brushes

SolidColorBrush :

Color

LinearGradientBrush

LinearGradientBrush paints an area with linear gradient. The gradient is along a line which start at property StartPoint and ends at property EndPoint. By default StartPoint coordinate is (0,0) and EndPoint coordinate is (1,1).

Diagonal gradient StartPoint (0,0) EndPoint (1,1)