WPF Navigation

Latest news

10 Jul 2009: Silverlight Version 3 released

22 Aug 2008: SharpDevelop 3.0 Beta 2 has been released - you can get it on Sourceforge as well as at Sharpdevelop downloads.

Silverlight Libraries Selection

Silverlight is just another programming language; discuss. My take on Silverlight is that while it is based heavily on Microsoft .NET, WPF, declarative XAML and C#, this combination provides a very powerful programming tool. However, when this is combined with the power of the Internet it moves itself onto another level. The whole idea of WPF was to improve presentation of the operating system and applications running under Vista (note most of this can be achieved running under XP as well). Silverlight has its strategic importance because its main aim is to expand the presentation improvements onto Web pages, which every business now has to embrace if it wishes to maintain competitive advantage. Since Silverlight 2 has been released there have been a deluge of new libraries, and this is set to rise. In this section you should find enough free and open source tools to help you make really inspiring web pages - I do not list any shareware or paid for versions. As a footnote, following the release of Silverlight 3, it looks like this activity is now moving into a consolidation phase with some projects being amalgamated and others dropping by the wayside.

Since the web is so all embracing, improvements in presentation become much more important when communicating with your customers. Graphics, pictures, animations help to get the point across much better than pages of words. Unfortunately, I don't yet have the experience to make my pages look a whole lot better, except in small ways, so at the moment I am gradually making changes, but at the moment not in a fundamental way. I am more interested in the mechanics of design, rather than just settling on one approach. I cannot help feeling that there is a fantastic opportunity for re-usability of code, because this will allow designers to enhance their web pages using proven methods. In the following sections I shall be looking at Re-usable User Controls, and use of libraries as opposed to quick and dirty methods of just changing an existing design to suit a particular circumstance. I have to admit that I am fundamentally opposed to being made to use tools such as Microsoft Expession Blend. From what I have seen these tools will help you build a Silverlight Project at a price, but I would rather look at open source alternatives to encourage the lone developer who has to do his own development and design, rather than employ a team of designers to make something look pretty. Believe me I have seen the process of splitting analysis and design in large organisations and it is very tedious and costly process. The analyst comes up with a set of requirements and the designer tries to interpret the requirements and pity the poor programmer who has to actually build it. So what I am looking for are tools that will help the Designer who might just be the Analyst as well to produce neat Silverlight applications. Hopefully by using re-usable code the one man band will be able to build the application as well. All of my project experience has demonstrated that Analyst/Designer/Programmer gives the best results. If only some of the other roles could be amalgamated as well.

Silverlight Libraries

Libraries can make the resultant Silverlight application rather large althought it is not always the case, because the functionality included in the library is much larger than the functionality required for an individual application of the library. Libraries are often difficult to use because of the need for parameterized calls, requiring a thorough knowledge of the library. They can save time and avoid writing the same code over and over and are useful for hiding some of the complexities that otherwise the programmer would have manage in their own code. Sometimes you will hear objections to the size of libraries and I guess there will always be some tradeoff between using a general use library containing many controls as opposed to using a purpose built single control. Unless the size of the xap file is very large (greater than 200 kB) I find there are advantages in using a library, because of familiarity with using the library providing better coding productivity. As always when using libraries there is always the need to make sure you are using the appropriate dll's - I have found this quite confusing when there are several versions of Silverlight around, plus new versions of the SL Toolkit and then of course other 3rd party applications may also use these libraries. It doesn't aid stability when Microsoft switches the location and names of these dll's with great rapidity. So I thought it might be worth looking at the more common dll's you will come across when using Silverlight :-

System.Windows.Controls.dll - Found in the Silverlight SDK with a size of 378 Kb
System.Windows.Controls.Data.dll - Again part of the Silverlight SDK and weighs in at a massive 422 Kb

SilverlightFX Library

This library has been ported across from a Glitz animation library based on Ajax which allows development of interactive web applications. The actual Silverlight.FX library is about 168 Kb which compresses down to 74 Kb in the .xap file. The library is very easy to use and includes some tremendous sample applications including some web server application. The effects are very good with the ability to accelerate and decelerate movement (often referred to as tweening) giving a realistic physics impression. The example below shows how easy it is to use the effects in your own application. Basically you just call the fxtransitions effect - 'Flip' and specify the duration, and the name of the image.

This set of controls certainly sets the standard very high because of its small footprint, range of transitions and effects and its overall integration, coupled with some very high quality samples. I used the Cross fade Transition above to show how I made a simple use of the library involving just the Microsoft Silverlight SDK and SharpDevelop 3.0. It is very easy to change the interaction behavior (transition) effects by choosing from (amongst others):-

