Flash to Silverlight

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

Flex Components to Controls

The list below provides a mapping from core components in Flex to similar controls in Silverlight. Controls in Silverlight are customizable using Styles and Templates. The term "lookless" is often used to describe the way the controls can be re-skinned and maintain the same functionality. To walkthrough an example of this concept, try the Styling and Skinning tutorial from the Eyes of Blend series.

The descriptions below each set of controls discuss the most common properties the control type. Additionally, links may be found pointing to tutorials that demonstrate the techniques and concepts discussed.

UI Controls 

 

AdvancedDataGrid to DataGrid

DataGrid

The standard DataGrid control supports advanced features like multi-column sorting, row styling, column styling and item renderer type functionality. Hierarchical data rendering is not included, but there are multiple 3rd party components to purchase and code samples to learn from.

For more information, reference the DataGrid description on this page.

Alert to ChildWindow* 

ChildWindow

The ChildWindow class includes chrome, a close button and an overlay like the Alert class. The difference is that the content is completely customizable. The Closed event of the ChildWindow passes a DialogResult indicating whether the window was accepted or canceled.

Silverlight also includes a MessageBox class with a similar layout as the Alert control, but a browser dialog is used instead of a window within the application.

Button to Button 

Button

With similar events exposed, the noticeable difference with the Button in Silverlight is the ability to completely reskin the look and interactivity of the Button using Templates for the control as well as the Content. The behavior can be modified by editing the animations of States and Transitions. To walkthrough an example of this concept, try the Styling and Skinning tutorial from the Eyes of Blend series.

CheckBox to CheckBox 

CheckBox

The selected property maps to the IsChecked property and the label maps to the Content property. The placement of the text can be modified by creating a new template for the Checkbox.

ComboBox to ComboBox 

ComboBox

The dataProvider property maps to the ItemSource property as the data used to generate list items. The ComboBox in Silverlight does not have an editable property. Following along with the templating model, you can modify the look and composition of individual ComboBoxItems by creating a new template for the ItemTemplate property of the ComboBox.

ColorPicker 

Although there is no ColorPicker control available in Silverlight, there are multiple 3rd party components to purchase and code samples to learn from.

DataGrid to DataGrid*  

DataGrid

The dataProvider property maps to the ItemsSource property. Providing the functionality for multi-column list display of data, the DataGrid has many features that can be useful DataBinding, resizable columns, grouping, sorting, filtering, editing validation, paging and more. For more information on these features, including how to customize the appearance, check out this list of DataGrid tutorials.

DateChooser to Calendar* 

Calendar

The selectedDate maps directly to the SelectedDate property. Along with many familiar properties, the Calendar control has a DisplayMode property. This exposes the option to render the Calendar in Year and Decade mod along with the default Month mode.

DateField to DatePicker 

DatePicker

The selectedDate maps directly to the SelectedDate property. The format of the selected date string in the DatePicker class is limited to two options Short or Long.

HorizontalList to ListBox 

ListBox

Horizontal layout of items within a ListBox can be accomplished by creating a new template for the ItemsPanel property. The new template only needs to contain a StackPanel with its Orientation property set to Horizontal.

For more information, reference the ListBox description on this page.

HSlider to Slider 

Slider

The value property maps directly to the Value property. The direction of the Slider is determined by its Orientation property and can be used vertically or horizontally. The appearance and behavior of the Slider is customized by creating a new Template with proper TemplateBindings in place.

Image to Image 

Image

The source property maps directly to the Source property. The Image control in Silverlight supports JPEG and PNG files. The Source can be set to an absolute URL or a URL relative to the XAP file of your application. Once the Source is set, image loading happens asynchronously and fires either an ImageOpened or ImageFailed event.

Label to TextBlock 

The TextBlock class is used in Silverlight to display non-editable text. The text maps to the Text property and there is no equivalent to htmlText. Although the text from a TextBlock is not selectable like the label, you can work around this by using a read-only TextBox.

LinkButton to Button 

Button

The look and functionality of a LinkButton can be accomplished by changing the template of the Button class. For more information, reference the Button description on this page.

List to ListBox 

ListBox

The dataProvider property maps to the ItemsSource property. ListBoxes are very flexible controls in Silverlight and provide many Templates that can be reskinned to modify appearance, layout and behavior. Along with typical Templates for reskinning controls, you can also make use of DataTemplates to skin data objects when bound to the ItemsSource property.

To walkthrough an example of this concept, try the Styling and working with Design-Time Data tutorial from the Eyes of Blend series.

