Silverlight Control Gallery

Namespace: System.Windows.Controls

The following is an alphabetical list of the common Silverlight controls

  • Border

  • Button

  • Calendar

  • Canvas

  • CheckBox

  • ComboBox

  • ContentControl

  • DataGrid

  • DatePicker

  • Grid

  • GridSplitter

  • HyperlinkButton

  • Image

  • InkPresenter

  • ListBox

  • MediaElement

  • MultiScaleImage

  • PasswordBox

  • Popup

  • ProgressBar

  • RadioButton

  • RepeatButton

  • ScrollBar

  • ScrollViewer

  • Slider

  • StackPanel

  • TabControl

  • TextBlock

  • TextBox

  • ToolTip

Border control provides a border, background, or both to another control. A border can contain only one child element.

Examples

The following example shows how to create a Border around some text.

<Border Background="Coral" Width="300" Padding="10" CornerRadius="20">
    <TextBlock FontSize="16">Text Surrounded by a Border</TextBlock>
</Border>

The preceding example produces output that is similar to the following illustration.

The following example shows how to put a border around several TextBlock objects contained in a StackPanel.

<Border BorderThickness="5" BorderBrush="Blue" >
    <StackPanel Grid.Column="0" Grid.Row="0">
        <TextBlock Text="One"/>
        <TextBlock Text="Two"/>
        <TextBlock Text="Three"/>
    </StackPanel>
</Border>

Button

The Button control reacts to user input from a mouse, keyboard, stylus, or other input device and raises a Click event. You can change how the button raises the ButtonBase..::.Click event by changing the ClickMode property. The Button is a ContentControl.

The following illustration shows Button controls in default and disabled states.

Syntax
C#
[TemplateVisualStateAttribute(Name = "Unfocused", GroupName = "FocusStates")]
[TemplateVisualStateAttribute(Name = "MouseOver", GroupName = "CommonStates")]
[TemplateVisualStateAttribute(Name = "Normal", GroupName = "CommonStates")]
[TemplateVisualStateAttribute(Name = "Pressed", GroupName = "CommonStates")]
[TemplateVisualStateAttribute(Name = "Disabled", GroupName = "CommonStates")]
[TemplateVisualStateAttribute(Name = "Focused", GroupName = "FocusStates")]
public class Button : ButtonBase

Calendar control provides a graphical UI for the user to select a date. It displays dates one month at a time, and provides the ability to scroll from month to month or switch to a yearly view.

cal

Syntax
C#
[TemplatePartAttribute(Name = "Root", Type = typeof(Panel))]
[TemplatePartAttribute(Name = "CalendarItem", Type = typeof(CalendarItem))]
public class Calendar : Control

Canvas

Canvas control provides a surface to display child elements at specific coordinates in the canvas. A canvas can contain one or more UIElement objects. For more information, see Silverlight Layout System.

CheckBox control enables the user to select (check) or clear (uncheck) an option. The CheckBox can have three states: checked, unchecked, and indeterminate. Use a CheckBox to give the user an option, such as true/false or yes/no, or to select from a list of options. The CheckBox is a ContentControl.

The following illustration shows some check box controls in various states.

untitled
C#
[TemplateVisualStateAttribute(Name = "Unfocused", GroupName = "FocusStates")]
[TemplateVisualStateAttribute(Name = "Indeterminate", GroupName = "CheckStates")]
[TemplateVisualStateAttribute(Name = "Pressed", GroupName = "CommonStates")]
[TemplateVisualStateAttribute(Name = "Normal", GroupName = "CommonStates")]
[TemplateVisualStateAttribute(Name = "MouseOver", GroupName = "CommonStates")]
[TemplateVisualStateAttribute(Name = "Focused", GroupName = "FocusStates")]
[TemplateVisualStateAttribute(Name = "Unchecked", GroupName = "CheckStates")]
[TemplateVisualStateAttribute(Name = "Disabled", GroupName = "CommonStates")]
[TemplateVisualStateAttribute(Name = "Checked", GroupName = "CheckStates")]
public class CheckBox : ToggleButton

ContentControl represents a control with a single piece of content of any type. Many controls derive from ContentControl and can contain objects, such as a Button or a Panel.  You can customize the appearance of a ContentControl by applying custom templates.

DataGrid control provides a flexible way to display a collection of data in rows and columns. The built-in column types include a text box column, a check box column, and a template column for hosting custom content. The built-in row type includes a drop-down details section that you can use to display additional content under the cell values.

The DataGrid control supports common table formatting options, such as alternating row backgrounds and the ability to show or hide headers, gridlines, and scroll bars. Additionally, the control provides several style and template properties that you can use to change the appearance of the control and its rows, columns, cells, and headers.

DatePicker control enables a user to select a date by either typing it into a TextBox or by using a drop-down Calendar.

DatePicker shares many properties together with Calendar, so that you can control the range of displayable or selectable dates on a DatePicker and its drop-down Calendar at the same time. DatePicker also provides events for detecting the appearance or disappearance of the Calendar.

Grid

The Grid control provides a surface composed of rows and columns to display child elements. You define the rows and columns for a Grid, than assign objects to a specific row or column in the grid. You can optionally display gridlines. For more information, see Silverlight Layout System.

The following illustration shows a grid with two columns and two rows that contain colored squares. Gridlines are shown in this example.

untitled
Advertisements

Silverlight Layout Controls

Layout controls

Canvas control

Group several Silverlight controls into a single group of elements.

Properties

Canvas.Top

