Windows Phone ImageMergings: Merging Image with Text/Multiple Images(C#-XAML)

Introduction

Hi guys! its quit very interesting concept for me is "Merging multiple image on single image control in windows phone" or "Merging image with text" .However in this post i am going to explain how can we achieve these two Requirements in our windows phone app with c#

Source File:WindowsPhone ImageMergings Sample

Requirements

For this sample no need for extra/third party dll's,just unzip this download sample and run it with your sdk.
Note: 1)This sample is work for both windows phone 7 and 8 sdk
         2)Due to memory limitations, if you operate too many pictures for merge, it will throw an OutOfMemoryException exception.

Description

However we can achieve this by converting our image control to WriteableBitmap and finnaly  render the text/images over the image control and position it, and then save the final merge image to media library.So that we need follow some few steps to meet simplicity

1)How to merge Image with Text

Create WriteableBitmap object as global 

C#

 WriteableBitmap wb;

 Do like this for merging image with Text

C#

private void Mergebtn_click(object sender, RoutedEventArgs e) 
        { 
            wb = new WriteableBitmap((BitmapSource)firstimage.Source); 
            TextBlock tb = new TextBlock(); 
            tb.Text = Txt.Text; 
            tb.TextWrapping = TextWrapping.Wrap; 
            tb.Foreground = new SolidColorBrush(Colors.Black); 
            tb.FontSize = 70; 
            tb.FontWeight = FontWeights.Bold; 
            wb.Render(tb, new TranslateTransform() { X = 25, Y = 191 }); 
            wb.Invalidate(); 
            FinalMergeImage.Source = wb;//Merging Image with text 
            Savebtn.IsEnabled = true; 
        } 

  Do like this for saving merged image to Media Library

C#

 private void SaveMergebtn_click(object sender, RoutedEventArgs e) 
        { 
            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 to media library..."); 
        }

ScreenShot

2)How to merge Multiple Images on single image control

C#

BitmapImage finalImage = new BitmapImage(); 
 WriteableBitmap wbFinal;

C#

private void Mergebtn_click(object sender, RoutedEventArgs e) 
        { 
            string[] files = new string[] { "Roses-Most-Beautiful-485x728.jpg", "Lovely-Sea-House-485x728.jpg"}; // Image list. 
            List<BitmapImage> images = new List<BitmapImage>(); // BitmapImage list. 
            int width = 0; // Final width. 
            int height = 0; // Final height. 
 
            foreach (string image in files) 
            { 
                // Create a Bitmap from the file and add it to the list                 
                BitmapImage img = new BitmapImage(); 
                StreamResourceInfo r = System.Windows.Application.GetResourceStream(new Uri(image, UriKind.Relative)); 
                img.SetSource(r.Stream); 
 
                WriteableBitmap wb = new WriteableBitmap(img); 
 
                // Update the size of the final bitmap 
                width = wb.PixelWidth > width ? wb.PixelWidth : width; 
                height = wb.PixelHeight > height ? wb.PixelHeight : height; 
 
                images.Add(img); 
            } 
 
            // Create a bitmap to hold the combined image  
            
              
            StreamResourceInfo sri = System.Windows.Application.GetResourceStream(new Uri("White.jpg", 
                UriKind.Relative)); 
            finalImage.SetSource(sri.Stream); 
 
            wbFinal = new WriteableBitmap(finalImage); 
            using (MemoryStream mem = new MemoryStream()) 
            { 
                int tempWidth = 0;   // Parameter for Translate.X 
                int tempHeight = 0;  // Parameter for Translate.Y 
 
                foreach (BitmapImage item in images) 
                { 
                    Image image = new Image(); 
                    image.Height = item.PixelHeight; 
                    image.Width = item.PixelWidth; 
                    image.Source = item; 
 
                    // TranslateTransform                       
                    TranslateTransform tf = new TranslateTransform(); 
                    tf.X = tempWidth; 
                    tf.Y = tempHeight; 
                    wbFinal.Render(image, tf); 
 
                    tempHeight += item.PixelHeight; 
                } 
 
                wbFinal.Invalidate(); 
                wbFinal.SaveJpeg(mem, width, height, 0, 100); 
                mem.Seek(0, System.IO.SeekOrigin.Begin); 
 
                // Show image.                
                finalmergeimage.Source = wbFinal;//Mergin Multiple Image into single Image 
                txtblck.Visibility = Visibility.Visible; 
                Savebtn.IsEnabled = true; 
            } 
 
             
        }

ScreenShot  

Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?otherwise it would be very happy ,if you have any thoughts for to implement this requirement in any another way?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)