NumericStepper to NumericUpDown* 

NumericUpDown

The stepSize property maps to the Increment property, but the displayed values is dependent on the DecimalPlaces property.

ProgressBar to ProgressBar 

ProgressBar

The value property and setProgress method map to the read/write Value property. The indeterminate property maps to the IsIndeterminate property. The indeterminate animation can be modified by creating a custom template for the ProgressBar and changing the Indeterminate State animation.

RadioButton to RadioButton 

RadioButton

The selected property maps to the IsChecked property and the label maps to the Content property. groupName and GroupName have the same functionality just slightly different casing.

RichTextEditor to RichTextArea** 

RichTextArea

Added as a new control in the Silverlight 4 Beta, the RichTextArea allows you to set the font family, color, size, decorations and support paragraph formatting, bi-directional text and inline hosted controls using InlineUIContainer objects.

Text to TextBlock 

The TextBlock class is used in Silverlight to display non-editable text. The text maps to the Text property and there is no equivalent to htmlText. Although the text from a TextBlock is not selectable like the label, you can work around this by using a read-only TextBox. WordWrapping is on by default and can be turned off if not desired.

TextArea to TextBlock 

The TextBlock class is used in Silverlight to display non-editable text, single and multi-line. The text maps to the Text property and there is no equivalent to htmlText. Although the text from a TextBlock is not selectable like the label, you can work around this by using a read-only TextBox.. WordWrapping is on by default and can be turned off if not desired.

TextInput to TextBox 

TextBox

The text property maps directly to the Text property. There is no displayAsPassword property instead a separate control called PasswordBox is used instead.

TileList to ListBox 

ListBox

Tiled layout of items within a ListBox can be accomplished by creating a new template for the ItemsPanel property. The new template only needs to contain a WrapPanel* and the Horizontal Scrollbar needs to be disabled on the Listbox control.

For more information, reference the ListBox description on this page.

Tree to Treeview* 

Treeview

The dataProvider property maps to the ItemsSource property. The Treeview exposes similar templates like the ListBox and provides access to individual items via the TreeViewItem object.

VideoDisplay to MediaElement 

MediaElement

The MediaElement can play a number of different types of audio and video files. For more information on supported formats, check out the Supported Media Formats, Protocols, and Log Fields page.

The MediaElement control provides layout, user interaction and an interface to the media with playback functionality. Used in combination with a VideoBrush, the media can be used to paint other elements including TextBlocks.

VSlider to Slider 

Slider

The value property maps directly to the Value property. The direction of the Slider is determined by its Orientation property and can be used vertically or horizontally.

For more information, reference the previous Slider description on this page.

Containers 

Accordion to Accordion* 

Accordion

The Accordion, similar in behavior, includes multiple features such as Selection Mode, Expand Direction, sequence of animations and customizable headers.

Box, HBox, VBox to StackPanel 

StackPanel

The direction property maps directly to the Orientation property of the StackPanel. Rather than padding properties on the parent container, spacing is determined by the Margin property values of each child control.

Canvas to Canvas 

Canvas

Similarly the Canvas control in Silverlight is the only container that supports x and y positioning. In place of defined x and y properties this is implemented using the attached properties of Canvas.Left and Canvas.Top. Another useful attached property from Canvas is the ZIndex property which can be used to modify the rendering order of child objects.

DividedBox, HDividedBox, VDividedBox to GridSplitter* 

GridSplitter

Used in combination with the Grid control, the GridSplitter provides a high-level of flexibility. The position of the GridSplitter is determined by the Grid.Row and Grid.Column attached properties acting as a coordinate system. The GridSplitter can also span multiple columns or rows using the Grid.RowSpan and Grid.ColumnSpan properties.

Grid to Grid 

Grid

The Grid class in Silverlight is used for the same purpose but grid composition and layout is defined differently. One the Grid tag is added, rows and columns are defined separate from children objects using the RowDefinitions and ColumnDefinitions properties. Then children objects are added defining their own placement, column span and row span using the attached properties: Grid.Row, Grid.Column, Grid.RowSpan and Grid.ColumnSpan.

TabNavigator to TabControl* 

TabControl

The TabControl provides similar to functionality including tab generation, selected index and events, but also provides customizable tab strip placement.

* Controls marked with the star symbol (*) are a part of the Silverlight ToolKit.

** Controls marked with a double star symbol (**) are new in Silverlight 4 Beta.

blog comments powered by Disqus