Canvas.Left

Canvas.ZIndex

For example,

<Canvas Height=“50” Width=“400” >

<TextBlock Text=“My Text”

Canvas.Top=“20”

Canvas.Left=“200” />

</Canvas>

Canvas.ZIndex

Set the front to back position of child controls in relationship to each other

For example,

In the following code, the first Image control appears on top of the second Image control.

<Canvas>
<Image Source=“iamge.jpg” Canvas.ZIndex=“1”
Height=“200” Width=“200”
Canvas.Top=“50” Canvas.Left=“50”/>
<Image Source=“iamge.jpg” Canvas.ZIndex=“0”
Height=“200” Width=“200”></Image>
</Canvas>

Nested Canvas Controls Implementing the Layout of Silverlight Controls

<Canvas x:Name=“LayoutRoot”Background=“White”>
<Canvas Height=“50” Width=“400”Background=“Black”>
<TextBlock Text=“My Log”Foreground=“White”Canvas.Left=“20”FontSize=“24” />
</Canvas>
<Canvas Canvas.Top=“50”Height=“250” Width=“400”Background=“#eeeeee”>
<TextBlock Text=“Add an Entry”Canvas.Top=“30” Canvas.Left=“50”/>
<TextBox Text=“Add an Entry”Height=“100” Width=“200”Canvas.Top=“70” Canvas.Left=“100”/>
<Button Content=“Enter”Height=“30” Width=“80”Canvas.Top=“200” Canvas.Left=“150”/>
</Canvas>
</Canvas>

Grid control

Using columns and rows

Example

<Grid Height=“400”, Width=“400”>
<Grid.RowDefinitions>
<RowDefinition Height=“50”/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=“100”/>
<ColumnDefinition Width=“10”/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>

Implementing a Grid to Set the Layout of Silverlight Controls

<Grid x:Name=”LayoutRoot”Background=”White”ShowGridLines=”True”>
<Grid.RowDefinitions>
<RowDefinition Height=”50″/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”150″/>
<ColumnDefinition Width=”10″/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Canvas Background=”Black”Grid.Column=”0″Grid.ColumnSpan=”3″>
<TextBlock Text=”Describe the Image”FontSize=”30″Margin=”50,5,0,0″Foreground=”White”/>
</Canvas>
<Image Source=”image.jpg” Grid.Row=”1″ Grid.Column=”0″ Height=”100″ Width=”150″ />
<Image Source=”image2.jpg” Grid.Row=”2″ Grid.Column=”0″ Height=”100″ Width=”150″ />
<TextBox BorderThickness=”2″ Grid.Row=”1″ Grid.Column=”2″ Height=”100″ Width=”200″ />
<TextBox BorderThickness=”2″ Grid.Row=”2″ Grid.Column=”2″ Height=”100″ Width=”200″ />
</Grid>

untitled

Using a TabControl control

The TabControl provides a means to implement several different layers of panels that can be accessed using tabs

Tabbed Panel Using the TabControl Control

<Grid x:Name=”LayoutRoot” Background=”White”>
<prim:TabPanel VerticalAlignment=”Center” HorizontalAlignment=”Center” Background=”LightGray”>
<ex:TabControl TabStripPlacement=”Left” Height=”200″ Width=”300″ >
<ex:TabItem Header=”Animal”>
<TextBlock Text=”American Bison” FontSize=”30″ HorizontalAlignment=”Center”/>
</ex:TabItem>
<ex:TabItem>
<ex:TabItem.Header>
<TextBlock FontSize=”15″ FontFamily=”Times New Roman” Text=”Location”/>
</ex:TabItem.Header>
<ex:TabItem.Content>
<TextBlock Text=”YellowStone National Park” HorizontalAlignment=”Center”/>
</ex:TabItem.Content>
</ex:TabItem>
<ex:TabItem>
<ex:TabItem.Header>
<Image Source=”image.jpg” Width=”50″ />
</ex:TabItem.Header>
<Image Source=”image.jpg” Width=”200″ />
</ex:TabItem>
</ex:TabControl>
</prim:TabPanel>
</Grid>

Using a StackPanel control

The StackPanel control is a container control that allows you to add child controls similar to the Canvas and Grid controls.

Typically, StackPanel controls are used to lay out a group of controls in a Grid or Canvas

<Canvas x:Name=”LayoutRoot” Background=”LightGray”>
<StackPanel Background=”White” Orientation=”Vertical” Canvas.Top=”50″ Canvas.Left=”50″ Height=”100″ Width=”100″>
<RadioButton Content=”Option A” HorizontalAlignment=”Center”/>
<RadioButton Content=”Option B” HorizontalAlignment=”Center”/>
<RadioButton Content=”Option C” HorizontalAlignment=”Center”/>
<RadioButton Content=”Option D” HorizontalAlignment=”Center”/>
</StackPanel>
</Canvas>

Using a Border control

The Border control is used to create some sort of spacing or border around other Silverlight controls. Border controls allow you to set options that place a border around an element that is defined as a child.

<Border BorderThickness=”5″ BorderBrush=”Blue” Height=”160″ Width=”120″>
<StackPanel>
<RadioButton Content=”Option 1″ Height=”50″ Width=”200″ Margin=”20,0,0,0″/>
<RadioButton Content=”Option 2″ Height=”50″ Width=”200″ Margin=”20,0,0,0″ />
<RadioButton Content=”Option 3″ Height=”50″ Width=”200″ Margin=”20,0,0,0″ />
</StackPanel>
</Border>