What is Silverlight? - Part 2: A Custom Control Using Silverlight

By Justin
Posted on Jun 5, 2008

Comments (0)

Silverlight and Windows Presentation Foundation (WPF) provide an outstanding architecture on which to design and implement custom user interfaces and controls. Through the use of the XAML specification, the creation of UI's and custom controls has never been easier or more rewarding. In this post I'll be showcasing a very useful and completely custom new control built within Silverlight, the InetSolution File Uploader control.

Below is a screenshot of the InetSolution File Uploader control, this is a brand new uploader control built from scratch within Silverlight. While I'm not a designer, putting together the visual look of the control wasn't difficult at all. The XAML designer in Visual Studio 2008 or Expression Blend allows you to edit the XML and immediately see the results of your changes in a split editing pane, basically eliminating the need to build and test. Other than logical interactions, the XAML designer does a perfect job of WYSIWYG editing, the reason I can say perfect is because with Silverlight (based on WPF) there is the XAML standard, so there is no room for interpretation (such as with HTML), you can safely rely on the fact that however you design your controls and interfaces in Silverlight or WPF, will be exactly what the user sees after you publish your software, an additional benefit to Silverlight as those given in Part 1 of this post.

XAML files describe the look of Silverlight/WPF interface. Through a large collection of built-in objects you can design a control or screen exactly to your liking. As an example, the following XAML markup will generate the accompanying image.

<Grid x:Name="LayoutRoot" Background="White" >

    <Ellipse Height="89" Width="100" Fill="Orange" Stroke="Black" StrokeThickness="5"/>

</Grid>

As you can see, the markup is fairly intuitive. Obviously it takes some time to learn the different attributes and properties and elements available to XAML documents, but in the end its XML. To save many hours coding interfaces by hand writing XAML files, there are a variety of XAML editors currently available, but I've only tinkered with Expression Blend from Microsoft, I used that program a little to create the File Uploader control, but being a programmer often found myself marking up the XAML code directly anyway, as a way of learning.

Creating custom controls starts off with composing the XAML interface file. The File Uploader interface is clearly composed of many elements, some visible and other invisible to the user. It contains many stock Silverlight controls such as buttons, text blocks, a scroll bar and various container objects to hold everything. For the most part I made use of existing controls in order to create a complete File Upload control. However I did make some smaller miner controls to help flesh out the larger file uploader entity, namely the rows in the control that represent files being uploaded. These are completely custom controls that I created using various shapes and stock controls, and then included into the main file uploader control. In the end there are couple custom controls that I built in order to facilitate the needs of the File Uploader control, but it shows how extensible UI elements within Silverlight and especially WPF, really are, the skies the limit.

Logically speaking, the File Uploader control does a fair bit:

• Allows users to upload any number of files at the same time (though the demonstration is limited to 5 concurrent uploads at a time)
• Allows users to cancel file uploads that are currently processing or have yet to be processed
• Allows users to clear the upload queue all at once or individually as needed
• Allows users to upload more files even if other files have already started their file upload process
• Provides feedback on the status of an individual file upload, it's speed and estimated time to completion
• Provides feedback on the filename, and the size of the file and accepts any file size (though the demonstration limits file uploads up to 500kb in size)

All of this functionality was handled through C# code via the subset of the .NET framework that is available to Silverlight applications as well as custom classes and objects created for the purpose of implementing the file uploader control. This is important to note because if you are familiar with .NET programming in general then moving to Silverlight is pretty easy. While saying 'subset' of .NET might seem like a letdown, it shouldn't. A lot of the most useful .NET libraries are available to Silverlight applications while many meaningless (to Silverlight) are not to reduce the download size of the plugin. For example there is no need for System.Windows.Forms in a web application so that is not available, however System.Net and System.Web would be useful and are included among many others (including data access libraries such as LINQ). While writing the code for the File Uploader, I never once ran into a situation where I needed a .NET library that was not included with Silverlight further impressing this developer.

I explored basic animation and included it in this example as a small icon that rotates as files are uploaded, this displays to give the user an indication that the file is uploading, especially with very large files where the progress bar indicator might not fill quickly enough to show that something is occurring. This was managed completely via XAML markup. Another powerful feature of Silverlight and WPF is that animations can be specified within the XAML markup itself (or programmatically if needed of course). This makes creating simple animations and transforms very easy to accomplish. Furthermore, there are many properties on each of the Silverlight/WPF controls and objects that can be 'animated', from colors and positions to stroke widths and opacity etc. Animation doesn't only refer to moving or transforming an object as in a cartoon, but also applies to changing the values of a property some amount, over some period of time and there are many such properties. A real designer (not me) will have a field day with the options and power that Silverlight and WPF provide in terms of animation and custom control design to create the best user experience possible.

Building this uploader control was primarily meant to test the waters of how powerful Silverlight is and to find its limitations. I'm always hesitant with new technology in determining if it is just industry hype or of it really does provide something new and powerful to the arena of software development and I've been nothing but astounded by Silverlight and especially the Windows Presentation Foundation at its core. Silverlight is a real contender and I think it will easily find its place in the industry. I don't believe it will be a 'Flash-killer', as Flash may still take the cake in the animation department, but in terms of usability for the user and especially the developer, it easily wins over Flash, the reliance on the .NET framework is probably its biggest boon over Flash development, as well as the new XAML standard. There is no doubt that creating powerfully functional user interfaces has been revolutionized on the desktop with the advent of the Windows Presentation Foundation and on the web with Silverlight.

The demo of the above File Uploader can be reached via the InetSolution Sandbox.