Custom Sort Icons with Silverlight 2’s DataGrid Control

While looking through the control templates for Silverlight 2's DataGrid, I noticed the DataGridColumnHeader defines a couple of StoryBoards that allow you to control how the headers are displayed as they pass through the three column states: {Sorted Ascending, Sorted Descending, Unsorted}. And without too much work you can override the default display and customize it to your liking. I took a crack at overriding these states to mimic the icons the awesome jquery tablesorter plugin uses - below is a sample table that shows how it turned out. Read on for the details (there really aren't too many) and don't forget to check out the live demo and download.

Live Demo | Download

Default Sort Indicator

If you look at the default template for the DataGridColumnHeader you will see the control uses a Path shape (named SortIconElement) to describe the sorting icon (the value of the Data attribute is describing a basic triangle). The initial value of the Path's Opacity property is set to zero, making it invisible. So the bit of xaml below is telling the control to include a completely transparent triangle in the column header. Which probably doesn't seem very useful, but because we can change this shapes attributes using the DataGridColumnHeader's StoryBoard's we can manipulate it so it displays the sorting indicator.

Sorting State Transitions

As the column passes from the state to state (SortedAscending to SortedDescencing, SortAscending to Unsorted, etc...), we get the opportunity to let Silverlight's runtime know that we want to change some of the Path's attribute values. Using this hook we can hide or show the triangle and reposition it - exactly what needs to be done to let the user know how the column values are sorted. Below is a brief description of how the column headers default template handles these state transitions.

Unsorted State

When the header is in the unsorted state, we want to make sure the Path shape is completely transparent. So the default template defines a StoryBoard that animates the Path's Opacity property from its current value to zero - causing the icon to disappear.

SortedAscending State

When the header enters the SortedAscending State we want to make the triangle visible and make sure it is pointing upwards. To accomplish this the default template defines animates that move the values of the Path's Opacity property to 1 (making it visible) and positions the triangle so it is pointing upwards by animating the SortIconTransform's ScaleY property to a negative 1.

SortedDescending State

When the header enters the SortedDescending State we want to make we show the triangle pointing down. To accomplish this the default template defines animates that move the values of the Path's Opacity property to 1 (making it visible) and flips it over positions the triangle so it is pointing down by animating the SortIconTransform's ScaleY property to a 1.

Custom Sort Icon

My custom sorting icon also makes use of triangles, but I ...

• Want 2 of them
• Want them to always be visible
• Want them to fade ever so slightly as the header makes the state transitions

So I include 2 Path shapes (SortAscIconElement and SortDescIconElement) in the template as follows. When I define my state transitions I will include animations that modify the Opacity of these two shapes.

Custom Sort State Transitions

Next, I redefined the sorting state transitions to use my new shapes.

Unsorted State

When the header is in the unsorted state, we want to make sure the both Path shapes are partially transparent. So the default template defines a StoryBoard that animates the Opacity of both triangles to 0.2. I also chose to have these animates run for a seventh of a second so the transitions between states appears to fade.

SortedAscending State

When the header enters the SortedAscending State we want to make the top triangle completely visible. To accomplish this I move the the value of the Path's Opacity property to 1 (making it visible).

SortedDescending State

When the header enters the SortedDescending State we want to make the bottom triangle completely visible. To accomplish this the template animates that the value of the Path's Opacity property to 1 (making it visible).

Conclusion

And finally I think it is worth pointing out that none of the customizations I made required making a code change to the DataGrid control - I didn't have to inherit from it or handle any special events in the page's codebehind. Instead I just used the controls template to define what I want the sort icon to look like and what properties need to be changed when as the control passes through the pre-defined states.

That's it. Enjoy!

Introduction to Layout Controls in Silverlight 2

Arranging controls on a user interface in a flexible manner is key to building successful applications. Silverlight 2 provides three main controls that can be used for layout management:

· Canvas Control

· StackPanel Control

· Grid Control

In this post I'll provide an introductory look at these controls and show how they can be defined in XAML. Future articles will use the layout controls to arrange controls that are capable of displaying data retrieved from remote sources. Let's start out by examining the Canvas control.

The Canvas Control

HTML developers use various types of container tags to group related content in a Web page. The div element is especially popular now days since it can be combined with CSS to provide a flexible layout for Web pages without requiring tables. Although Silverlight 2 doesn't support the div element, it does provide a Canvas element that can be used to group related content. The Canvas element acts like the div element in many regards and can have children nested inside of it. It's typically used when children need to be positioned at exact x and y coordinates.

