Quick Tip #1

Content wrap is by default not available for Buttons and Hyperlink button for both Windows Phone and Windows RT. But modifying the Content Template allows you to add Text Wrap 🙂

                       <TextBlock Text="{Binding}" TextWrapping="Wrap"/>


May the code be with you! 😀

chops-logo2 small



Saving a Canvas into a PNG file – WP8

This is a familiar situation that most developers run into. The need to save a canvas element to a png file.


  • You have few strokes drawn on a canvas and you want to save it as a png .
  • You want to save the just the strokes on a transparent background.
  • You want to save the strokes along with the canvas background.
  • You want to save it with your specified sizes

I too ran into this ditch lately. And had a tough time finding a solution. A random google search will give you numerous methods, most of which is applicable only to traditional C#/.NET application.

Then I found this MSDN link. I still have’nt figured out how to use a PNGEncoder and DeCoder. If anyone finds a good blog about it, feel free to post it here. Many of the solutions I found never worked. The searches how ever led me to the WriteableBitmapEx hosted at codeplex. It had several useful functions but none to save a canvas to an image.

A week’s search, frustration, irritation,  trial & error of several broken classes finally led me to ToolStack. It is mentioned that it works for Windows Phone 7.1 but I have implemented in WP8 project. There 3 classes which will do the job neatly, although compression is not yet implemented.

  1. ToolStackPNGWriterWBext.cs – Implementation of WriteableBitmapExtensions
  2. ToolStackPNGWriterLib.cs – Core Class and implementation of saving to PNG
  3. ToolStackCRCLib.cs – Additional classes needed for ToolStackPNGWriterLib.

Getting it working on your project.

  1.  Download all necessary files from ToolStack. Download the example too and run it first so that you can understand how it works.
  2.  Add the Classes mentioned to your project.
  3. Create a Writeablebitmap of your canvas and then use the WritePNG function to save
    WriteableBitmap wb = new WriteableBitmap(MyCanvas, null);

And there your image lies in the specified location, in the size of your canvas! 🙂  Remember to add the necessary using statements in your file. Any canvas element can be captured into a WritableBitmap, even an InkPresenter can be captured.


If you try to implement the same functionality in a metro app, you’re in for trouble mate. Because the very simple function which allows to capture a canvas onto a WriteableBitmap does not exist! There is a method to save the inkstrokes though, but only the portion containing the stroke will be saved. You cannot save it along with its transparent/colored background. I consulted few developers and they seem to have no answer too. It seems this is possible in JavaScript.

Lets see if Windows 8.1 contains something for us developers in this direction.

Happy Coding!! 😀

Inking in WindowsPhone 8 – Part 1

Those who are familiar with Windows 8 will know that the platform gives us an elaborate, clean and easy to use InkManager class which allows you all the stroke manipulation you want.

As a part of my new project I was trying out the Inking features in WP8 only to find that there is no InkManager class at all!!. 😦
MSDN gives a meager list of classes to manipulate and interact with ink in windows phone. A quick search in the vast MSDN territory will give you an InkPresenter element which enables you to display the strokes. This does not fit my needs hence, I started the traditional way, to capture the touch inputs and then display them.

Create a canvas in my MainPage and give a white background image for the it.

<Canvas x:Name="InkCanvas2" Height="150" HorizontalAlignment="Left" Width="471" Margin="0" >
<ImageBrush Stretch="Fill" ImageSource="/Assets/theme_img_note.png"/>

Declare MouseMove and MouseLeftButtonDown Event handlers for the canvas in the constructor and define them as follows.

void InkCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 currentPoint = e.GetPosition(InkCanvas); // captures the first point
 oldPoint = currentPoint;

void InkCanvas_MouseMove(object sender, MouseEventArgs e)
 currentPoint = e.GetPosition(this.InkCanvas);

Line line = new Line() { X1 = currentPoint.X, Y1 = currentPoint.Y, X2 = oldPoint.X, Y2 = oldPoint.Y };
 line.Stroke = StrokeColorBrush;
 line.StrokeThickness = StrokeWidth;//I have predefined the color and width for the stroke

line.StrokeStartLineCap = PenLineCap.Round; // This gives a round tip to the line
 line.StrokeEndLineCap = PenLineCap.Round;
 line.StrokeLineJoin = PenLineJoin.Round;

 oldPoint = currentPoint;

😀 . The lines need to be optimized, I’m working on that. Hope this helps somebody!


Here are few references which I found useful.

  1. .MSDN sample
  2. .Net Speaks
  3. Codeguru

In the next post I’l be explaining how to save these images as PNG in folders.

Happy coding!!! 😀

Warm welcome to the latest addition of the Windows Phone family, WP8!

I guess most of the people have started developing for Windows phone 8 and I got a bit caught up with exploring the new terrains of the same. So this article comes in a bit late. Anyways better late than never 🙂

Here’s a small introduction about WP8 for the benefit for those who are new in this arena.

Windows Phone 8 as everyone knows is supposedly Microsoft’s ninja successor of Windows Phone 7.5 (Mango). As a part of unifying the phone, tablet and PC experience into one platform, Microsoft has taken a giant leap of re-engineering its mobile platform so as to share the same NT kernel as its big brother Windows 8. Now what does “shared core” mean to us?

  1. As most of us would unanimously would ask, “Could we use the same code?”.  Yes we can reuse ‘not all’ but ‘most of’ the code that we wrote for Windows 8 app. That’s some relief, but again until we actually delve into the nitty gritty of trying to port Win8 code to WP8, we would never know 🙂 . MSDN has given here detailed notes on how to maximize reuse of code.
  2. We talk different languages, some of us are C++ experts or C# or may be C. The good news is Windows Phone 8 now supports native code. To quote Joe Belfiore “What this means is a game developer who authors an unbelievable, detail-rich, immersive, compelling game experience for the PC has a super-easy port of their native game to the phone,”  And you also can mix C#/XAML with DirectX/C++ or consume native C++ libraries from C# apps. Although there is a small disappoint for the Javascript + HTML guys. Microsoft had allowed Javascript + HTML be to used as UI/coding combination for Windows 8, but it is not available for Windows Phone 8.
  3. In Windows Phone 8, the multitasking capabilities has been improved and expanded to VoIP and background location services.
  4. In-app purchase!! I guess I do not need to explain more.
  5. Other improvements like different screen resolutions, micro SD cards, NFC capabilities, multi-core support and so forth.

The next question that would obviously cross anybody’s mind would be, “What about WindowsPhone 7.5?” Well, the lovely mango remains, but sadly it does not get any update. The major reason being Windows Phone 7.5 had a CE kernel, while WP8 has an NT kernal. WP8 has a higher hardware requirements than that of the older generation windows phones. So I guess it makes sense not upgrading the WP7, even if they had managed, the OS would have crawled in the those devices powered by the lesser specs.

Again now, what it means to developers? What happens to all those apps we made for WP7.5? Is our laborious efforts soaked in sweat and blood getting flushed down the drain? Absolutely not, all apps that run on WP7.5 will run on WP8. You can count on me on that, I tested. 😀 And as expected, it doesn’t work the other way round. The apps which are meant for WP8 would not run on its predecessors.

Few links that can get you started

So thats all for now… Over and out!

Happy coding!! 😀