First Look: Silverlight 2.0 UI Controls
page 6 of 9
by Todd Anglin
Average Rating: 
Views (Total / Last 10 Days): 41441/ 80

Advanced Controls

So far we've seen a lot of "basic" controls built-in to Silverlight's UI control toolbox. Buttons, textboxes, hyperlinks, images, and the like are all relatively basic controls that form the foundation of any application UI. What we haven't seen are more advanced or complex controls like a treeview, tabstrip, panelbar, scheduler, or the ever popular carousel. As of Silverlight 2 beta 1, these controls simply aren't present and time will reveal which get included by Microsoft and which will depend on the 3rd party UI market to supply. For now, the only complex control in Silverlight is the DataGrid, so let's take a look at how it works.


DataGrids are fundamental UI controls for almost all line of business (LOB) applications. They radically simplify the task of displaying structured data to users by automatically handling the rendering of rows, columns, headers, and data navigation. Silverlight's data grid is no exception. While it is far from being a complete or "advanced" grid control by today's WinForms and ASP.NET standards, it does provide basic grid functionality.

To use the DataGrid control, you must simply bind the Grid to a list of items (that implement IEnumerable) via the ItemSource property. In the simplest approach, the Grid will automatically generate columns based on the data you supply and even render "special" column types- like checkbox columns- based on your data types. You can, of course, take more control and manually define the columns that will be rendered in your grid by setting the AutoGenerateColumns property to false.

Listing 24 shows a simple Silverlight DataGrid that is bound to data supplied by a WCF web service. The Grid is bound in the XAML page's code-behind by simply supplying the list of items returned by the WCF web service to the Grid's ItemSource property. Things to notice in listing 24 are the checkbox column automatically generated for Boolean data and that the Grid has the built-in ability to allow users to resize columns.

Listing 24 - Silverlight DataGrid


<my:DataGrid x:Name="dataGrid1" AutoGenerateColumns="true">


void proxy_GetPeopleCompleted(object sender, 
  SilverlightControls.TestServiceReference.GetPeopleCompletedEventArgs e)
    this.dataGrid1.ItemsSource = e.Result;

Unlike all of the other UI controls you've seen so far, the DataGrid UI tag is prefixed by the odd "my" name. That's because the DataGrid does not exist in the default Silverlight namespace. You need to add the namespace in Listing 25 to your XAML document in order to use the Silverlight DataGrid control. The "standard" name you'll find assigned to this namespace in most Silverlight demos is "my," but you could name this namespace whatever you like (producing <whateveryoulike:DataGrid …).

Listing 25 - DataGrid namespace


The DataGrid already exposes a number of properties that enable you to customize its appearance and behavior. Among the most significant are AlternatingRowBackground, CanUserResizeColumns, GridlinesVisibility, HeaderVisibility, RowBackground, and SelectionMode. That last property, SelectionMode, allows you to control how rows can be selected. Setting the value to SingleFullRow will only allow one row to be selected at a time; setting it to ExtendedFullRow allows users to select multiple rows by using the shift and control keys.

DataGrid Shortcomings

While the DataGrid in Sivlerligth 2 beta 1 is a great addition to the framework, it is still a far, far cry from providing the level of functionality we as developers have come to expect from datagrid controls. For example, the current DataGrid provides no out of the box support for sorting, grouping, filtering, or hierarchal data display. Paging isn't even a supported concept as all data is currently rendered and then scrolled (as is usually done in WinForms). Since Silverlight is going to attract web developers, I expect many will view this approach to paging as a shortcoming, too.

Data editing is another soft spot. The Grid does support basic inline editing, but advanced modes like form editing and pop-up window data editing are absent. For Windows developers, this probably isn't a problem; for web developers, this is another road block. That is a repeating theme in Silverlight that could pose problems for both Microsoft and UI component vendors that build for Silverlight. What type of developer do you try to please: traditional web developers migrating towards richer web experiences or traditional WinForms developers trying to build apps that can be distributed via the browser? Each group has vastly different expectations of how UI controls should behave, so it will be interesting to see which UI concepts win-out in Silverlight. 

View Entire Article

User Comments

Title: how to embbed images in canvas ?   
Name: andrew
Date: 2008-10-11 12:39:36 PM
Is there a way to put images in canvas based on logic ?

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-02-29 12:33:53 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search