| Comments

I’ve written a few times about some of the controls that have been provided by organizations like Telerik and ComponentOne.  I figured it would be a good idea to do a larger dump of those that I’m aware of (and hope you add comments to point me to others so I can amend this list) and help make you aware of them as well.  There are a ton of great resources out there for Silverlight developers and I’m always impressed how our developer partners are extending our platforms to make tools for developers (and most of the time better than we do :-)). 

Here’s my round-up of controls (alphabetically – links here will jump to their section):

Cellbi

Cellbi has a library called SvLite Effects which contains animations and controls such as:

  • Carousel
  • Wipe
  • SlideShow
  • Primitives
  • Tweens
  • Window
  • ComboBox
  • Accordion

A demonstration of these controls is provided on the SvLite Effects site.

(back to top)

ComponentArt

ComponentArt recently announced their roadmap for Web.UI for Silverlight.  While there is nothing downloadable as of this writing, they do have plans for a suite of controls for Silverlight that include:

  • ContextMenu
  • DataGrid
  • Slider
  • TreeView
  • ItemFlow
  • Menu
  • Toolbar
  • Upload

Some of their current preview demos are available on their technology preview site for the Web.UI for Silverlight controls.

(back to top)

ComponentOne

ComponentOne extends their “Studio” line of products to include a Studio for Silverlight which currently includes a suite of controls:

  • Accordion
  • Book
  • Chart
  • Color Picker
  • ComboBox
  • Cube
  • Data
  • DataGrid
  • DragDropManager
  • Expander
  • FilePicker
  • Gauges
  • HeaderContent
  • HtmlHost
  • Hyper Panel
  • Image
  • Image Magnifier
  • Image Rotator
  • Layout Panels
  • Maps
  • Masked TextBox
  • Menu
  • MessageBox
  • NumericBox
  • Range Slider
  • RichTextBox
  • SpellChecker
  • TreeView
  • Uploader
  • Window
  • Zip

You can explore these controls using their Silverlight Control Explorer sample application.

(back to top)

DevExpress

No stranger to the control market, DevExpress hit the ground running early with releasing a DataGrid along with full source code.  They have since added more to their Silverlight-specific controls:

  • DataGrid
  • Rich Text Editor
  • Menu/Toolbar Controls
  • Layout Manager

These can all be viewed using their online demos area of their site.

(back to top)

FarPoint

Another familiar name, probably most widely known to Visual Basic developers for FarPoint Spread, the team has seemingly been working on a set of controls for Silverlight.  They are currently in “lab” form but include controls for:

  • DateTime
  • Numerics
  • Mask edit
  • Text input
  • Calculator
  • Error reminder
  • Spin

As I noted, these are in lab form, but FarPoint has a preview build available and demonstrations on their lab site.

(back to top)

Divelements

Divelements has had products for Windows Forms for a while and recently expanded to the WPF and Silverlight space specifically introducing new controls for Silverlight:

  • SandRibbon
  • SandDock

Take a look at their demonstration of a sample application leveraging both of these products in an Office-like UI.

(back to top)

GOA Toolkit for Silverlight

Netikatech first showed up on my Silverlight radar with their Windows Forms implementation that was quite impressive.  I had a chance to also meet with the company in Belgium and demonstrate this framework at MIX Essentials.  They’ve since also released the GOA Toolkit for Silverlight which includes (in a few packages):

  • Panels: Stack, Dock, Canvas
  • ListControl
  • Sizers, ContentPresenters, LocatedBorders
  • KeyNavigator, Staters, DropDown
  • GOAOpen library with full source code

A demonstration of implementing this toolkit is available at the GOA Toolkit Demo site.

(back to top)

Infragistics

Expanding their NetAdvantage product line, NetAdvantage Silverlight provides a set of controls for developers which Infragistics markets as Line of Business and Data Visualization controls:

  • xamWebGrid
  • xamWebTree
  • xamWebOutlookBar
  • xamWebEditors
  • xamWebSpellChecker

You can view samples of these in the Infragistics line-of-business feature browser application.  Additionally, they are providing visualization controls:

  • xamWebChart
  • xamWebGauge
  • xamWebMap
  • xamWebTimeline
  • xamWebToolbar

