Cool New Silverlight Toolkits Blaze Forward :

Cool New Silverlight Toolkits Blaze Forward

Since PDC2008 (okay I am I designer, so are we talking PhizzPop Design Challenge 2008 ?? just kidding folks but I thought I'd plug it here anyway), there have been some really cool user interface design initiatives popping up on Codeplex.com that designers will be interested in knowing about because they radically change how easy it is to consistently change user interface and design.. Let's take a look at some of them and try to understand what they do and why they are helpful. If you are a developer or work with developers these will make your life much easier.

Simon Ferquel's Silverlight Behaviors Toolkit

This one is made for Silverlight, but inspired by AJAX..

Since Silverlight is a presentation layer for a web applications and most web developers use controls based on something called AJAX (Asynchronous JavaScript and XML) it would be useful to bridge Silverlight UI and AJAX. In fact it would be nice to have Silverlight controls that interact with and behave just like Ajax Controls as well.

Silverlight Behaviors toolkit provides a way to attach standard rich UI behaviors(layout managers, buttons, radio, checkboxes...) on Silverlight UIElements. This is inspired from the AJAX Control Toolkit, and is made to work with ASP.Net AJAX.

The project also provides some demonstrations of how these AJAX style behaviors work as Silverlight controls. This control toolkit gives you some nice consistency if you are creating controls to run in Silverlight but behave like the AJAX controls.

Here are some examples with links to view (thanks to SimonFerquel.net) quoting his descriptions of each:

Buttons: http://www.simonferquel.net/SLToolkit/Demo01/
These buttons are created using $create(SilverlightControlToolkit.Button ...) syntax. The JS file does not make reference to animations. They are automatically referenced using name conventions. See the xaml file to view how animation are named.

Radio / checkboxes: http://www.simonferquel.net/SLToolkit/Demo02/
This sample show how ToggleButtons can be grouped in ToggleButtonList to make RadioButtonLists and CheckboxLists. It also show how to create and use animation templates.
Note that no animation is defined in the main xaml file. They are grouped in the Templates.zip file and downloaded using the Silverlight Downloader.

Layout: http://www.simonferquel.net/SLToolkit/Demo03/
Show how to use SLToolkit StackPanel, Grid, FlowPanel and Named values. It also shows how SLToolkit behaviors interact (size changes of a behavior can have an impact to other elements).

Scrolling: http://www.simonferquel.net/SLToolkit/Demo04/

Show how to use ScrollBars and Page Flipper to enable Scrolling.

In each of these examples:

Multiple behaviors can be attached to one UIElement
Behavior attached on non-named UIElement
Full Support of Silverlight NameScopes
If you plan to modify or rebuild this project: you must also have downloaded Script# 0.4.5.0 over at http://projects.nikhilk.net/Projects/ScriptSharp.aspx

Microsoft Brings Charting Tools to Both ASP.NET and Silverlight

This is not directly related to Silverlight but it also deserves a mention. Microsoft has acquired Dundas’s data visualization components (but not Dundas themselves). It would seem they are allowing both Dundas, and other companies like Infragistics, and others (who all make charting solutions), to battle it out for supremacy in the SharePoint, ASP.NET, Silverlight, and WPF arenas.

However these components are now available for you to use today and a great freebie downloads.

Just the same if you are a Web Developer these are great and usable today..

Microsoft Chart Controls for Microsoft .NET Framework 3.5 – This installs the ASP.NET and Windows Forms Controls.

Microsoft Chart Controls for Microsoft .NET Framework 3.5 Language Pack – This installs the language pack for the Chart Controls.

Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008 – This installs the IntelliSense file in for the controls and also adds the controls to the toolbox for ASP.NET and Windows Forms.

MSDN Code Gallery - Samples Environment for Microsoft Chart Controls

The samples environment for Microsoft Chart Controls for .NET Framework contains over 200 samples for both ASP.NET and Windows Forms. The samples cover every major feature in Chart Controls for .NET Framework. They enable you to see the Chart controls in action as well as use the code as templates for your own web and windows applications.

The samples environments each contains a Getting Started section to help you start using the Chart controls quickly. The samples demonstrates how to use the following features in Microsoft Chart Controls for .NET Framework:

All supported chart types.
Data series, chart areas, axes, legends, labels, titles, and more.
Data Binding
Data manipulation, such as copying, splitting, merging, alignment, grouping, sorting, searching, filtering, and more.
Statistical formulas and financial formulas.
Advanced chart appearance, such as 3D, anti-aliasing, lighting, perspective, and more.
Chart rendering.
Events and Customizations.
Interactivity and AJAX.

During the 2008 Professional Developers Conference Microsoft released a set of controls, components and utilities made available outside their normal release cycle. This toolkit adds new functionality quickly for designers and developers. This first release contains full source code, unit tests, samples and documentation for 12 new controls covering charting, styling, layout, and user input. They are still a work in progress so you will want to review them to see if they are up to your quality needs in their development lifecycle. However, they are a great start.

Toolkit Controls

Most of these will look familiar to you but there is one that you will find useful as a designer when working with developers.. That being the ImplicitStyleManager. If you have ever developed themes in XAML for WPF, you will remember you can change a theme of an application at the Application level (App.xaml) and using a THEMES folder or further deep into the stew of things on the instance of the control itself. Many designers and developers create libraries of things and control libraries.

Anyway, styling and behaviors were much more controllable in WPF. With Silverlight because we are a web browser plug-in that kind of limited the scope of themes, making it much harder to create a theme that could be applied and changed all at once.. ImplicitStyleManager brings a much more "WPF" style solution to this and makes it easy to change the theme on the fly. The toolkit also includes several all ready pre-made themes and examples so you can start using this today. Making the designer much more independent and bound to the actual control instances themselves.

In case you are curious the extended Silverlight XAML looks something like this..

UserControl XAML

<UserControl

theming:ImplicitStyleManager.ResourceDictionaryUri="proj;component/Theme.xaml">

</UserControl>

Theme.xaml

<ResourceDictionary

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" >

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml" >

</Style>

</ResourceDictionary>

If you have already defined your theme you can go ahead and implicitly apply it to all descendent FrameWorkElements. Here's more example Silverlight XAML (just encase the theme directly above the xaml elements that you intend it to be contained..

<shinyBlue:ShinyBlueTheme>

</StackPanel>

</shinyBlue:ShinyBlueTheme>

This would give you a Blue themed Button and a Slider.

Of course if you are a developer and want a few themes to test out with the control toolkit includes the following pre-made ready to use themes..

This one control alone will make identity and branding much more exciting and easy to do across the board as these themes can be implicit to an area of your page or across the entire application.

Charting has always been a difficult thing with Silverlight and WPF before it. Although it's a great base, there are certain types of charting features we have grew over the years to be included.. This new toolkit adds those features onto Silverlight.

You can check out some of the charting samples here...

There are also control samples available here for non-charting controls.

Here's two screen shots from CodePlex.com which will show you how easy this makes the whole process..