Welcome to MSDN Blogs Sign in | Join | Help

Something fun for the little ones [SilverlightKidsDoodler develops mouse skills!]

When I'm working on the computer and my toddler is around, she usually wants to "type" - which consists mostly of hitting all the keys to see the letters appear on the screen. A maximized Notepad window works pretty well for this purpose, though the occasional modal dialog (ex: open file, change font) gets in the way and requires parental assistance. I've tried using Paint to let her "draw" and develop basic mouse skills, but the Paint user interface is not great for young children. Paint's input elements are small and hard for a beginning mouser to click and there are lots more of them than a beginner really needs.

So I decided to use Silverlight to write a very simple Paint-like program for kids. SilverlightKidsDoodler looks like this (the artwork is mine; yes, I'm keeping my day job):

SilverlightKidsDoodler Demonstration Page

You can click here (or on the image above) to try SilverlightKidsDoodler in your own browser. As usual, I've made the complete source code available, so click here to download the source code and play around with it yourself! (To build the project, you'll want to use Visual Studio 2008 Beta 2 and the latest Silverlight Tools.)

Notes:

  • The user interface elements (the color palette and action buttons at the left of the frame) are flush with the edges of the screen (when zoomed) to make them easy for young hands to target. (Bruce Tognazzini has more on Fitts's Law here.)
  • The "Zoom" button switches to Silverlight's full-screen mode. Unlike the other input elements which respond to a single-click, the zoom button requires a double-click to avoid accidental triggering by children. I figure the parent will start SilverlightKidsDoodler, zoom it, and then let the child play around without needing to worry about clicks on the close button, start menu, etc..
  • If you're serious about keeping children from inadvertently messing up your computer, you probably want to consider something like Windows SteadyState which makes it easy to lock-down your computer and avoid questions like, "Sweetie, where did all of daddy's documents go?". :)
  • As my daughter grows older and becomes more proficient, I'm thinking of moving her to something like Edubuntu which comes with a variety of educational applications already installed.

SilverlightKidsDoodler is an extremely simple drawing program that's intended to help young children learn basic mousing skills while having fun doing something they already enjoy. Silverlight made the implementation easy, and hosting the application on the web means "installation" is trivial!

Published Monday, October 15, 2007 9:38 PM by Delay
Filed under:

Attachment(s): SilverlightKidsDoodler.png

Comments

# Techy News Blog » Something fun for the little ones [SilverlightKidsDoodler develops mouse skills!]

# MSDN Blog Postings » Something fun for the little ones [SilverlightKidsDoodler develops mouse skills!]

# Silverlight Cream for October 16, 2007

Tuesday, October 16, 2007 4:45 PM by WynApse

Silverlight Cream for October 16, 2007

# October 25th Links: ASP.NET, ASP.NET AJAX, Visual Studio, Silverlight and IIS 7.0

Thursday, October 25, 2007 4:51 AM by BusinessRx Reading List

Here is the latest in my link-listing series . Also check out my ASP.NET Tips, Tricks and Tutorials page

# October 25th Links: ASP.NET, ASP.NET AJAX, Visual Studio, Silverlight and IIS 7.0

Thursday, October 25, 2007 4:52 AM by Community Blogs

Here is the latest in my link-listing series . Also check out my ASP.NET Tips, Tricks and Tutorials page

# October 25th Links: ASP.NET, ASP.NET AJAX, Visual Studio, Silverlight and IIS 7.0

Thursday, October 25, 2007 4:56 AM by ASP.NET

Here is the latest in my link-listing series . Also check out my ASP.NET Tips, Tricks and Tutorials page

# October 25th Links: ASP.NET, ASP.NET AJAX, Visual Studio, Silverlight and IIS 7.0

Thursday, October 25, 2007 5:06 AM by Elan Hasson's Favorite Blogs

Here is the latest in my link-listing series . Also check out my ASP.NET Tips, Tricks and Tutorials page

# re: Something fun for the little ones [SilverlightKidsDoodler develops mouse skills!]

Thursday, October 25, 2007 11:43 AM by BigTundra

Couple of questions why did you use just a plain canvas instead of the inkpresenter element.  Or at least I don't see where you have used it yet.  Also since you can do all the drawing on a canvas, what functionality does the inkpresenter give you that you can't get with a plane canvas.  Lastly, is there a way to save the image...that would be cool.

Thanks!

# re: Something fun for the little ones [SilverlightKidsDoodler develops mouse skills!]

Thursday, October 25, 2007 12:48 PM by Delay

BigTundra,

I went with Canvas vs. InkPresenter because my needs were very simple and I already had experience with Canvas. I've heard that InkPresenter is also very easy to use, so I probably could have used it without much difference. In general, it's my understanding that ink-supporting controls typically have more "fidelity" than normal ones because the ink ones are often used for handwriting recognition. For example, ink may sample input at a higher rate, respond to input pressure, or detect common gestures. All cool things, of course, but none of which were directly relevant to my application. :)

Regarding the desire to save the image, I considered it, but Silverlight's security model doesn't allow you to write to arbitrary files on disk, so it wasn't immediately clear where to save the image. (There's IsolatedStorage, but that wouldn't give me an image file I could copy around and view in Windows.) For now, the preferred method of saving the image is: Print Screen, open "real" Paint, Paste, Save. :)

# re: Something fun for the little ones [SilverlightKidsDoodler develops mouse skills!]

Tuesday, December 11, 2007 9:28 PM by EvanBasalik

The link above appears to be no good.  It takes me to a Silverlight Alpha download page.  Is there a more recent link?

# re: Something fun for the little ones [SilverlightKidsDoodler develops mouse skills!]

Wednesday, December 12, 2007 12:21 AM by Delay

EvanBasalik,

The link works fine for me. The app requires Silverlight 1.1 Alpha, so if it's not already installed on your machine, then it's correct to be pointed to the install location.

Hope this helps!

# Silverlight 文章收集

Monday, July 21, 2008 10:40 PM by 木野狐(Neil Chen)

(以下内容全部整理自博客堂Scottgu博客中文版)Silverlight技巧,诀窍,教程和链接 【原文地址】SilverlightTips,Tricks,...

# re: Something fun for the little ones [SilverlightKidsDoodler develops mouse skills!]

Thursday, April 02, 2009 7:54 PM by windrago

Do you have an updated version?

# re: Something fun for the little ones [SilverlightKidsDoodler develops mouse skills!]

Friday, April 03, 2009 2:30 PM by Delay

windrago,

No, sorry, I haven't updated this sample for SL2 or SL3. If you're just looking for some of the same concepts (and not specifically the child-friendly approach I took), you might check out this link instead: http://www.silverlightbuzz.com/2009/03/15/building-a-paint-application-in-silverlight-using-the-line-element/

Hope this helps!

Anonymous comments are disabled
 
Page view tracker