These are some really great visualizers and they have interesting samples of all of them in their visualization sample application.

(back to top)

Intersoft (WebAqua.NET and more)

WebAqua.NET from Intersoft provides two controls that simulate a popular user experience most commonly found on the Mac OSX platform.  In addition, Intersoft (as of Feb 2009) has also expanded to include data access controls and an additional presenter control.  They provide:

  • WebFishEye
  • WebCoverFlow
  • Presenter
  • AstoriaDataSource
  • WcfDataSource
  • XmlDataSource

You can see a demonstration of both of these controls on the WebAqua.NET site and the demonstrator for the Presenter and data source controls.

(back to top)

SilverlightContrib

This is an Open Source project being driven by the community and Silverlight MVPs, namely Page Brooks.  This group of community folks have rallied to create some controls and framework libraries.  Their current controls include:

  • Color Picker
  • Gauge Control
  • Star Selector
  • Enhanced Metafile
  • Cool Menu
  • Zip, Byte, String Utilities
  • Animation Tweening
  • Wheel mouse listener

This is great to see this community-driven type resources.  Their demo application is also available for perusing here and you can download the bits/code on their CodePlex project site.

(back to top)

Silverlight Toolkit

Who could forget the beloved Silverlight Toolkit!  Coming from a team inside Microsoft, this is an Open Source project led by a team within Microsoft to provide a set of controls with full source code to developers to leverage, extend, etc.  The controls are:

  • AutoCompleteBox
  • DockPanel
  • HeaderedContentControl
  • HeaderedItemsControl
  • Label
  • NumericUpDown
  • TreeView
  • WrapPanel
  • Charting
  • Expander
  • ImplicitStyleManager
  • Viewbox
  • Set of XAML themes

The goal of this project is to provide some extended controls beyond the core that Silverlight provides with the assumption that some of the controls from this project may make it into future releases of Silverlight’s core framework.  You can view the project and sample applications on the Silverlight Toolkit CodePlex project site.

(back to top)

SLExtensions

Another significant Open Source project that provides a suite of controls/libraries in it’s distribution.  As of now there are:

  • Treeview
  • Captcha
  • Virtualized Stack Panel
  • Dockpanel
  • Flow layout
  • Viewbox
  • GoogleMap
  • Virtual Earth
  • Change tracker
  • Binding comparer
  • Bootstrap
  • HTML Editor

The project also contains a set of utility libraries for handling mouse wheel, analytics, browser history, etc.  Check out the SLExtensions Showcase for some demonstrations.

(back to top)

Telerik

Another familiar face here in the .NET component world is the great team at Telerik.  They came out early with some preview set of controls for Silverlight 1.0 and now expanded to a solid set of Silverlight 2 controls for RadControls for Silverlight which include:

  • Calendar
  • ComboBox
  • ContextMenu
  • CoverFlow
  • Cube
  • DatePicker
  • Docking
  • Drag and Drop
  • Expander
  • Gauge
  • GridView
  • Layout Panels
  • MediaPlayer
  • Menu
  • Navigation
  • NumericUpDown
  • PanelBar
  • ProgressBar
  • Slider
  • TabControl
  • TimePicker
  • TreeView
  • Upload
  • Window

Check out their Silverlight demo application demonstrating all these controls, various skins and how they can be used.  On the demo page they have also created 4 sample applications that implement their controls in various scenarios: Resume (CV) viewer, Media, Job board, and an automotive configurator.

(back to top)

Vectorlight

Vectorlight has a suite of controls available for Silverlight 2 developers for free.  You can also have the option to purchase the source code.  Their controls include:

  • Color Selector
  • Dropdown
  • Fieldset
  • File Upload
  • ItemViewer
  • Main Menu
  • Menu
  • Popup controls
  • Progress Bar
  • Rich TextBox/TextBlock
  • Roller Blind
  • Scroller
  • Spell Checker
  • Table
  • TextBlock Plus
  • Text Roller Blind
  • TreeView

All of their controls and associated demonstrations can be found on the Vectorlight site.

(back to top)

Visifire

