Nine-Patch Image in Windows Phone

Question

In Windows Phone UI Design Principle, MS recommended use solid color rectangle or coding-gradient for Control Background to avoid incompatible in multi-screen. But in many requirements, using image as Control Background is necessary. Then, 9-patch image technique is used. In Android and IOs, it was support in core, but in WP it is lacking. I try to use it in WP by 3 approaches:

1. Using 9-cells Grid: clip image into 9 patch and lay them into cells. It works ok, but i afraid app performance reduce when has many control.

2. Using Custom Brush: only custom Brush to draw 9-patch image as ImageBrush, but seem MS not allow for custom Brush.

3. Using FramworkElement: like Rectangle, Ellipse... i want to create a FrameworkElement can draw a 9-patch image. But, can't use low-level render.

How can i implement 2nd and 3th approach?

Answer 1

You can compensate for the lack of low-level rendering and custom brush by using a WriteableBitmap: http://msdn.microsoft.com/en-us/library/system.windows.media.imaging.writeablebitmap(v=vs.95).aspx

This way, you have complete control on how to render your background, then you can assign it to a single Image control. But it's way more complicated than the "use a grid with 9 image controls" method, and the performance improvement is probably insignificant.

Answer 2

I created a lib for Windows Phone which do exactly as Android NinePatchDrawable. You just need to set a bitmap image.9.png, the width and heigh... And done!!! you have you new image scale to the size you want. Enjoy it :). In the future I will add more option :).

GitHub link