Flash to Silverlight

You do Flash and now you want to add Silverlight to your skillset?
You've come to the right place.

MovieClip to UserControl

The concept of a MovieClip as a reusable, self-contained object that can contain children objects is transferrable to a UserControl in Silverlight. When creating a new UserControl in either Blend or Visual Studio, a XAML file is created used to define the interactive content, and a linked class file is created used to define programmatic behavior.

Instances of a UserControl class can be created by declaration in XAML or in code programmatically. When declared in XAML, UserControl instances are available by navigating the object tree or in the containing object by name, when you assign an x:Name (similar to the instance name of a MovieClip).

Below is a list of MovieClip properties in comparison to the properties of a UserControl in Silverlight. Many of the properties are inherited from lower level classes and are available in most controls in Silverlight, not just the UserControl.

Property Comparison

alpha to Opacity 

movieclipguy disappearing

A value between 0 and 1 that determines the transparency of an object. An Opacity value of 0 does not exclude an object from hit testing. To avoid hit testing you can set IsHitTestVisible to false.

cacheAsBitmap to CacheMode 

movieclipguy cached

This setting is used to tell either platform to cache rendered visuals as bitmaps. This is an effective way to improve the performance of animations that modify Opacity, Transforms and rectangular Clips. In order to allow caching in Silverlight, the EnableGPUAcceleration parameter must be set to "true" in the object tag of HTML. Setting an Effect (similar to a filter) on an object, unlike in Flash, does not automatically turn caching on.

contextMenu to MouseRightButtonDown* 

movieclipguy right-clicked

Handling the MouseRightButtonDown event, allows you to completely override the Silverlight context menu and use your own custom objects in its place. Once “e.Handled = true;” is set in your MouseRightButtonDown event listener, the default Silverlight configuration menu will not be displayed. A MouseRightButtonUp event is also available, providing a familiar interaction for users opening context menus.

filters to Effect 

movieclipguy dropshadowed

Pixel Shaders come in the form of Effects in Silverlight. The two Effects that are included in the platform are DropShadow and Blur. Unlike the filters Array in Flash, only one Effect can be applied to an object at one time in Silverlight. The workaround to stack Effects is to apply an Effect on an object, than wrap the object in a simple container like Border and apply a different Effect to that Border. Creating custom effects is possible in Visual Studio with the DirectX SDK installed. A tutorial and 23 custom effects are available at: http://wpffx.codeplex.com/

height to Height 

movieclipguy tall

The same property names, but different implementations. When you get height in Flash, you get the bounds of the display object (Graphic, TextField, Video, etc). When you set the value, the scaleY property is changed to scale the contents to the new height.

In Silverlight, the value you set for Height is a request from the layout system. When your UserControl is contained within a Canvas, for example, you are always granted that Height because the Canvas simply provides absolute positioning. A different container may have more complex layout logic and choose to resize your UserControl (e.g. a FishEye menu).

The ActualHeight property of the UserControl will contain the actual value that was defined after the layout system has arranged all of the objects. The value will be populated after the first SizeChanged event fires and subsequently reset every time the event fires.

Not surprisingly, this is the same implementation for width, Width and ActualWidth.

mask to Clip 

movieclipguy clipped

The Clip property in Silverlight works very similar to mask by defining the clipping outline of the object. The main difference is that clip is defined by a Geometry object (e.g. EllipseGeometry, LineGeometry, RectangleGeometry). The easiest way to create a Geometry is in Expression Blend. Draw the vector shape or path, right-click and select Path -> Make Clipping Path, then select the object to be clipped.

mouseX, mouseY to MouseMove 

movieclipguy with mouse

Rather than properties exposing a Point where the mouse is, UserControls fire an event called MouseMove. This event provides a MouseEventArgs class with a GetPosition method that returns a Point relative to the overall Silverlight plug-in content area. To get a Point relative to an object, you can pass that object as a parameter to the GetPosition method. Additionally this event bubbles up from child to parent all the way to the root. You can use the OriginalSource property of the MouseEventArgs class to return the first object that the mouse moved over.

name to x:Name, variable declaration 

movieclipguy named

Instance names in Silverlight are set using the x:Name syntax in XAML and as variable declarations in code. There is no equivalent to getChildByName as all named objects are available directly when in the current scope for code and after initial compilation for objects in XAML with the x:Name property set.