One of the early comers to the control front for visualizations was Visifire, providing an Open Source implementation of some charting controls for Silverlight.  They’ve continued to iterate on their offerings (and also provide commercial licensing) regularly.  They provide charting visualizations for:

  • 2-D Column
  • 3-D Column
  • Line
  • Pie
  • Bar
  • Area
  • Doughnut
  • Stacked
  • Bubble/Point/Scatter

Be sure to view the Visifire online gallery for samples of all these charts!

(back to top)

Xceed - http://xceed.com/Grid_WPF_Intro.html

Many should recognize Xceed for their previous components in the Windows Forms world.  Well, you may not have known this but they’ve been providing great controls for WPF and Silverlight?  For Silverlight, they have:

  • Upload
  • Zip

You should really also check out their WPF DataGrid as well that just had an update released (and also has a FREE express version).  It is very feature rich and should provide you with some great value in your applications.  Information about the updated Xceed WPF grid can be found here.  You can also view a demo of their Silverlight platform products on their site as well.

(back to top)

Open Source and Other Silverlight Projects

There are, of course, other Silverlight controls being developed by individuals.  Here’s some that I’ve found as well (Open Source unless otherwise noted):

Media

Reporting

Utility/Input

Gaming/Graphics

Data Visualization/Charting

Themes/Styles

  • reuxables: resource dictionaries for adding pre-configured themes to your Silverlight application

If you know of more, leave a comment!

(back to top)

Summary

So there you have it!  A cast of characters for where you can get components and save time in your Silverlight application development.  If I missed anyone, please comment and I’ll keep this list updated.  I know there are a bunch of individual Open Source projects out there (heck, I’ve got my own as well), so if more people comment and surface those gems, I’ll add them here as well.

This is a great list of those extending our platform and making Silverlight great as well as helping you to be productive and concentrate on other aspects of your application versus building something that already exists.  I’m a HUGE fan of buy versus build most of the time – especially in things like components.

I hope this helps!

| Comments

This has been one of the features that I’ve been excited about for a while since I heard we were changing it.  With the release of Silverlight 2 Beta 2 and the updated preview of Expression Blend 2.5 (June 2008), skinning and styling controls within Silverlight gets a bunch easier.

Sample skins from Corrina Barber

When Silverlight 2 Beta 1 was released there was the possibility of styling/skinning controls.  It wasn’t impossible, but perhaps a bit obfuscated to the eye for people with short attention spans like myself.  You can read more about those methods here and here.  WPF designers were probably laughing that Silverlight developers might have been struggling with skinning controls.  Why?  Because Blend for WPF supports a right-click “Edit Template” functionality for WPF…so where is it for Silverlight?  In the latest release of Blend 2.5 of course!

That’s right—simpler skinning.  At RIApalooza in fact I was asked about how one would know *what* elements could be skinned, etc.  Outside of the docs, and some spelunking, it wasn’t entirely intuitive.  But now, well, let’s take a look.  Let’s take a look at Blend 2.5 June 2008 preview and adding a ScrollBar to our design surface:

You may not realize it but the ScrollBar has a lot of elements that you can skin.  The thumb, the handles, the bar, every little detail…so now in Blend 2.5 we can right-click and choose to edit that:

When you do this you are prompted for some settings, one to name the style and the second of where to put it, either in the document resources or as an application resource that other controls may subscribe to:

After you do this, your objects and timelines explorer (on the left by default unless you’ve moved it) now changes to represent the layered elements of the control you are skinning now.  Note that the “up” arrow will get you out of this mode and back to your documents visual tree of elements.  Here’s what the base template for ScrollBar looks like:

You can continue to dig further.  For example with ScrollBar, if you wanted to modify the Thumb, simply select that in the visual object tree:

then right-click on the Thumb now on the design surface and choose to edit that template and now you’ll see that you can edit the Thumb’s template rather simply:

If I wanted to I can remove the three elements that make up the HortizontalThumb and make my Thumb an Image of myself (horrible design, but proving a point):

I chose ScrollBar in this post, but you can do this with any of the controls and the process is the same.  This now makes skinning a bit more within a closer reach to most.  The reach for developers might be a bit further if you have no design skills…but I’ll gladly send you my picture if you want to use it as your navigational Thumb for ScrollBar.