The Canvas object derives from a base class called Panel and exposes several properties such as Name, Background, Cursor, Height, Width, HorizontalAlignment, VerticalAlignment, Opacity, OpacityMask, RenderTransform and Visibility (to name a few). Children can be positioned within a Canvas by using attached properties such as Canvas.Left, Canvas.Top and Canvas.ZIndex. An example of using a Canvas to arrange two TextBlock controls and a Rectangle is shown next:

The Canvas object shown here is positioned to the top left of its parent container, is 200 X 600 pixels in size, has a LightGray background and a margin of 20 pixels applied uniformly to its left, top, right and bottom margins. The children within the Canvas are positioned using the Canvas.Top and Canvas.Left attached properties. Because Rectangle is defined after the first TextBlock it would normally be positioned above the text. By using the Canvas.ZIndex attached property, however, you can change how items are arranged and place objects above or below other items quite easily. By moving the Rectangle before the TextBlock in the XAML code the Canvas.ZIndex property could be removed though.

Figure 1 shows how the Canvas and its child objects render at runtime in a Silverlight application.

Figure 1

Multiple Canvas objects can be defined in a XAML file just like multiple div tags can be placed in a HTML file. The XAML code that follows shows how multiple Canvas objects can be used as place holders for controls that are created during runtime:

Figure 2 shows how the Canvas objects and associated child objects are rendered at runtime.

Figure 2

The StackPanel Control

The Canvas control can be used when child objects need to be absolutely positioned. While absolute positioning may be useful in some Silverlight 2 applications, others can benefit from having controls that are dynamically laid out based upon the size of the Silverlight interface. By using dynamic control layout you allow users to switch to full-screen mode without writing a lot of code to adjust control coordinates. Silverlight 2 provides the StackPanel control that can be used to stack objects horizontally or vertically and provide more flexible layouts. By using the StackPanel you can arrange controls on an interface without defining absolute positions for each control.

The StackPanel control acts much like the ASP.NET DataList control. Data can be displayed horizontally or vertically by assigning a value to the DataList control's RepeatDirection property. RepeatDirection accepts one of two enumeration values including Horizontal and Vertical. The StackPanel control provides an Orientation property that is used to determine how to layout controls on an interface (the default layout is vertical). Like the DataList control's RepeatDirection property, the Orientation property also accepts Horizontal and Vertical values

Although StackPanel and DataList are similar in some ways, they differ in the way data is wrapped when child controls exceed the size of the parent container. The DataList control provides a RepeatColumns property that determines how many columns are displayed before creating a new row. The StackPanel doesn't provide that functionality unfortunately. As a result, child controls that exceed the bounds of the StackPanel will not display properly on the user interface.

WPF provides a WrapPanel control that handles wrapping child controls when they exceed the size of the parent container. Silverlight doesn't provide a built-in WrapPanel control, however, several WrapPanel controls have been created by members of the Silverlight community that can be found using your favorite search engine.

The code that follows shows how to arrange two TextBlock controls horizontally by setting the StackPanel control's Orientation property to Horizontal.

Controls can also be arranged vertically by changing the Orientation property to a value of Vertical:

Figure 3 shows the result of the horizontal orientation while Figure 4 shows the result of the vertical orientation. Both figures demonstrate how a StackPanel control automatically fills the width of its parent container. This default behavior can be changed by assigning a value to the control's Width property.

Figure 3

Figure 4

The Grid Control

Web designers have been accustomed to arranging data and controls in tables for years. Although there's been a general shift to CSS and div tags for page layout, table tags are still quite popular. If you're coming from a Web development background you'll find Silverlight's Grid control easy to use and quick to comprehend since it's similar to what you've already been using. It acts much like HTML's table tag and allows data and controls to be arranged in a tabular-style view.

The Grid control allows rows and columns to be defined much more concisely compared to HTML. With the HTML table tag you're forced to repeat multiple tr and td tags to create rows and columns. The Grid control allows rows and column information to be defined in one location using RowDefinition and ColumnDefinition tags. An example of XAML code that creates a simple Grid with 2 rows and 2 columns is shown next:

This example sets the Grid's ShowGridLines attribute to True which is nice for seeing the initial layout of a Grid control. Figure 5 shows how the Grid looks in Visual Studio 2008 when ShowGridLines is set to True.

Figure 5

The XAML code also sets the first row's height to 100 pixels and the second row's height to the remaining space available in the user interface When you use the * character to define a row height you're essentially telling the Grid to assign the row 100% of the remaining space. You could also omit the Height attribute entirely in this case and achieve the same affect. In addition to the row definitions, the two columns defined have widths of 25% and 75% respectively.