parent to Parent 

movieclipguy with parent

The Parent property in Silverlight returns a low level class called a DependencyObject. In order to access properties you would normally expect (e.g. Height, Width) you need to cast the parent to higher level type like FrameworkElement. Before casting you can verify the underlying type using the is operator and convert using the as operator.

root to RootVisual 

movieclipguy rooted

RootVisual is not a property of UserControl, rather it is a property of the Application class. During the StartUp of the Application, the RootVisual property is set to an instance of the object used as the main application UI. The RootVisual can only be set once and is accessible in code via the static Current property of the Application class.

rotation to RotateTransform 

movieclipguy rotated

RotateTransform is a class with the following properties Angle (rotation), CenterX and CenterY (registration point). An instance of the class is set as the value to the RenderTransform property of the UserControl. Multiple transforms of different types can be grouped as children of a TransformGroup which is then set to the RenderTransform property, effectively stacking the effects of the transforms.

In Silverlight 4 Beta, a new class is available called CompositeTransform which provides a simplified way to apply Scale, Skew, Rotate and Translate Transforms to a single object.

rotationX, rotation, rotationZ to PlaneProjection 

movieclipguy 3d postcard

3D rotations are available in Silverlight via the PlaneProjection which has matching properties RotationX, RotationY and RotationZ. An instance of the class is set as the value to the Projection property of the UserControl. In addition to rotating on the x, y, z axises, offset properties are also available to translate the position across the different axises.

For more complex scenarios, the Matrix3DProjection class allows you to define your own 3D transformation matrices.

scaleX, scaleY to ScaleTransform 

movieclipguy scaled

ScaleTransform is a class with the following properties ScaleX, ScaleY, CenterX and CenterY (registration point). An instance of the class is set as the value to the RenderTransform property of the UserControl. Multiple transforms of different types can be grouped as children of a TransformGroup which is then set to the RenderTransform property, effectively stacking the effects of the transforms.

In Silverlight 4 Beta, a new class is available called CompositeTransform which provides a simplified way to apply Scale, Skew, Rotate and Translate Transforms to a single object.

tabChildren to TabNavigation 

movieclipguy tabbed

TabNavigation provides multiple behaviors for tab navigation of children objects including Local, Cycle and Once.

tabEnabled to IsTabStop 

Specifies whether the object is included in tab navigation.

tabIndex to TabIndex 

Determines the order that the object receives focus during tab navigation.

transform to MatrixTransform 

movieclipguy transformed

MatrixTransform is a class with a similar Matrix property, but does not include a colorTransform property. An instance of the class is set as the value to the RenderTransform property of the UserControl.

width to Width 

movieclipguy width

The same property names, but different implementations. When you get width in Flash, you get the bounds of the display object (Graphic, TextField, Video, etc). When you set the value, the scaleX property is changed to scale the contents to the new height.

In Silverlight, the value you set for Width is a request from the layout system. When your UserControl is contained within a Canvas, for example, you are always granted that Width because the Canvas simply provides absolute positioning. A different container may have more complex layout logic and choose to resize your UserControl (e.g. a FishEye menu).

The ActualWidth property of the UserControl will contain the actual value that was defined after the layout system has arranged all of the objects. The value will be populated after the first SizeChanged event fires and subsequently reset every time the event fires.

Not surprisingly, this is the same implementation for height, Height and ActualHeight.

x, y to Canvas 

movieclipguy on a canvas

In Silverlight, the Canvas is the type of Panel that supports x, y positioning the form of Top and Left. In order to get and set the values, you use the following static methods of the Canvas class GetLeft, SetLeft, GetTop and SetTop.

Other type of Panels, such as the Grid or StackPanel, use margins and alignment in place of x,y positioning. In order to get the absolute position of an object within a Panel other than canvas you can use the TransformToVisual method.

visible to Visibility 

movieclipguy Collapsed

Determines the visibility of an object. Unlike what you might expect, Visibility is not a Boolean, instead it is a set of possible values, or in .NET, a data type called an Enum. The Visibility property is set to either Visibility.Visible or Visibility.Collapsed.

* The star symbol(*) denotes a feature available in Silverlight 4 Beta

blog comments powered by Disqus