fxui:ClickEffect - Effect occurs only when you click on image
fxui:HoverEffect - Transition occurs when mouse hovers above - as implemented above

You can find the library at Nikhil Kotharis Weblog

Microsoft Silverlight Toolkit

If you need any more convincing that Microsoft is serious about Silverlight, then go ahead and download the Silverlight Toolkit which adds a whole lot of new controls covering charting, styling, layout and user input. These are being released outside the normal Silverlight release schedule in order for the designers to get feedback as to whether they make the next release. From a quick look at the previews it would seem that these are just what web developers are looking for, and an important first step to building web pages totally in Silverlight. Bye, bye HTML. After seeing the rather large downloads I assumed that using these controls would create rather large XAP files; in fact I have been surprised at the relatively small footprint even when using themes. For example I checked out a Treeview example using the Control, Theming and Shiny Red Libraries, compiled using Sharpdevelop and came out with a 126kb XAP file - not so bad and if you cut out theming, only 67Kb. I particularly like the ease of use of the library and the improvements that theming bring. I have not yet checked out the charting library, but its on the list - I'm hoping that its a bit simpler to use than some of the other charting options I've used. The March 2009 release for Silverlight 2 comes with an installer and several new controls and the samples supplied are impressive.

Data Visualization

The rather grand title describes exactly what it does, although most people call it charting. I tried this out and was immediately impressed by how easy it is to use. In particular I like :-

The ease with which data can be held and used; I used a separate C# module to hold the data using the ObservableColection class. This provides a good separation of data from the processing logic.
The same data can be used easily with different chart scenarios. So with relatively minor changes a Bar chart is easily changed to show a Column, Line or Pie chart
The charts could relatively easily be customised for legends, titles etc.
The small footprint for the chart xap file. I created fairly simple Bar, Column and Line charts that were only 80Kb uncompressed and 63Kb for the 7 Zip compressed file

The charts do not have all the flair you get with Visifire - but you get a very acceptable result for a small footprint. I see that the Visifire xap file size is increasing again as a result of making the library handle both WPF and Silverlight. I think I would prefer having two separate libraries with a smaller footprint for Silverlight.

Visifire Chart Library

I started off using the 1.5.5 release of Visifire and have just migrated to the version 2.2.3 which supports Silverlight 3. It seems to be a big improvement on the version 1 releases and for the simple charts I've found this very difficult to beat. I have used this in an example on my Property page. I have tried using both XAML code and the C# Managed Code approach and although this may appear like heresy I much prefer the C# approach. For all but the simplest charts the XAML approach soon ends up as an incomprehensible jumble, whereas I was able to work out most of the syntax changes in version 2 just by using the SharpDevelop Code Completion prompting facility. I found the Managed Code documentation to be rather poor at the moment, with the vast majority of examples being written using XAML. I found when I came to run the Unit Tests in SharpDevelop that several of the test cases seemed to be missing so I got a very incomplete Test. Also, it should be noted that the XAP file size (typically 187 Kb) has shot up in Version 2, which is understandable when you see the features that are now available including Candlestick and Stock Charts. Some of the Managed Code changes are a bit strange, but make sense after a time; e.g. 'dataSeries.RenderAs = RenderAs.Column;' but is much more preferable to version 1's 'dataSeries.RenderAs = "Column";'. On the plus side I am very impressed with the ease with which it is now possible to create really professional looking charts for the web page with fairly minimal effort. There are also processes to create charts for WPF and XBAPs. I found it quite straightforward to use SharpDevelop to compile the source code; I just had to get the correct testing libraries from Microsoft and I also had to change the import library in the Project File to point at the Silverlight 3 libraries. It will be an interesting contest between Visifire and Microsofts Data Visualization offering which also provides 3D charts.

Noboru - Silverlight 3 Controls

This is a set of Silverlight 3 Controls currently in alpha stage which are designed to provide an Office 2010 look. It seems to be designed to integrate into Visual Studio 10 and Expression Studio 3. As I only have SharpDevelop, I compiled the library from the proj. file and ditto with the demo. The demo works well (in fact just as referenced in the CodePlex homepage) with Dialog, Glow, GroupBox, MessageBox, Shadow and Toolstrip Button Controls plus more and even more promised. So the Microsoft control library has become very heavy so it is interesting to see a little bit of competition in Silverlight, so that developers have a choice.

Silverlight Contrib

This set of controls and library tools is really excellent in the 2008.0.0 alpha release for Silverlight 2. There are many ideas for implementing tweening and making your Silverlight applications look much better. So far there is a SilverlightContrib library containing :-