One other tip is that when you have an element on the design surface that has a template skin attached to it, Blend will help you get there even faster rather than having to right-click further.  At the top there is a breadcrumb like trail and if you are on an element that has a template there will be a “Template” link you can click directly on:

Hope this helps!

| Comments

For Silverlight 2, we finally have some native controls to leverage.  Most of them are to aid in input scenarios.  The text input, however, is currently scoped to be plain text input.  Some have desired a richer input control.  You knew it wouldn’t be long before someone in the community stepped up to the challenge.  Christopher Husse has done just that.

Enter: Silverlight rich text editor.

He posts a detailed description of all the capabilities on Michael Syncs blog.  The effort is also posted on Codeplex for you to peruse.

Here is what he calls the ‘incomplete feature list’:

    • Copy/Paste formatted text between RichTextBoxes and copy/paste from/to clipboard of unformatted but macro-enabled text. This means in windows clipboard even things like emoticons will be kept.
    • You may insert line breaks, unordered lists and blockquotes.
    • You may use various keyboard selection features like End/ Home/ PageUp/ PageDown/ Left/ Up/ Right/ Down, Ctrl+A/ End/ Home, Ctrl+Shift+End/ Home/ Left/ Right, Shift+End/ Home/ PageUp/ PageDown/ Left/ Up/ Right/ Down and so forth…
    • Supports direct Unicode character input using “Ctrl”+[NumPad].
    • All silverlight font formatting is supported and even some more like SUP/SUB formatting.
    • You may define macros and a proper object class that should replace matching text, like emoticons…
    • In contrast to many other rich text editors, this one is fully real-time. That means no preview is required because the editor allows editing all things directly.
    • If you only use macros and IRichTextObject to extend the control, you will automatically get support for secure content serialization of all control elements. Content serialization also supports to reload content and edit it again.
    • Secure content serialization gets rid of any potential security leak when storing user typed formatted text on a server and presenting it to visitors, because it is fully verifiable.
    • You may restrict font formatting to a well defined custom subset. This allows you to ensure that all user typed input matches your needs or website design. (this feature is currently not implemented, but only prototyped)
    • Snapshots allow convenient access to formatted content and also Find&Replace with regular expressions for example…

Way to go Christopher!

| Comments

Very cool think popped in my RSS reader this morning.  Scott Guthrie (now a corp VP, congrats Scott) put up a first look post at Silverlight 2.  Not just a 'here's what is coming' but an 8-part tutorial as well as he built a sample application trying to leverage and demonstrate various parts of Silverlight 2.

These tutorials should be extremely helpful for those wanting to understand some of the newer concepts brought to Silverlight.  If you haven't done a lot (or any) WPF coding before, some of this should jumpstart your knowledge a bit.

take a look at 'First Look at Silverlight 2.'

| Comments

in my previous post i talked about converting rss data to json using the asp.net ajax javascriptserializer class.  i wanted to use this because i wanted an easier way of interacting with some simple data for a sample i was messing with.  i didn't really see the need to wrap it in a web service call, etc. and in the end i wanted json data.  period.

so why did i want the json data?  to mess with it in of course! what i wanted to do was display my rss feed data in a different way, just out of curiosity.  my goal: display my rss data, in my own handwriting, on a post it note.  in silverlight.  here's what i did.

the font

first, i needed my own handwriting in a true type font (fyi: silverlight supports using open type and true type fonts).  so i went on over to the tablet pc powertoys and grabbed the "My Font Tool" -- this is a tool that allows you to ink the alphabet and then it turns it into a true type font for you.  i did that process and boom, i bring you "Tim Heuer Normal":

Tim Heuer Normal TrueType

okay, great, that step is done.  on to the post it.  headed on over to istockphoto.com for a quick gander at some good stuff and snagged a good one for me.  downloaded it with my credits, used expression design to clean it up and it was ready to go, png-style.

the silverlight application

now on to silverlight...i started using expression blend to create my project.  a simple canvas that had my post-it note image on it and then added some TextBlock elements to represent the rss item title and text:

the hosting page for the silverlight control