It's important to note that the ColumnDefinition tag's Width attribute and RowDefinition tag's Height attribute do not accept the typical values assigned to HTML tr and td tags. For example, assigning the Width attribute a value of 25% will result in an error. If you've spent a lot of time creating Web pages you may struggle with this initially (I know I did!) since using the % character is so common in HTML and CSS. In Silverlight, percentage based widths are assigned by defining a decimal value between 0 and 1 followed by the * character. However, you can also assign whole numbers such as 1* and 9* for 10% and 90% respectively. In addition to numeric values, the Height and Width attributes also accept a value of Auto which causes the appropriate row or column to automatically figure out its size based on available space.

Once rows and columns are defined, controls can be placed inside of a Grid using Grid.Row and Grid.Column attributes. The following XAML shows how 4 TextBlock controls can be defined and assigned to different rows and columns of a Grid:

Figure 6 shows what the Grid control and associated child controls look like at runtime:

Figure 6

In situations where you need a control to span multiple rows or columns you can use the Grid.RowSpan or Grid.ColumnSpan attributes. For example, the following button would be placed in the first row and span two columns:

In summary, Silverlight 2 offers several different controls that can be used to layout data and child controls on a user interface. The Canvas control allows for exact positioning whereas the StackPanel control provides more flexible control layout. The Grid control provides a simple way to arrange controls in a tabular-style on a user interface. In cases where you need additional layout flexibility such as arranging controls vertically or horizontally within a Grid cell, you can also combine layout controls such as the StackPanel (covered in a previous article) or Canvas with a Grid.

Angled Column Headers with Silverlight 2’s DataGrid

At the software shop I work at screen real-estate is always at a premium.bread and butter of our business is data, and the more of it we can fit on a screen the happier our customers are. Sometimes, to cram more data into our grids, we end up abbreviating column headers, wrapping them or possibly combining 2 or 3 data elements into a single cell. Usually this works out O.K., but sometimes we still run out of room. When this happens we either remove columns, or break the grid across separate pages.

Honestly, usually none of this is a huge problem.there is that certain class of data that just doesn't fit well into an HTML TABLE - when the length of the data elements are substantially smaller than the data label's.grid ends up looking too sparse.

I hadn't thought of this before, but football statistics fit into this category pretty well (I noticed this while leafing through Sports Illustrated Fantasy Football Preview).football season is short (only 16 games) and the per game statistics that are worth counting have relatively small values (i.e, carries, receptions, touchdowns, etc...). Sports Illustrated angled the column headers to keep the grid from running off the page and I thought it looked pretty good.

So where is this going? Well, I haven't had a chance to play with the new Silverlight 2 Beta 2 bits so I thought it might be interesting see what it would take to override Silverlight's DataGrid to render the column headers at a 45 degree angles. I should warn you that I am *very* new to Silverlight, but I thought this was interesting enough to write up a quick post about.

Live Demo | Download

Binding Data to the Grid

I bound the DataGrid to a collection of WideReciever objects (anyone else excited about football being just around the corner?). It all feels a lot like working with ASP.NET's GridView. I just want the grid to render text, so I have bound the properties of the WideReciever objects to the DataGridTextColumn. Then I set the column header text using the Header property and then used the ElementStyle attribute to set the padding on the text that is rendered.

Here is the XAML for the DataGrid.

And here is the style setting I am using to set the padding and alignment of the cell text.

Determining the DataItemIndex

I didn't find a way to bind the current rows index to the grid. So to work around this I wired the Loaded event of a TextBlock to run a bit of code that looks up the bound WideReciever index and populates the TextBlock with this value.

Styling the Column Headers

Finally, to get the column headers to render at an angle, I overrode the Template for the DataGrid's DataGridColumnHeaders and used a plain old Canvas to position the header text how I wanted it. To get the text to rotate I used the RotateTransform and set the angle property to -35.

That's it. Enjoy!

Pushing Data to a Silverlight Client with a WCF Duplex Service – Part II

In Part 1 of this series on pushing data to a Silverlight client with a WCF polling duplex service I demonstrated how service contracts and operations can be defined on the server.  WCF has built-in support for duplex communication (two-way communication between a service and a client) but does require a reference to System.ServiceModel.PollingDuplex.dll to make it work with Silverlight.  This assembly is provided in the Silverlight SDK and is currently in “evaluation” mode (the Silverlight go-live license doesn’t apply to it).  With the polling duplex model the Silverlight client does poll the service to check if any messages are queued so it’s not as “pure” as the sockets option available in Silverlight when it comes to pushing data from a server to a client.  However, it offers much greater flexibility when compared to sockets since it isn’t limited to a specific port range and works over HTTP. Let’s take a look at how a Silverlight client can send and receive messages from a polling duplex WCF service and what types of messages are sent between the two.

Understanding Polling Duplex Messages

