Search

Introduction

The Button is a Silverlight control which responds when the user clicks on it.

See also:
Button Controls Article
HyperlinkButton Article
ToggleButton Article
RepeatButton Article

Overview

Since the Button derives directly from the ButtonBase class and there isn’t an additional functionality, I’ll use the examples from the Button Controls Article.

The most important event of the Button, inherited from ButtonBase class is the Click event. It occurs when a user clicks on the button. For example:

XAML:

Introduction

Button controls are Silverlight controls which in the common scenario respond in some way to the user who is clicking on them. There are a lot of button controls: Button, HyperlinkButton, RepeatButton, ToggleButton, CheckBox, RadioButton.

See also:
Button Article
HyperlinkButton Article
ToggleButton Article
RepeatButton Article

Overview

Four button controls derive from the base ButtonBase class: Button, HyperlinkButton, RepeatButton, and ToggleButton. The ToggleButton is a base class for the CheckBox and RadioButton controls but it can also be used as a standalone control. There are two descendants of the Button class named CalendarButton and CalendarDayButton.

The most important member of the ButtonBase class is the Click event. It occurs when a user clicks on the button control. For example:

XAML:

As its name says the Border is a Silverlight control that acts as a border. You can put ONE other control in it and it will act as border of the child control.

See also:
Silverlight Layout controls
Canvas Article
StackPanel Article
Grid Article

Overview

The following examples demonstrate Border’s key properties:

We want to have the following frame:

Here is the XAML code:

Introduction

The Grid is a layout control used as a container for other Silverlight controls. It acts like a table in HTML but there are many differences in the markup representation.

See also:
Silverlight Layout controls
Canvas Article
StackPanel Article
GridSplitter Article

Overview

The following example demonstrates how to use a Grid and how to create rows and columns:

We want to have the following table structure:

The most important thing about the Grid is how to define its RowDefinitions and ColumnDefinitions collections and how to specify to which row and column every control in the Grid belongs.

Here is the XAML code:

Introduction

To use the GridSplitter you should be familiar with the Grid control. It is a control that allows the user to resize dynamically the width or height of the Grid cells.

See also:
Grid Article

Overview

The following example demonstrates how to use the GridSplitter:

We want to have two cells whose width can be redistributed. The blue line can be moved left or right when clicking on it, holding the mouse button and dragging. Thus the neighbor cells can be resized.

The XAML code:

In response to Joe’s comment on the Canvas article about how the Canvas control deals with the Measure/Arrange process when it is laid out by a parent Panel:

It seems that during Measure/Arrange process the child Canvas will take zero width and height provided these properties are not set, even if it contains some controls. Here is a little example:

XAML:

We don’t see the Blue background of the inner Canvas because its size is zero.

Introduction

The Canvas is the simplest layout control used as a container for other Silverlight controls. The inner controls are positioned absolutely towards its left and top sides.

See also:
Silverlight Layout controls
Grid Article
StackPanel Article

Overview

The following example demonstrates the use of the Canvas:

We want to have a rectangle positioned 100 pixels from the left side and 50 pixels from the top side:

The child controls of the Canvas are positioned absolutely towards its left and top sides by their “Canvas.Left” and “Canvas.Top” attached properties.

Here is the XAML code:

Introduction

Layout controls are Silverlight controls which act as containers of other controls. Their main purpose is the positioning and arranging of their child controls. There are several layout controls: Canvas, StackPanel and Grid and TabPanel.

See also:
Canvas Article
StackPanel Article
Grid Article

Overview

All layout controls derive from the basic abstract class Panel.

There are also four more descendants of the Panel Class: DataGridCellsPresenter, DataGridColumnHeadersPresenter, DataGridDetailsPresenter, DataGridRowsPresenter. Their purpose is the positioning of elements in a DataGrid template. They are not standalone controls.

Layout controls inherit the Children collection of type UIElementCollection. Since all elements in this collection are UIElement objects and the Panel itself derives from UIElement layout controls can be nested in one another without limitation.

The following example demonstrates the nesting:

Note: to understand this example you should be familiar with all layout controls: Canvas, StackPanel and Grid

We want to have the following meaningless result (I don’t like giving real world examples, I just want to show you how nesting of layout controls works.):