This article is Part 1 of the series on Microsoft Silverlight Exam.

Silverlight is a rapid-evolving technology. Over a time span of 3 years, it has evolved from being a JavaScript-based platform to a full .NET implementation. With 4 versions released and version 5 in the pipeline at the time of writing, Silverlight has more versions than .NET! That makes it hard for book writers such as me to keep up with new features being added.

It seems to me that it’s also difficult to create and manage exams about Silverlight. For the previous versions of Silverlight, there weren’t any exams available. Silverlight 4 is the first version of which an exam is being created. It was possible to take the beta-exam late 2010; the exam will be officially open in Q1 2011. More information about the exam can be found here: http://www.microsoft.com/learning/en/us/Exam.aspx?ID=70-506&Locale=en-us

With this guide, I aim to make the preparation for the exam a bit easier.

Goal and approach to getting ready

At this point, there’s no official courseware available to study for the exam. In any case, you should therefore be familiar already with Silverlight development. Reading some books on Silverlight will help as well. The list below contains some links to books available for Silverlight 4:

• Silverlight 4 Unleashed
• Silverlight 4 In Action
• Microsoft Silverlight 4 Data and Services Cookbook
• Pro Business Application with Silverlight 4

On top of that, reading articles and blog posts will help you in passing the exam. In this article series, I try to create an extensive list of links along with some explanation on the topic at hand that contain the information you need to know. To structure this, we’ll follow the list of topics described by Microsoft on the exam outline page (http://www.microsoft.com/learning/en/us/Exam.aspx?ID=70-506&Locale=en-us#tab2):

• Laying Out a User Interface (15%)  -> this part
• Enhancing the User Interface (14%)
• Implementing Application Logic (16%) 
• Working with Data (17%) 
• Interacting with a Host Platform (11%) 
• Structuring Applications (13%) 
• Deploying Applications (13%) 

(Small note: the outlined percentages total 99%, so you’ll probably get 1% for entering your name!)

In this first part we’ll look at “Laying Out a User Interface”.

Part 1: Laying Out a User Interface

Arrange content with panels

Layout is a very important aspect in Silverlight. Since Silverlight is an RIA, applications we build with it are intended to run on different screen resolutions. A well-built application should look fine on all these resolutions as well. Luckily, Silverlight has inherited layout panels from WPF, including the Canvas, the Grid and the StackPanel. Via the Silverlight Toolkit, other panels including the DockPanel and the WrapPanel were added. It’s my opinion that the Grid is the most used panel for (business) applications, as it can help lining out content, while a Canvas will be more used for example when creating a game with moving parts or a “hand-drawn” custom control such as a gauge control. The Canvas support z-indexing as well, allowing sending its children up or down in the stack.

When looking at the outline, the following articles are helpful:

• Layout in general:

Layout controls help building the user interface of Silverlight applications. The class hierarchy for the most important layout controls is as follows:

System.Object
--System.Windows.DependencyObject
----System.Windows.UIElement
------System.Windows.FrameworkElement
-------- System.Windows.Controls.Viewbox
--------System.Windows.Controls.Border
--------System.Windows.Controls.Panel
----------System.Windows.Controls.Grid
----------System.Windows.Controls.StackPanel
----------System.Windows.Controls.Canvas
--------System.Windows.Controls.Control
----------System.Windows.Controls.ContentControl
------------System.Windows.Controls.ScrollViewer

• http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-2-using-layout-management.aspx
• http://www.silverlight.net/learn/videos/all/silverlight-page-layout-part-1-xaml/
• Under the covers of the Silverlight layout system: http://10rem.net/blog/2010/03/26/book-excerpt-the-silverlight-layout-system
• The Grid:
  A Grid can be used to create a layout structure with rows and columns.
  • Grid at MSDN (contains list of all properties and methods): http://msdn.microsoft.com/en-us/library/system.windows.controls.grid(v=vs.95).aspx
  • http://www.silverlightshow.net/items/Using-Silverlight-Grid-Control.aspx
  • http://www.silverlightshow.net/items/Using-the-Grid-control-in-Silverlight-2-Beta-1.aspx
  • http://www.silverlight.net/learn/videos/all/using-silverlight-grids-and-stack-panels/ (also usable for learning about the StackPanel)
  • http://www.a2zdotnet.com/View.aspx?id=115
• The StackPanel:
  A StackPanel can be used to place one or more of its children in a vertical (default) or horizontal layout.
  • StackPanel at MSDN (contains list of all properties and methods): http://msdn.microsoft.com/en-us/library/system.windows.controls.stackpanel(v=VS.95).aspx
  • http://www.silverlightshow.net/items/Using-the-StackPanel-control-in-Silverlight-2-Beta-1.aspx
  • http://www.dotnetfunda.com/articles/article876-using-silverlight-stackpanel-layout-control-.aspx
  • http://www.a2zdotnet.com/View.aspx?Id=116
• The Canvas
  A Canvas allows us to position items explicitly using a coordinate value. We can compare the Canvas with a Windows Forms on which we drop control and they get an absolute position.
  • Canvas at MSDN (contains list of all properties and methods): http://msdn.microsoft.com/en-us/library/system.windows.controls.canvas(v=vs.95).aspx
  • http://www.silverlightshow.net/items/Using-the-Canvas-control-in-Silverlight-2-Beta-1.aspx
  • http://www.a2zdotnet.com/View.aspx?id=117
  • http://www.silverlight.net/learn/videos/all/using-the-silverlight-canvas/ (video)
  • http://www.c-sharpcorner.com/UploadFile/anavijai/4439/Default.aspx
  • Canvas Z-index: http://www.vectorlight.net/silverlight/tutorials/rendering_order_using_z-index.aspx
• The Border:
  A Border can be used to draw a border around a control and a background color can be applied on it.
  • Border at MSDN (contains list of all properties and methods): http://msdn.microsoft.com/en-us/library/system.windows.controls.border(v=vs.95).aspx
  • http://www.silverlightshow.net/items/Using-the-Border-control-in-Silverlight-2-Beta-1-.aspx
  • http://www.c-sharpcorner.com/UploadFile/raj1979/SilverlightBorder10162008030241AM/SilverlightBorder.aspx
• The ScrollViewer:
  A ScrollViewer can be used to scroll through content larger than the actual area.
  • ScollViewer at MSDN (contains list of all properties and methods): http://msdn.microsoft.com/en-us/library/system.windows.controls.scrollviewer(v=vs.95).aspx
  • http://www.silverlightshow.net/tips/How-to-make-a-control-scroll-its-content.aspx
  • http://www.c-sharpcorner.com/UploadFile/mamta_m/307312009072507AM/3.aspx
  • http://csharperimage.jeremylikness.com/2010/05/making-scrollviewer-talk-in-silverlight.html
• The ViewBox:
  A ViewBox can be used to stretch a child to fill the available space.
  • ViewBox at MSDN (contains list of all properties and methods): http://msdn.microsoft.com/en-us/library/system.windows.controls.viewbox(v=vs.95).aspx
  • http://www.silverlightshow.net/news/How-to-center-and-scale-Silverlight-applications-using-ViewBox-control-.aspx
  • http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2009/11/18/silverlight-4-rough-notes-viewbox.aspx
  • http://www.bluerosegames.com/SilverlightBrassTacks/post/Viewbox-in-the-Silverlight-Toolkit.aspx
  • http://www.c-sharpcorner.com/UploadFile/mahesh/ViewBox03152009221804PM/ViewBox.aspx
• Other related topics:
  • Controlling the Visibility: http://msdn.microsoft.com/en-us/library/system.windows.uielement.visibility(v=vs.95).aspx
  • Controlling the Z-Index: http://stackoverflow.com/questions/1802108/how-can-we-change-zindex-of-a-silverlight-control-programmatically
  • Star-sizing: http://www.byteblocks.com/post/2010/04/27/Silverlight-Grid-Layout.aspx
  • Positioning overview: http://msdn.microsoft.com/en-us/library/cc189087(v=vs.95).aspx

Implement and configure core controls

Silverlight has an extensive list of controls that gets bigger with every release until now (Silverlight 1.0 had no controls!). Most controls are living in the assemblies that are installed by default with the plugin (sometimes referred to as core controls). Others such as the DataGrid and the Calendar control are part of a separate assembly that gets added to your project (and XAP file) only when used. The main goal of this process is keeping the initial plug-in download size as small as possible. When such a control gets added to the page, we need to reference the namespace as well. If we do this using the designer in Visual Studio, this is done automatically for us.

Let’s look at the most common controls:

• The TextBox (inherits from System.Windows.Controls.Control):
  A TextBox can be used to enter text by the user. It can display single-format, multi-line text.
  • TextBox at MSDN (contains list of all properties and methods): http://msdn.microsoft.com/en-us/library/system.windows.controls.textbox(v=vs.95).aspx
  • http://www.c-sharpcorner.com/UploadFile/mahesh/SilverlightTextBox12252008202141PM/SilverlightTextBox.aspx
• The Button:
  Represents well yeah, a Button!
  • Button at MSDN (contains list of all properties and methods): http://msdn.microsoft.com/en-us/library/system.windows.controls.button(v=vs.95).aspx
  • In this article, you can find more about other types of Buttons, including the HyperLinkButton and ToggleButton: http://www.silverlightshow.net/items/Button-Controls-in-Silverlight-2-Beta-1.aspx
• The TextBlock:
  A TextBlock can be used to display small amounts of text.
  • TextBlock at MSDN (contains list of all properties and methods): http://msdn.microsoft.com/en-us/library/system.windows.controls.textblock(v=vs.95).aspx
  • http://blogs.silverlight.net/blogs/msnow/archive/2008/09/24/silverlight-tip-of-the-day-45-text-formatting-with-the-textblock-control.aspx
  • http://www.silverlightshow.net/news/TextTrimming-TextBlock-for-Silverlight-.aspx
  • http://www.c-sharpcorner.com/UploadFile/mahesh/SilverlightTextBlock12282008230604PM/SilverlightTextBlock.aspx
  • http://www.dotnetfunda.com/tutorials/silverlight/text.aspx
• The CheckBox:
  A CheckBox can be used to select or unselect an item.
  • CheckBox at MSDN (contains list of all properties and methods): http://msdn.microsoft.com/en-us/library/system.windows.controls.checkbox(v=vs.95).aspx
  • http://www.c-sharpcorner.com/UploadFile/mahesh/SilverlightCheckBox11282008214151PM/SilverlightCheckBox.aspx
  • http://www.vectorlight.net/silverlight/controls/checkbox.aspx
• Content controls:
  A content control is a control that can contain any arbitrary content, such as another control. The ContentControl class is a base class that represents a control that can contain just one child. If more children are required, a container can be used a direct child.
  • ContentControl class at MSDN: http://msdn.microsoft.com/en-us/library/system.windows.controls.contentcontrol(v=vs.95).aspx
  • http://www.silverlightshow.net/items/Tip-of-the-Day-Content-It-Ain-t-Just-Text.aspx
  • http://blogs.msdn.com/b/knowledgecast/archive/2008/07/14/writing-a-silverlight-content-control.aspx
  • http://channel9.msdn.com/Blogs/mtaulty/Silverlight-Content-Controls
• Referencing namespaces
  When using controls that are is a namespace other than the default namespace (perhaps is a different assembly), namespaces need to be used inside XAML . Using these namespace, we can use 2 classes with the same name: assume we built our own Button class in some namespace, we can use both our own Button and the default Button. Using a namespace a a prefix for that namespace, we know which class we meant to use.
  • http://msdn.microsoft.com/en-us/library/cc189061(v=vs.95).aspx
  • http://www.silverlightshow.net/news/A-guide-to-cleaner-XAML-with-custom-namespaces-and-prefixes-WPF-Silverlight-.aspx

Create user controls

Creating our own controls in Silverlight is simpler than in other technologies. On top of that, there are several ways of doing so. The first and probably the easiest way is a user control. Such a control is nothing more than a combination of some existing controls. This can then be reused throughout our application. We can define dependency properties on a user control, so it can be used in combination with data binding and styling.

We can also define custom controls, where we override the control template. In such a case, we can use the Visual State Manager and the Parts and State Model. In this case, we define how the control should look in specific states. We’ll cover the VSM in part 2 of this series in more depth.

Take a look at the following articles to get understanding of user controls:

• UserControl:
  • UserControl class at MSDN: http://msdn.microsoft.com/en-us/library/system.windows.controls.usercontrol(v=vs.95).aspx
  • http://www.silverlightshow.net/items/Tutorial-Create-a-Silverlight-2-User-Control-from-a-Popup-Control.aspx
  • http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-6-using-user-controls-to-implement-master-detail-scenarios.aspx
  • http://www.silverlightshow.net/items/Silverlight-2-Custom-Controls-vs.-User-Controls.aspx
  • http://www.silverlightshow.net/items/Creating-a-Skinnable-Custom-Control-in-Silverlight-3-Part-I.aspx
  • http://www.insidercoding.com/post/2008/07/14/Tutorial-Creating-a-User-Control-in-Silverlight-20.aspx
• Control parts:
  • http://www.silverlightshow.net/items/Creating-a-Silverlight-Custom-Control-The-Basics.aspx
  • http://blogs.msdn.com/b/sburke/archive/2008/03/22/tutorial-writing-a-templated-silverlight-2-control.aspx
  • http://www.jeff.wilcox.name/2010/04/template-part-tips/
  • http://marktinderholt.wordpress.com/2008/05/03/creating-a-custom-silverlight-control-the-dropdownlist/

Implement a navigation framework

Silverlight 2 didn’t have real navigation built-in. It was only with Silverlight 3 that the Navigation Framework made its appearance into Silverlight. This is based on the concept of a frame that shows pages and takes care of navigating from page to page: it will load a different page into the frame. Navigation can be triggered from XAML or from code. The latter is done using the NavigationService, which exposes a Navigate method that we can use to navigate to another page. In Silverlight 4, an extension point has been added in the form of the INavigationContentLoader.

To learn more about navigation in Silverlight, take a look at the following links:

• In this webinar, Gill Cleeren talks about navigation in Silverlight: http://www.silverlightshow.net/news/Webinar-Build-Silverlight-Application.aspx
• http://www.silverlightshow.net/items/The-Silverlight-3-Navigation-Framework.aspx
• http://www.silverlightshow.net/news/What-s-New-In-Silverlight-3-Navigation-.aspx
• http://www.silverlightshow.net/news/What-s-new-in-Silverlight-3.0-Navigation-Framework.aspx
• http://www.silverlight.net/learn/videos/all/navigation-framework/
• http://www.silverlightshow.net/news/More-on-Silverlight-3-s-Navigation-Framework-.aspx
• http://www.silverlightshow.net/news/Silverlight-4-s-New-INavigationContentLoader-Interface-.aspx
• http://www.silverlightshow.net/news/View-Based-Navigation-in-Silverlight-3-.aspx
• Page methods: http://msdn.microsoft.com/en-us/library/ms611629(v=VS.95).aspx (includes OnNavigatedFrom, OnNavigatedTo…)
• http://www.silverlightshow.net/news/Deep-Linking-and-Browser-History-Navigation-in-Silverlight.aspx
• http://www.vsj.co.uk/articles/display.asp?id=790
• http://timheuer.com/blog/archive/2009/03/22/silverlight-navigation-framework-and-uri-routing.aspx

Display collections of items

Controls that display collections of items are indispensable. Silverlight includes the ComboBox, the ListBox, the TabControl and probably the most important one, the DataGrid. The latter can be used to display an Excel-like representation of data. The ItemsControl is a generic control for displaying lists of data. It can be compared to the ASP.NET repeater in some way. In many cases, these controls are templated. Using an item template, we can override how each individual item will be displayed.

The following links will help you understand these controls.

• The ItemsControl
  This control can be used to display a list of items.
  • ItemsControl at MSDN: http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol(VS.95).aspx
  • Templating the ItemsControl: http://weblogs.asp.net/dwahlin/archive/2008/04/03/using-silverlight-2-itemscontrol-templates.aspx
• The ListBox
  The ListBox is used to display a scrollable list of items.
  • ListBox at MSDN: http://msdn.microsoft.com/en-us/library/system.windows.controls.listbox(v=vs.95).aspx
  • http://weblogs.asp.net/scottgu/pages/silverlight-tutorial-part-5-using-the-listbox-and-databinding-to-display-list-data.aspx
  • http://www.vectorlight.net/silverlight/controls/listbox.aspx
  • http://www.c-sharpcorner.com/UploadFile/mahesh/SilverlightListBox07212008115956AM/SilverlightListBox.aspx
  • http://johnpapa.net/silverlight/customize-a-listbox-template-with-silverlight/
• The ComboBox
  The ComboBox control displays a dropdown with items in which the user can make a selection.
  • ComboBox at MSDN: http://msdn.microsoft.com/en-us/library/system.windows.controls.combobox(v=vs.95).aspx
  • http://johnpapa.net/silverlight/binding-to-silverlight-combobox-and-using-selectedvalue-selectedvaluepath-and-displaymemberpath/
• The TreeView:
  The TreeView class shows a mostly hierarchical view of items.
  • TreeView at MSDN: http://msdn.microsoft.com/en-us/library/system.windows.controls.treeview(v=vs.95).aspx
  • http://www.silverlightshow.net/items/Using-the-TreeView-control-in-Silverlight-2.aspx
  •  http://www.silverlightshow.net/items/Silverlight-Tree-View-Control.aspx
  •  http://blogs.silverlight.net/blogs/justinangel/archive/2009/05/19/silverlight-treeview-advanced-scenarios-treeviewextended.aspx
  • http://www.vectorlight.net/silverlight/demos/treeview.aspx
• The DataGrid:
  The DataGrid can be used to show items in a table-like format. The DataGrid was enhanced in Silverlight 4: new sizing features were added.
  • DataGrid at MSDN: http://msdn.microsoft.com/en-us/library/system.windows.controls.datagrid(v=vs.95).aspx
  • http://blogs.msdn.com/b/scmorris/archive/2008/03/21/using-the-silverlight-datagrid.aspx
  • http://www.c-sharpcorner.com/UploadFile/mahesh/SLDataGrid05032009223331PM/SLDataGrid.aspx
  • http://www.silverlightshow.net/news/Grouping-in-Silverlight-3-DataGrid-.aspx
  • http://www.silverlightshow.net/items/Defining-Columns-for-a-Silverlight-DataGrid.aspx
  • http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2009/11/18/silverlight-4-rough-notes-data-grid-enhancements.aspx
  • http://www.dotnetspider.com/resources/32211-Conditional-formatting-Datagrid.aspx
  • http://weblogs.asp.net/brijmohan/archive/2010/05/14/working-with-silverlight-datagrid-rowdetailstemplate.aspx

Play media files

Silverlight can since its first appearance play media (audio and video) very well. It includes support for HD content and supports DRM (which is good news for media companies, but less good news for all the rest of us!). The following links can help you understanding the media capabilities of Silverlight:

• The MediaElement: http://www.c-sharpcorner.com/UploadFile/mamta_m/111292008005520AM/1.aspx
• DRM in Silverlight: http://msdn.microsoft.com/en-us/library/cc838192(v=vs.95).aspx
• Streaming content: http://www.learn-silverlight-tutorial.com/StreamingMediaUsingSilverlight.cfm
• Playing multiple audio tracks: http://10rem.net/blog/2009/07/19/silverlight-synthesizer-source-code-–-mediastreamsource-raw-sound
• Timeline marker events: http://openlightgroup.net/Blog/tabid/58/EntryId/65/Closed-Captioning-with-Silverlight-using-MVVM.aspx
• Playback events: http://msdn.microsoft.com/en-us/library/system.windows.controls.mediaelement_events(v=vs.95).aspx

Conclusion

After this long list of links, I hope you have a now deeper understanding of the topics we looked at. You should now have a solid foundation to build on!

Stay tuned for part 2 where we’ll look at preparing for the Enhancing the User Interface part of the exam!