Zip Compression
Byte Utilities
String Utilities
Simple Text Parser
Animation Tweening
Wheel Mouse Listener
Clipboard Helper - (Internet Explorer Only)
Data Context Extension Method Wrapper

The SilverlightContrib.Controls library contains :-

Color Picker
Gauge Control
Star Selector
Enhanced Metafile (EMF)
Cool Menu

The controls are called from within the application XAML using statements such as sc:CoolMenu. You can download SilverlightContrib from Codeplex.

Silverlight Extensions

This is a very nice library showing some of the great opportunities that exist in Silverlight for innovative web design. You can find the free download on Codeplex and I recommend taking a close look at this. I managed to compile most of the examples using Sharpdevelop, except for the web server applications. You can download Silverlight Extensions from Codeplex. On the website it says Silverlight Contrib and Silverlight Extensions are merging - but apart from the lack of output from Silverlight Contrib there seems little evidence of this. In my opinion, the controls already seem to lack a bit of cohesion and it would seem to me a better idea to split the library into at least 3 - say, controls, media and utilities. So maybe here is a case where separation is better than merging. Note that the compile now needs the Assembly Linker which means a massive download from Microsoft, just for the sake of one file.

Using the Datagrid

It took me a little while to discover the Datagrid control in Silverlight, so it might be worth sharing some experiences. I started off using an XML file to detail the data in the Datagrid, then I developed the XAML to display the data and bind the columns to the XML definition. Then it was just a case of writing the behind code to load the data and having get and set routines to move the data. It sounded quite easy, although there were one or two pitfalls on the way :-

Creating the XML file

I decided as an example to show a datagrid of all the UK Mutuals currently in the mortgage market. A fairly topical subject given the current state of the mortgage market both in the USA and the UK. The data I wanted to show was the Building Society name, the Assets and the total Mortgage book together with some notes :-

<?xml version="1.0" encoding="utf-8" ?>
<Mutuals>
    <Mutual Group="Dudley Building Society" Rank="38" Quantity ="0.288" Quantity2 ="-" Notes=""></Mutual>
    <Mutual Group="Dunfermline Building Society" Rank="14" Quantity ="3.303" Quantity2 ="-" Notes=""></Mutual>
    <Mutual Group="Earl Shilton Building Society" Rank="53" Quantity ="0.096" Quantity2 ="-" Notes=""></Mutual>
    <Mutual Group="Ecology Building Society" Rank="56" Quantity ="0.075" Quantity2 ="-" Notes=""></Mutual>
    <Mutual Group="Furness Building Society" Rank="22" Quantity ="0.845" Quantity2 ="-" Notes=""></Mutual>
    <Mutual Group="Hanley Economic Building Society" Rank="35" Quantity ="0.363" Quantity2 ="-" Notes=""></Mutual>
    <Mutual Group="Harpenden Building Society" Rank="47" Quantity ="0.158" Quantity2 ="-" Notes=""></Mutual>
    <Mutual Group="Hinckley and Rugby Building Society" Rank="27" Quantity ="0.712" Quantity2 ="-" Notes=""></Mutual>
    <Mutual Group="Holmesdale Building Society" Rank="48" Quantity ="0.152" Quantity2 ="-" Notes=""></Mutual>
    <Mutual Group="Ipswich Building Society" Rank="33" Quantity ="0.403" Quantity2 ="-" Notes=""></Mutual>
    <Mutual Group="Kent Reliance Building Society" Rank="18" Quantity ="2.134" Quantity2 ="-" Notes=""></Mutual>
    <Mutual Group="Leeds Building Society" Rank="08" Quantity ="9.181" Quantity2 ="6.4" Notes=""></Mutual>

The only problem I had was if I missed a field out in the XML the Silverlight application displayed the round working symbol, but did not produce a result. I have to say creating a mini database in XML is a fairly tedious process so it may be easier to have the datagrid data in a database or spreadsheet and then export to XML (if only there weren't so many XML flavours).

The XAML Code

There are just a few points concerning the code :-

I used straightforward DataGridTextColumns to define the Group, Rank and Quantity2 fields
For the Quantity field I used a DataGridTemplateColumn - in fact the definition would allow me to format this field differently, but I chose to keep it as the standard font and size
I wanted to wrap the text on the Notes field so I had to use a DataGridTemplateColumn with TextWrapping="Wrap"
I also set all the columns to 'readonly' as I did not want to include any editing possibilities

The C# Behind Code

I had to use the appropriate libraries when using an XML file such as System.Xml.Linq, otherwise it was just a question of using the right load load statement for the XML file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Xml.Linq;
using System.Windows.Data;
using System.Windows.Media.Imaging;

namespace DataGrid
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();

            this.LoadData();
        }

        private void LoadData()
        {
            XDocument mutualsDoc = XDocument.Load( "Mutuals.xml" );
            List<Mutual> data = ( from societies in mutualsDoc.Descendants( "Mutual" )
                                     select new Mutual
                                     {
                                         Group = societies.Attribute( "Group" ).Value,
                                         Rank = societies.Attribute( "Rank" ).Value,
                                         Quantity  = societies.Attribute( "Quantity" ).Value,
                                         Quantity2  = societies.Attribute( "Quantity2" ).Value,
                                         Notes  = societies.Attribute( "Notes" ).Value
                                     } ).ToList();

            Bsocs.ItemsSource = data;
            this.Bsocs.SelectedIndex = -1;
        }
    }
}
</UserControl>