now in the page that will be hosting the control i had to add the reference to my JSON-ized rss data using my asp.net handler that i previously wrote about.  i ran into a snag here as i suddenly realized that my json-izer just emitted json data.  that's it.  it wasn't referenced in and javascript variable or anything.  in some situations maybe that is fine, but i needed to "set" a variable to the json data to be able to reference the object later.  i quickly added a param to my json-izer to specify a callback method.  what this would do (if present) would emit javascript that basically called a function.  so if you pass in "c=evalRss" it would result in emitting:

evalRss([{...json data...}]);

this would allow me to set the object data to a variable.  in my hosting page i can now add a reference to my json-izer as such:

<script src="http://blah/rss2json.ashx?u=http://feeds.feedburner.com/timheuer&c=evalRss"></script>

of course i needed to implement the function so i added a simple javascript variable and the callback function:

var rss = null;
function evalRss(objGraph)
{
rss = objGraph;
}

as emiril would say "bam" -- now i have an "rss" object to mess around with...okay, moving on.

setting the textblock elements to the rss data

in my quick sample here, i'm only going to use the latest item in the rss feed, but read later on how you could use them all...remember, sample here folks.

i already had a default handleLoad function that was stubbed out for me and wired up by expression blend, so i'll go ahead and use that.  in the handleLoad function i take the control reference, find my TextBlock elements and set them to my rss data (remember, since my json-izer was a script reference, the json data is already there):

handleLoad: function(control, userContext, rootElement) 
{
this.control = control;
this.header = control.content.findName("ItemHeader");
this.itemtext = control.content.findName("ItemContent");
this.header.Text = rss[0].Channel.Items[0].Title;
this.itemtext.Text = rss[0].Channel.Items[0].Description;
}

okay, whew, got that far.  so when i run the application i get:

RSS Data

yeah, data.  yes, i see it to.  the html.  blech.  i'll have to think about that.  but for now, let's move on.  now i did notice that my text blabbed on beyond the image height and for this sample i didn't like that.  no problem...back to blend.  i created a rectangle (no stroke, no fill) that was the same left/top/width/height as my ItemContent TextBlock.  then with a ctrl+click on both those elements (rectangle, textblock) i headed up to the object menu, select path...make clipping path.  done.  my textblock now is clipped at the shape of the rectangle (you'll not the Clip data added in the textblock attributes).

embedding the font

but wait, i'm not done!  i said that i wanted this in my handwriting.  sweet, i'll just set the textblocks to my font...er...um...wait.  argh.  that's not supported (yet).  no worries there is a way!  here's how to go about it (or at least one way).  first add your true type font to your project.

NOTE: fonts usually have licenses with them.  you need to make sure you understand your font's license before you start embedding it all over the place.  in my case, i contacted tim heuer headquarters and they said it was okay.

now, how do i get the font on the textblock.  here's the process i used.  first, i new'd up a downloader object to get silverlight to download the font to the control and thus have access to it.  i put this in my handleLoad event handler because i want the font to be there asap:

 this.downloader = control.createObject("downloader"); 
this.downloader.addEventListener("completed",
Silverlight.createDelegate(this, this.handleFontDownloaded));
this.downloader.open("GET", "timheuer.ttf");
this.downloader.send();

you'll notice that i added an event listener for the "completed" event of the downloader.  that is where the magic happens with two functions: setFontSource and fontFamily (okay, one function, one attribute).  the SetFontSource (setFontSource in javascript) expects a downloader object as the only parameter.  we're going to use the this.downloader object we created above.  we'll do the setFontSource-ing on our TextBlock elements.  after we call that function, then we can go back to the TextBlock elements and set the fontFamily attribute to the named font value.  i call out named because even though your font file might be "timheuer.ttf" that is not the name of the font family.  all this is done in the handleFontDownloaded event handler and looks like this when completed:

handleFontDownloaded: function(sender, eventArgs) 
{
this.header.setFontSource(sender);
this.itemtext.setFontSource(sender);
this.header.fontFamily = "Tim Heuer Normal";
this.itemtext.fontFamily = "Tim Heuer Normal";
}

