Controls in Silverlight

Silverlight has five types of controls

1.) Layout Control –

Controls that can contain another controls are referred as Layout Controls. Layout controls are containers for other controls and as name suggest, it helps to position the children control on screen. Layout controls serves as “Layout Root” of  your application.

Note: You are allowed to use another layout control inside one layout control.

EXAMPLES – GRID, STACKPANEL, CANVAS.

With above three basics you also have – DOCKPANEL and WRAPPANEL too.

For more information on Silverlight Layout Control and layout system – Silveright Layout System

2.) Text Control – 

Text controls typically display string content. There are Three types of Text Controls –

1. TextBox – Normal textbox.
2. TextBlock – Like Labels, simple Readonly text.
3. PasswordBox – Masks a text as user inputs.
4. RichTextBox – More Advance options, formatting features than the TextBlock and TextBox.

TextBox,TextBlock and PasswordBox uses Text property to set the content.RichTextBox uses Block Property, which accepts Block collection.
Block is an abstract class, so you populate this collection with Paragraph, which derives from Block. In XAML, it is not necessary to set the Blocks property explicitly. You can add Paragraph elements to the RichTextBox.
The following code example shows how to set content for the TextBlock, TextBox, PasswordBox, and RichTextBox controls.

XAML –

3.) Resource Control –

They are used to display resources like  – Images, videos or HTML.

1. Image
2. MediaElement – for Audio/Video
3. WebBrowser – Display rendered HTML

The content of resource controls is set with the Source property, which is typically an absolute or relative URL.
The following example shows how to set the content for the Image and MediaElement controls. In both cases, the source files are relative to the application (XAP) file.

4.) Content Control –

Content controls derive from the ContentControl class and can display varied content. You populate these controls with the Content property.

1. Label
2. Button
3. CheckBox
4. RadioButton

You populate these controls with the Content property. The Content property is of type Object, so there are few restrictions on what a content control can contain. Because many classes that derive from Object can contain other controls, you can create nested content in a ContentControl. For example, you can set the Content property of a button to a StackPanel that contains an image and text. A TabItem control is a content control with the addition of a header property.
The following example shows how to set content for the Label, Button, CheckBox and RadioButton controls.

5.) List Control

ItemControl –

Item Control are used for displaying lists or Collection of Items.
EXAMPLE – ListBox, TabControls.
The content for an items control is set with the Items or ItemsSource property.

WHEN TO USE WHAT ?
use the Items property to populate a control directly.
Use the ItemsSource propertywhen want to display a data collection or to bind an ItemsControl to a collection object.

NOTE:
Each items control has a content control that contains each piece of data for that control, whether the items are added explicitly or implicitly when the control is data bound.
Example – ListBox contains ListBoxItem controls.

HeaderItemControl –

Headered items controls derive from the HeaderedItemsControl class and are very similar to items controls. Headered items controls include a Header property that sets the header content for the control.

The Header property is an object so it can display many different types of content.

Example – The TreeView control is an example of a headered items control. Because it can display a header and additional content, the TreeView is ideal for displaying hierarchical data.

DataGrid –

DataGrid is a special kind of list control that displays data in a highly customizable grid.

Content for the DataGrid is et using ItemsSource  and DataContext.
The following example shows a ListBox, TreeView and DataGrid controls bound to the same data source
The TreeView control uses a HierarchicalDataTemplate to show the hierarchical data.

XAML

C#