This introduction to Silverlight Controls is the topic of the second week of a Silverlight class that John Stockton and I are beginning at Ascentium.  Last week we gave a more high-level review of the Silverlight plug-in and an intro to XAML.  The summary of last week's class can be found on John's blog: http://riathoughts.com/blog/silverlight/silverlight-training-week-1-ndash-introduction-to-silverlight/.

Overview

Silverlight Controls are the basic pieces needed to build your user experience (UX).  They are layout, graphics, shapes, text, media, and user inputs.  You can define a control's appearance through parameters, styles, and templates.  For this week, we only wanted to cover inline styles as parameters.

Layout Controls

Primary Layout Controls

The Grid, Canvas, and StackPanel layout controls provide the three main methods for laying out controls.

• Grid - the default layout control in Blend, the Grid allows you to layout controls by setting the child object's HorizontalAlignment and VerticalAlignment properties.  A child object that doesn't contain alignment nor width/height properties will expand to the size of it's parent Grid.
• Canvas - provides absolute positioning through a child object's Canvas.Left and Canvas.Top properties.
• StackPanel - easily stacks controls in a vertical or horizontal fashion based on the Orientation property.

Other Layout Controls

The following layout controls don't allow multiple child elements, but assist in very common layout scenarios.  Often when using a Border or ScrollViewer, you'll want it's single child element to be one of the three primary layout controls.

• Border - allows different border widths for each side and different radiuses for each corner.
• ScrollViewer - in addition to the single content child object, the ScrollViewer contains horizontal and vertical scrollbars.  This scenario is similar to CSS's overflow:scroll, except the scrollbars can be styled.

Graphical Controls

Basic Shapes

• Rectangle
• Ellipse
• Line

If you are using Blend, you won't come across the Line very often.  In fact, using the Line tool in Blend will create a Path object (discussed below).

Media Controls

• MediaElement - used for playing audio/video
• Image

The Media controls Stretch parameter allows you to change how the media fits within the dimensions of the media control.

Advanced Shapes

• Polyline - creates a line from a string of x,y points provided in the Points parameter.
• Polygon - same as Polyline, except you can set the Fill property.
• Path - one of the more common controls when creating designs, the Path uses a string Data parameter that defines lines, bezier curves, and tells the path how to fill itself.  For the most part, you won't be editing the Data string, but instead will have it generated by drawing Paths in Blend.

Input Controls

Silverlight 2 was packaged with several user input controls that any .net developer should be familiar with:

• TextBox
• Button
• HyperlinkButton
• CheckBox
• ComboBox
• ListBox
• RadioButton
• Scrollbar
• Slider

The big advantage over HTML controls, is that all of these input controls can be customized through styles and templates. 

Next week we'll be going over styling and hopefully will dive into some templates as well.  This customization allows us to build very rich and powerful user experiences previously unavailable with HTML controls.