so what is happening here?  well silverlight has downloaded the font file using the downloader.  we've passed the downloader reference (which is the sender in the downloader completed event) to the setFontSource property of an element (in our case the TextBlock).  once the font source has been set we set the fontFamily.  so how does silverlight know what to look for?  magic i tell you, magic.  because we've set the font source to a downloader (which downloaded a file), that is the location it is now looking for the fontFamily value...and iterates through that downloader until it finds a match...in our case a true type font named "Tim Heuer Normal" to use.  once we have that i re-run the application and here we have:

RSS Data with Tim Heuer Font 

awesome. 

what about more than one font?

but what if you wanted multiple fonts?  would you need multiple downloaders?  no.  you see, the downloader supports compressed (zipped) files.  and it doesn't just have to be fonts.  it could be a mixture of media, fonts, xaml assets, etc.  in fact, that is how zero gravity gets all its assets for the game prior to play.  if you had a zip file that you added the "timheuer.ttf" file into, really the only thing that would change would be the downloader.open() function to downloader.open("GET", "myzipfile.zip") -- your setFontSource and fontFamily code wouldn't change!  if i had two fonts in the zip file then i could change the header to something like this.header.fontFamily = "Knockout C" or whatever other true type font is in the zip file.

having some fun

now that we have all that wired up, we can move things around and make it look like i posted a note just sticking it on the frigde or something -- not linear.  i can simply add a rotatetransform on my canvas and i'll get:

the fonts, etc. change no problems.

so my little quest was complete.  i got my handwriting in my rss feed in silverlight.  yippeee.  now if only i had an investor.

the issues and controls

there were issues as you saw.  first the characters.  the "my font" tool doesn't ask me to write every possible characters, so if i used some that weren't in my font, blech.  the point here is that you'd likely use a cool font that was professional.

the html -- yes.  i'll have to think about this one as i do have a use for this concept coming up.  my rss feed is html.  silverlight doesn't really have an "html" survace...it isn't interpreting <p> as a paragraph break, etc.  in this sample, it might be problematic, but other areas where you have text in textblocks and are embedding fonts you shouldn't have that issue.

what if you wanted to display all rss feeds?  would you need 10 textblocks and set them 10 times?  well, kinda.  my suggestion here is to use the control approach.  i already have the xaml for my post-it display.  i could take that, put it in a control, stuff it into the zip file with my font and have a control i could reference.  (for an example screencast on user controls in v1.0 see this link) for example, i could encapsulate the post-it in a control that looked something like this:

RssNotebook.RssItem = function(control, target, header, desc, x, y, downloader) 
{
this.header = target.findName("ItemHeader");
this.itemtext = target.findName("ItemContent");


this.header.setFontSource(downloader);
this.itemtext.setFontSource(downloader);
this.header.fontFamily = "Tim Heuer Normal";
this.itemtext.fontFamily = "Tim Heuer Normal";
this.header.Text = header;
this.itemtext.Text = desc;
target["Canvas.Top"] = y;
target["Canvas.Left"] = x;
}

then i can extract the RssItem xaml, put that in a file and add it to a zip with my timheuer.ttf file.  I now have a zip with RssItem.xaml and timheuer.ttf.  now with that i can alter my downloader completed event to look like this:

handleFontDownloaded: function(sender, eventArgs) 
{
var top = 0;
for (var i=1; i<3; i++)
{
var postit = this.control.content.createFromXaml( sender.getResponseText("RssItem.xaml"),
true);
this.root.children.add(postit);
new RssNotebook.RssItem(this.control, postit, rss[0].Channel.Items[i].Title,
rss[0].Channel.Items[i].Description, 0, top, sender); top += 100;
}
}

so what you see happening here is two things.  first let me be clear that this is still a sample, and for the control part i added a scale transform to reduce the size of the image just so i could display it here.  okay, what is happening is that i'm iterating through two of the rss items and createing the RssItem control within that iteration (createFromXaml) getting the xaml out of the downloaded zip file.  then in that control i'm doing the fontSource-ing and fontFamily-ing for the TextBlocks represented in their control. 

pretty cool huh?

i hope this may help with some things.  if not, ask me questions.  i've included the sample code in this post to help you out.

File: RssNotebook-single-style.zip</> (sample using single style)
File: RssNotebook-control-style.zip</> (sample using control style with zip file)

if you have any suggestions for other things you'd like to see, keep them coming!