Favorite Tool and Library Downloads for Silverlight

I’ve created my list of favorites tools and libraries and posted them to the Downloads page on the Project Rosetta site.

After posting the updated list yesterday I realized I missed two big ones: SilverSprite and Balder.

Breaking the new list down into categories, I ended up with 3 Essential, 4 Optional and 10 Specialty downloads.

That’s 17 useful tools and frameworks for Silverlight, that are all mostly free and open source.

Thanks Silverlight community, you rock.

What are your favorite downloads for Silverlight?

Flash to Silverlight Guide – Graphics, Images and Display List

The second edition of the Flash to Silverlight Guide has been posted!

This edition includes new sections on Graphics and Images and Displaying Objects, as well as a bit of a facelift to the site.

Some of the previous feedback included:

“I wish I would have this when I first started on Silverlight”

– Perfect, we’re hoping to help people just getting started.

“There’s a lot of information on the pages, but its pretty dry.”

– Totally agreed.  So along with other graphics and code samples, I spent some time putting together scenes of the new “movieclip guy” acting out the different properties. Not only does this decrease the dryness and encyclopedia-ish nature of the guide, the icons can also act as quick visual hints.

One of my favorite parts about the artwork is that it comes from a group of assets for a new site that is in the works. Unfortunately I can’t share anything about the site just yet, but I did get the ok to preview the graphics. And the site is going to rock.

Anyways, enough about the graphics, enjoy the Guide.  Next on the list are the Animation, Code techniques and Out of Browser sections.

Converting Hexadecimals to Colors in code for Silverlight

Coming from other platforms like HTML, CSS, JavaScript and Flash you will be used to defining colors with hexadecimal values.  Silverlight does support the use of hexadecimal values in XAML, in fact it supports 4 different formats (rgb, argb, rrggbb and aarrggbb). These values are then converted using a special type converter during the parsing of the XAML file.  A string value of #000 is converted into a Color structure that will render black as expected.

Unfortunately this type conversion is not readily accessible when working in code.  In code there are two options built-in, the FromArgb method and system-defined colors.

//using the FromArgb method 
ellipse.Fill = new SolidColorBrush (Color.FromArgb(255, 29, 177, 0));

//using a system-defined color 
ellipse.Fill = new SolidColorBrush (Colors.Green);

As a fan of defining colors using hexadecimals, like myself, you may find switching to bytes in code bothersome. Happily we can do something about this.

The code sample below converts an unsigned integer, which can be written in hexadecimal format, into a Color structure.  Not only are we avoiding string parsing by using the uint type and bitwise operators, we’re also taking advantage of extension methods in C#. This allows us to extend the uint type and reuse this method anywhere in code that has a reference to our ColorExtensions class.

//extensions must be defined in a non-generic static class
public static class ColorExtensions
{
   public static Color ToColor(this uint argb)
   {
      return Color.FromArgb((byte)((argb & -16777216) >> 0x18),
                            (byte)((argb & 0xff0000) >> 0x10),
                            (byte)((argb & 0xff00) >> 8),
                            (byte)(argb & 0xff));
   }
}

//sample usage within a different class
ellipse.Fill = new SolidColorBrush (0xFF1DB100.ToColor());

And that’s it! You can now define color values using hexadecimal in your XAML and C# code.

(If you’re new to Silverlight and want to learn more about the SolidColorBrush class referenced and Brushes in general, check out the Brushes in Silverlight documentation.)

SilverlightShow Eco Contest – win a trip to MIX10

The SilverlightShow EcoContest is a cool opportunity for Silverlight designers and developers to show off their creativity and data visualization skills.

Here’s an excerpt from the site:

We are inviting you to create a web application using Microsoft® Silverlight™ technology that helps raise social awareness of environmental damage, and inspires individual or group actions that reduce the harmful impact on climate change.

To name a few examples, your application may:

• show an interesting animation illustrating current and potential damage to environment; may display in an original way slogans and appeals to save the environment
• help estimate the quantity of poisonous emissions (and money) a person saves by doing specific actions, like riding a bike rather than driving a car, adjusting your heating devices to a lower temperature, etc.
• educate how many years it takes to have a trashed material decompose completely
• explain what home, gardening, office activities may be undertaken to reduce contamination and carbon emissions

