Sharker Khaleed Mahmud Silverlight Tips & Tricks

September 25, 2010

90. Drawing on Image in Silverlight

Filed under: Silverlight — Tags: — Sharker Khaleed Mahmud | shamrat231 @ 6:26 AM

[tweetmeme source=”shamrat231” only_single=false]

In last entry, I talked about drag-and-drop image. In this I will write about how you can draw on your image and maybe in next post save it. Today for drawing, I will use InkPresenter.

You can see the live example here [live demo]   

The SOURCE CODE(.zip) is at the end of the page for download.

Lets look at initial coding.

    <Grid x:Name=”LayoutRoot” Background=”Black”>
        <InkPresenter x:Name=”ink” MouseLeftButtonDown=”ink_MouseLeftButtonDown” MouseMove=”ink_MouseMove” MouseLeftButtonUp=”ink_MouseLeftButtonUp”  />
        <Canvas Width=”800″ Height=”545″>
        <Image Source=”Images/Rain_Dance_03_by_fbuk.jpg” />
        </Canvas>
    </Grid>

As you can see in the above code, I have added 3 event handlers. Lets talk about the first one.

        private void ink_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
 // while pressed, we want to start drawing
        }

So here goes the code.

        private void ink_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            //capturing the ink
            ink.CaptureMouse();
            //current set of point collection
            StylusPointCollection points = e.StylusDevice.GetStylusPoints(ink);
            currentStroke = new Stroke(points);
            //set color of stroke
            currentStroke.DrawingAttributes.OutlineColor = Colors.White;
            currentStroke.DrawingAttributes.Color = Colors.White;
            //adding current stroke
            ink.Strokes.Add(currentStroke);
        }

Now comes the mouse move region. In here we are adding the points to our current stroke.

        private void ink_MouseMove(object sender, MouseEventArgs e)
        {
            if (currentStroke != null)
            {
                StylusPointCollection points = e.StylusDevice.GetStylusPoints(ink);
                currentStroke.StylusPoints.Add(points);
            }
        }

and the last part where we release and reset everything….

        private void ink_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            //releasing the inkPrensenter
            ink.ReleaseMouseCapture();
            //setting to null so when mouse moved when not pressed…no draw.
            currentStroke = null;
        }

Now, lets run the app. Try drawing, nothing happens. So basically we have made an obvious mistake.  If you look at the xaml coding, we have set the ink presenter behind the image. So no wonder, nothing gets drawn. Lets fix it.

MainPage.xaml

    <Grid x:Name=”LayoutRoot” Background=”Black”>
        <Canvas Width=”800″ Height=”545″>
        <Image Source=”Images/Rain_Dance_03_by_fbuk.jpg” />
        </Canvas>
        <InkPresenter x:Name=”ink” Background=”Transparent” MouseLeftButtonDown=”ink_MouseLeftButtonDown” MouseMove=”ink_MouseMove” MouseLeftButtonUp=”ink_MouseLeftButtonUp”  Cursor=”Arrow” />
        <HyperlinkButton Content=”Developed by Sharker Khaleed Mahmud. Available at http://silverlightips.net” IsTabStop=”False” Height=”30″ VerticalAlignment=”Top” HorizontalAlignment=”Center” Foreground=”White”  />
        <TextBlock Text=”Press your mouse and start drawing…” VerticalAlignment=”Bottom” HorizontalAlignment=”Right” FontSize=”24″ Foreground=”White” />
    </Grid>

Run the app. It should work. Now let’s try drawing on the image. I took the image from deviant art gallery for demonstration purpose.

In this way, we can customize any image and give the feeling of personal touch. In next entry, I will talk more about saving this image.

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Advertisements

8 Comments »

  1. […] Drawing on Image in Silverlight (Sharker Khaleed Majmud) […]

    Pingback by Windows Client Developer Roundup 043 for 9/27/2010 - Pete Brown's 10rem.net — September 27, 2010 @ 4:51 AM

  2. Hi,

    Have you published the post where you save the image?
    I am very interested in know how to save an image which has been rendered on a canvas, in Silverlight 3.

    Regards

    Comment by Quique — November 9, 2010 @ 5:26 PM

    • ah…no, there are some excellent article already exist which deals with saving image as jpg/png. As a result i didnot write as there was nothing new/original i could add to existing work that has already been done and shared.

      Comment by Sharker Khaleed Mahmud | shamrat231 — November 12, 2010 @ 3:29 PM

  3. Hi,
    can u guide me how to save the image from silver light Ink Presenter.i’m trying from the last one week. even i don’t know silver light.. pls help me.

    Comment by Kayal — January 31, 2011 @ 10:38 AM

  4. Hi! Can you post a code sample for saving the image with inkpresenter? I’m currently having a problem saving them. thanks! 🙂

    Comment by Help — March 29, 2011 @ 6:27 AM

  5. I agree with your point of
    view, I think it can be better, hope everyone express their opinions, you point of view I think it is very
    comprehensive, and thank you for sharing, wish you good health, good luck.

    Comment by warcraftjhd — June 16, 2011 @ 11:48 PM

  6. this is very good.
    Regards

    Comment by Bursepheque — August 15, 2011 @ 3:05 PM

  7. Cant download the source code, can you please republish it.

    Comment by aneel12 — May 23, 2012 @ 12:32 PM


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: