Share via

Step-by-step tutorial to merge text on image (customize live tiles) and save it into the media library - Windows Phone 8 - Visual Studio 2012 using C#

Would you like to update your live tiles to a customized one? Here is the step by step tutorial on how to merge text on an image.

To merge text and image into a single image, we have to convert the image to a writable bitmap, render the text over the image and position it, and then save the image.

Let’s say I have an image “myImage”

morning

1) Create a textblock and name it “textblock1”

2) Assign some text to the textblock

     textblock1.Text = “Good morning”;

3) Convert the image to a writeable bitmap

          WriteableBitmap wb = new WriteableBitmap((BitmapSource)myImage.Source);

4) Position the textblock over the writeable bitmap

          wb.Render(textblock1, new TranslateTransform() { X = 25, Y = 191 });
          wb.Invalidate();

5) Save the image as jpeg to the media library

          using (MemoryStream stream = new MemoryStream())
          {
              wb.SaveJpeg(stream, wb.PixelWidth, wb.PixelHeight, 0, 100);
              stream.Seek(0, SeekOrigin.Begin);
              using (MediaLibrary mediaLibrary = new MediaLibrary())
                  mediaLibrary.SavePicture("Picture.jpg", stream);
          }
          MessageBox.Show("Picture Saved...");

gm

Comments

  • Anonymous
    September 10, 2013
    media library is not available in my visual studio express 2012.how can i save the image?

  • Anonymous
    October 25, 2013
    Hi Shamlia: Which namespace should one add for medialibrary, I'm using VS 2012 ultimate ? Furthermore, what sort of object is this "myImage" ? Considering I'm using System.Windows.Media.Imaging.BitmapImage object for myImage, then is this typecasting to WriteableBitmap OK ?                System.Windows.Media.Imaging.BitmapImage bmpImage = new   System.Windows.Media.Imaging.BitmapImage();                bmpImage.SetSource(e.ChosenPhoto);                WriteableBitmap wb = new WriteableBitmap((BitmapSource)bmpImage);

  • Anonymous
    November 09, 2014
    How to view Image,image after you've written on it. Can you help me? Than you