A polling duplex service communicates with a Silverlight client using WCF Message types.  This provides complete control over the data sent between the client and the service and allows communication between the two to be loosely coupled.  The downside of this is that messages must be manually serialized/deserialized by the client and service since the WSDL type information uses the xs:any element.  Here’s what the service’s WSDL types section looks like (notice the inclusion of the xs:any element) when a service uses the Message type as a parameter for an operation: An example of using the WCF Message type in a WCF service is shown next.  Details about this code were covered in Part I of this series.

Creating a Silverlight Duplex Polling Receiver Class

Calling and receiving data in Silverlight requires a fair amount of code to be written.  Before showing the code to interact with a polling duplex service it’s important to understand the general steps involved.  Here’s what you need to do to send and receive data in a Silverlight client: Reference Assemblies and Namespaces

1. Reference System.ServiceModel.dll and System.ServiceModel.PollingDuplex.dll in your Silverlight project.  Additional details on where to find the System.ServiceModel.PollingDuplex.dll assembly used by Silverlight can be found here.
2. Import the System.ServiceModel and System.ServiceModel.Channels namespaces.

Create a Factory Object

1. Create a PollingDuplexHttpBinding object instance and set the PollTimeout and InactivityTimeout properties (both were discussed in Part 1).
2. Use the PollingDuplexHttpBinding object to build a channel factory.
3. Open the channel factory and define an asynchronous callback method that is called when the open completes.

Create a Channel Object

1. Use the factory class to create a channel that points to the service’s HTTP endpoint.
2. Open the channel and define an asynchronous callback method that is called when the open completes.
3. Define a callback method that is called when the channel closes.

Send/Receive Messages

1. Create a Message object and send it asynchronously to the service using the channel object.  Define an asynchronous callback method that is called when the send completes.
2. Start a message receive loop to listen for messages “pushed” from the service and define a callback method that is called when a message is received.
3. Process data pushed by the server and dispatch it to the Silverlight user interface for display.

Now that you’ve seen the fundamental steps, let’s take a look at the code that makes this process work.  The following code shows a class named PushDataReceiver that encapsulates the factory and channel classes and handles all of the asynchronous operations that occur.  The class allows an object of type IProcessor to be passed into it along with a service URL, service action and initial data to send to the service (if any).  The IProcessor object represents the actual Silverlight Page class used to update data on the user interface in this case.  As data is received the Page class’s ProcessData() method will be called. When the PushDataReceiver class’s Start() method is called by Silverlight it creates a channel factory instance which is used to create a channel instance.  The CompleteOpenChannel() callback method shown previously then sends an initial message to the service endpoint and encapsulates the data to be sent in a WCF Message object.  The message data is then sent along with the proper service action to call on the server.  After the initial message is sent a receive loop is started (see the ReceiveLoop() method) which listens for any messages sent from the server to the client and processes them accordingly.  Once a message is received the CompleteReceive() method is called and the message data is routed back to the Silverlight Page class.

Processing Data Using the XmlSerializer Class

The PushDataReceiver class shown earlier dispatches data received from the server back to the Silverlight Page class for processing.  Data sent from the server is in XML format and multiple techniques can be used to process it in Silverlight ranging from the XmlReader class to LINQ to XML functionality to the XmlSerializer class.  I chose to use the XmlSerializer class to process the data since it provides a simple way to map XML data to CLR types with a minimal amount of code.  Although you can create the CLR classes that XML data maps to by hand, I chose to create an XSD schema and use .NET’s xsd.exe tool to generate code from the schema for me.  The xsd.exe tool provides a simple way to generate C# or VB.NET code and ensures that the XML data will be successfully mapped to the appropriate CLR type’s properties.  An example of using the tool is shown next: xsd.exe /c /namespace:SomeNamespace Teams.xsd The /c switch tells the tool to generate classes (as opposed to strongly-typed DataSets) while the /namespace switch allows you to control what namespace is added into the auto-generated code.  Other switches are available which you can read more about here. One of the XSD schemas used to generate C# code with xsd.exe is shown next: Note: If you use the xsd.exe tool to generate classes that will be used in a Silverlight client you’ll have to remove a few lines that don’t compile from the auto-generated code.  The xsd.exe tool generates code designed to run on the full version of the .NET framework but with a few minor modifications you can also use the code with Silverlight.  Simply remove the namespaces and attributes that the compiler says are invalid from the auto-generated code. Once data is received by the Silverlight client from the WCF polling duplex service it’s processed by a method named ProcessData() (the method called by the PushDataReceiver class) in the sample application.  ProcessData() uses the XmlSerializer class to deserialize XML data into custom Teams and ScoreData objects (the Teams and ScoreData classes were generated from XSD schemas using the xsd.exe tool mentioned earlier). As team and score data is pushed from the server to the client it’s updated on the Silverlight interface as shown next: The complete code for the application including the WCF duplex polling service and the Silverlight client can be downloaded here.