WindowsPhone: Write Text on Image (C#-XAML)

Introduction:

Recently one of my blog follower was requested for a sample as 'he want to write text on image with MouseMove event'.For this question my previous article is enough but not efficient.Because there i was set text on image at static (x,y) co-ordinates with help of WriteableBitmap. In this sample we need to write text on dynamic (x,y) co-ordinates and so i thought 'WriteableBitmapEx' library is best match for this requirement.Because this library adds more extensions to WriteableBitmap,there by we can do direct manipulation of a bitmap and could be used to generate fast procedural images by drawing directly to a bitmap. 

Requirements:

1)This sample is targeted on windowsphone 8.0 OS
2)Additionally we need to add 'WriteableBitmapExWinPhone' dll from 'http://writeablebitmapex.codeplex.com/'

Description:

Lets start development with following steps
Step 1:

• Open Visual Studio
• Create new project name(Ex: "ImagePixelsAtler")
• Add 'WriteableBitmapExWinPhone' dll from link .(or) you may get dll by unzip this sample source code from below of this post. And make sure dll added to references like this
  

Step 2:

Open MainPage.xaml and add following xaml code having two image controls and one button

XAML

<Grid x:Name="ContentPanel" Margin="5"> 
            <Grid.RowDefinitions> 
                <RowDefinition Height="Auto"/> 
                <RowDefinition Height="Auto"/> 
                <RowDefinition Height="*"/> 
            </Grid.RowDefinitions> 
            <Image Grid.Row="0" MouseMove="Image_MouseMove" Name="OrginalImage" Stretch="Fill" Height="250" Source="/Nature.jpg"/> 
            <Button Grid.Row="1" Content="ALter" Width="200" Height="80" Click="AlterButton_Click" Foreground="#FFD66A6A" BorderBrush="#FF16C71E"/> 
            <Image Grid.Row="2" Name="AlterImage" /> 
 </Grid>

Step 3:

Initialize the WriteableBitmap with OrginalImage on page load.

C#

private WriteableBitmap writeableBmp; 
        private void MainPage_Loaded(object sender, RoutedEventArgs e) 
        { 
            // Init WriteableBitmap 
            writeableBmp = new WriteableBitmap(OrginalImage,null); 
            writeableBmp.Invalidate(); 
        }

Step 4:

Get (x,y) co-ordinates of selected image area on MouseMove Event and fill writeableBmp with rectangle to draw text on original image.

C#

private void Image_MouseMove(object sender, MouseEventArgs e) 
        { 
            var mp = GetMousePoint(e); 
            writeableBmp.FillRectangle(mp.X, mp.Y, mp.X +5, mp.Y +5, Colors.Red); 
            OrginalImage.Source = writeableBmp; //set drawable text on image
        }

Note:Here to get (x,y) co-ordinates of image selected area, we need add two helper classes ControlPoint.cs ,Vector.cs which is available from sample source code of this article.

Step 5:

If you want to alter specific image pixels and replace with your object value. you can do this with existing WriteableBitmap class like this ,

C#

private void AlterImage_Click(object sender, RoutedEventArgs e)  
        {  
            ImagePixelsAlter(new ExecuteAction((bitmap) => {AlterImage.Source = bitmap; }));  
        }  
//A method for altering specific pixels of given image   
        public void ImagePixelsAlter(ExecuteAction action)  
        {  
            WriteableBitmap writeableBitmap = new WriteableBitmap(OrginalImage, null);  
            for (int i = 0; i < writeableBitmap.Pixels.Count(); i++)  
            {  
                if (i % 3 == 0) //here i am trying to alter odd pixels of image 
                {  
                    writeableBitmap.Pixels.SetValue(-95756, i);  
                }  
            }  
  
            action(writeableBitmap);  
        }  
        public delegate void ExecuteAction(WriteableBitmap bitmap);

Outputs:

FeedBack Note:

Please share your thoughts,what you think about this post,Is this post really helpful for you?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 :)