The only other requirement is to define the 'Mutual' class which is just a question of get and set for each field. I then compiled the result using SharpDevelop and you can see the end result at UK Mortgage Lenders Note the DataGrid allows sorting on any text defined column, but sorting can be suppressed in the XAML.

Building a Silverlight UserControl

A Silverlight UserControl enables developers to encapsulate UI functionality in a re-usable user control. The user control can either be derived from an existing Silverlight Control such as a button or the User Control can be built from scratch using XAML. I like to think of them in terms of Delphi components where it is possible to select a control from the Delphi IDE, place it on a form and then have all the features of the control including its User Interface available to the designer to build into the application. One of the big problems I have with the whole WPF and Silverlight implementation is concerned with the way these User Controls are built into Applications. What I would like to see is the ability to build a UserControl in SharpDevelop which can be viewed and moved about on the screen. Then if you wish to use the UserControl, make it possible to select the UserControl and place it in your own application. After all this is not much different from what can be done with NET 2.0 using standard libraries. In the days of Delphi practically everyone developed their own special button or other fairly useless control and packaged it into a component. Why can't the same principles be used with Silverlight - I would like to be able add a UserControl into the Designer so that there were tab categories displayed in the IDE. The developer should then only need to select the components from the tab and then maybe select a few standard properties ready to build it into a Silverlight or WPF application.

User Control Example

The DataGrid example above showed a Silverlight User Control involving a xaml file and a C# code behind file and calling the System.Windows.Controls.Data assembly for the DataGrid class. Writing a User Control for external libraries follows the same principles; for example if you need a User Control to display the DockPanel in the Silverlight Extensions library referenced above, you only need a xaml file and the default code behind file (containing InitializeComponent) as follows :-

In your SharpDevelop project you need to add the assemby reference SLExtensions.Controls and include the library in the xaml file as detailed above. This allows you to use expressions such as slec:DockPanel in your xaml code.

Building a Silverlight Custom Control

Custom Controls are used to modify the visual aspect of the control without disturbing the application logic code. In other words we want a new or modified control but we don't want to have to upset each application which uses this control by having much more code inside our application handling the control, such as logic required for dragging the control. For example if someone produces custom control 'XYZbutton' the user will just want to use this in a similar fashion to the standard button. Those familiar with Visual Basic or Delphi will have seen the huge numbers of custom controls available both from open source and commercial sources. On the few occasions that I have used Custom Controls in my applications, I have often regretted this because things move on and suddenly you find yourself trying to rebuild the application but cannot because the custom control is no longer compatible with the new version. Nevertheless, there are occasions when a Custom Control can fill a gap, maybe because the framework is incomplete, but I would always recommend making sure you have the source code and not just the dll. Custom controls are normally visual, such as buttons, listboxes etc. and were originally introduced by Microsoft so that developers had a framework for extending Visual Basic. The original custom controls were called VBX (Visual basic Extensions), which morphed to OLE Controls (OCX) and then to Active X. Fortunately or unfortunately the concept has been extended into C# and this is all about the Silverlight impementation. Custom controls fall into three categories :-

Modify an existing standard control
Combine two or more controls into one
Create a new control from first principles

There is a three part series on how to create a MessageBox custom control in Silverlight at Creating a Re-usable Message Dialog... The Custom Control is normally compiled into dll and then you can reference the library in your application. Custom controls are often used because there is no basic support in the Silverlight library. In particular there is no messagebox control to say something simple like MessageBox("Hello World"). In this case the popup box has been used as the basis for the new customised control. To modify an existing control it seems you have to delve into something called generic.xaml. One very important change that has to be made when using Silverlight 2, is that the generic.xaml file has to be placed in a new folder called 'themes'.

ePlaice / For the Best Software on the Net

Mainly Free and Open Source Software