Draw Text on Image Control in Windows Phone

Introduction

For this question my previous article is enough but not efficient. Because there I set the text on the image using static (x,y) co-ordinates using WriteableBitmap. In this sample we need to draw text on dynamic (x,y) co-ordinates on a touch move and so I thought the "WriteableBitmapEx" library is the best match for this requirement. Because this library adds more extensions to WriteableBitmap, thereby we can do direct manipulation of a bitmap and could be used to generate fast procedural images by drawing directly to a bitmap. 

Requirements:

• This sample is targeted to the Windows Phone 8.0 OS 
• Additionally we need to add the "WriteableBitmapExWinPhone" DLL from http://writeablebitmapex.codeplex.com/

Description:

Let's start development with the following procedure.

Step 1

• Open Visual Studio
• Create a new project and give it a name (for example: "ImagePixelsAtler")
• Add the "WriteableBitmapExWinPhone" DLL from the link (or) you may get the DLL by unzipping this sample source code from the following of this article. And make sure the DLL is added to the references as in the following:

Step 2

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

XAML code

<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# code

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 the selected image area on the MouseMove Event and fill the writeableBmp with a rectangle to draw the text on the original image.

C# code

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 the image selected area, we need to add two helper classes ControlPoint.cs ,Vector.cs that are available from the sample source code of this article.



Step 5

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

C# code

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);

Output






This article is also available at my original blog link.