Google WindowsPhone: Write Text on Image (C#-XAML) | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Friday, 21 November 2014

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:




ImagePixelsAlter

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  
Have a nice day by  :)







4 comments:

  1. Excellent post.But Why picture is losing its clarity after adding text?How to maintain its clarity as in the original pic?

    ReplyDelete
    Replies
    1. Thanks! and I think you are pressing the 'Alter' button.In "AlterImage_Click" event i was alter the odd pixels of image.if you don't want to loose clarity ,then you need not to be execute that code.

      Delete
  2. MouseMove not there is image control WP8.1

    ReplyDelete

Search Engine Submission - AddMe