Not only will I be looking at the entries to see what people come up with, I also have the honor of being a judge for the contest. You have until Feb. 15th to enter your submission. So get creative and “wow” us with your work and we’ll award you a trip to MIX10!

Image Blitting in Silverlight with WriteableBitmapEx

During a conversation with Jesse Freeman, AKA the Flash Bum, he directed me to one of his tutorials on image composition with Flash. The tutorial, called Create Random Torn Photos with Actionscript 3.0, demonstrates a very cool way to dynamically apply a torn weathered effect to a photo.

The question then came into play – can you do this in Silverlight?

The answer – yes, yes you can.

Let me explain how I was able to accomplish the same effect.

In Silverlight, the WriteableBitmap class is used to manipulate bitmap data. The current class is pretty low-level, providing access to the bits, but not many convenience features. Thankfully a few community members have started an open source library called WriteableBitmapEx. This library extends the functionality of the WritableBitmap class to include methods for drawing, blending and more.

This was a great start, but for this project two blend modes were missing – Mask and Multiply. I spent a little time implementing the new Blend modes and have since checked them back into the project.  (Thanks go to René Schulte for then optimizing and formatting the code)

With the right pieces in place now came the simple process of compositing. The first step was to randomly select one of the skins and load the separate parts of the skin along with the photo:

//randomly select a skin
Random r = new Random();
int skinNum = r.Next(1, 7);
string base_url = string.Concat("/TornPhotoDemo;component/images/skin", skinNum);

//load the different parts of the skin, using a helper method 
WriteableBitmap maskBmp = LoadBitmap(base_url + "/photo_mask.png");
WriteableBitmap textureBmp = LoadBitmap(base_url + "/photo_texture.jpg");
WriteableBitmap edges_maskBmp = LoadBitmap(base_url + "/photo_edges_mask.png");

//load the photo
WriteableBitmap bmp = LoadBitmap(base_url + "/photo.jpg");

Then using the extension method Blit and the new BlendMode, use “photo_mask.png” to mask the photo. Effectively replacing the alpha of each pixel in “photo.jpg” yet keeping the color data.

//mask the photo
bmp.Blit(cRect, maskBmp, cRect, WriteableBitmapExtensions.BlendMode.Mask);

Then using the same Blit method and the other new Blend Mode, multiply the color values of the photo and the “photo_texture.jpg”.  This darkens the colors and adds the crumpled effect.

//apply the multiply effect to the photo with the texture image (3 times)
bmp.Blit(cRect, textureBmp, cRect, WriteableBitmapExtensions.BlendMode.Multiply);
bmp.Blit(cRect, textureBmp, cRect, WriteableBitmapExtensions.BlendMode.Multiply);
bmp.Blit(cRect, textureBmp, cRect, WriteableBitmapExtensions.BlendMode.Multiply);

For more wear and tear, a ripped edges bitmap is created using “photo_texture.jpg” as the base. A different mask image “photo_edges_mask.png” is used to then cut it down to a few edges.

//use the texture as the base for the torn edges
edgesBmp.Blit(cRect, textureBmp, cRect, WriteableBitmapExtensions.BlendMode.None);
edgesBmp.Blit(cRect, edges_maskBmp, cRect, WriteableBitmapExtensions.BlendMode.Mask);

Now its time to use the AlphaBlend mode to then blit the edges bitmap and the crumpled photo bitmap together.  The photo mask is then run again to ensure the edges to run over the originally masked size.

//alpha blend the edges onto the mask
bmp.Blit(cRect, edgesBmp, cRect, WriteableBitmapExtensions.BlendMode.AlphaBlend);
//mask the photo again
bmp.Blit(cRect, maskBmp, cRect, WriteableBitmapExtensions.BlendMode.Mask);

And there you have it a randomly torn photo created dynamically in code. One of the things pointed out by Jesse is at the end of tutorial is the file sizes.  Saved off by itself the image above was 478k, individually the plain photo and the skin parts equal 104k. That’s 374k less memory and its dynamically generated. That’s kick-ass.

Thanks to Jesse for the concept and code and thanks to the WritableBitmapEx team for their work.

Download the TornPhotoDemo source

Run the live TornPhotoMaker lab