Introduction to custom designers

Yogev Cohen is writing a series about creating your own custom designers, which is useful if your create control libraries or you are just intrigued about how this things work.

1. Create your own Designer or Introduction To Custom Designers – Part 1- Designer
2. Create your own Designer or Introduction To Custom Designers – Part 2- UI, Glyphs

And he had promise me to post about custom designer for WPF controls in the future!!

ScrollViewer Frustrations Moments

Let say that you have a custom control that uses the command ApplicationCommands.Copy, and you expects that when you press Ctrl+C the command is executed, so far so good.

Now you want to wrap your control with ScrollViewer, that’s ok.

And you expect that the Ctrl+C will be handled, yes?

Well… NOOOOO!

Why! Because ScrollViewer overrides the OnKeyDown method and it’s preventing it to bubble any further.

Not an expected behavior in my opinion.

What to do? Set the Focusable property of the ScrollViewer to false, and it’s done.

Embedding Bitmaps inside XAML

I needed a type of BitmapSource that allows me to embed an image inside a XAML file. WPF has a number of derived BitmapSource classes, each one for its specialized task, one specific, BitmapImage, allows you to load images using XAML, but BitmapImage refer to external images in XAML files and does not embed images in a XAML file.

So I decided to create my own class to achieve the task.

What did I do?

1. A BitmapSource derived class that expose a property with the bitmap info and can act as a reference to another BitmapSource.
2. A container struct, BitmapInfo, to hold all the information needed to reconstruct the image, pixel array, size, format, etc.
3. A TypeConverter that convert BitmapInfo to a serialized byte64 string and vice versa.

Using the EmbeddedBitmapSource is seamless as using any other derived BitmapSource class. For example:

Image myImage = new Image();

BitmapImage bmpImage = new BitmapImage( new Uri( “someimage.jpg” ) );

myImage.Source = new EmbeddedBitmapSource( bmpImage );

I included the sources with a sample application that let you save the image into a XAML file (the XAML file can be found after saving where the assembly is) and later to load it.

On the upper right side is the original image and on the lower part of the window is the embedded image that was loaded from the XAML file.

Source code (VS2008 project) can be downloaded from here (Remember to change the .DOC extension to .ZIP)

By the way, I took the picture some year ago in Chile near Puerto Tranquilo. In Lake General Carrera are marble caves formations, called the Capilla de marmol and Catedral de marmol that were carved by water over time. One of those from a specific angle a dog’s head can be seen.