.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Sandeep Singh

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Tic Tac Toe - Silverlight Drawing Basics

Posted By:Jean Paul       Posted Date: May 18, 2011    Points: 200    Category: Silverlight    URL: http://www.dotnetspark.com  

A small silverlight application with canvas and UI Elements basics.

Tic Tac Toe - Silverlight Drawing Basics

Silverlight is being on high recognition in the industry and it is really cool!

In this article I am trying to create a marker control that allows the user to mark certain areas on the image canvas.  This will work as the drawing board for our Tic Tac Toe game.  We can see the usage of Canvas and its Children property applied with the Line class.

Screen Shot of Application

The application provides with a layer of buttons on choosing the pen, eraser or the color selector.  The board is represented by a Canvas class.


In this application, the Canvas instance serves as our main drawing board.  The canvas is named BoardCanvas.  The drawings over the canvas are captured as Line objects and added to the Children property of the canvas.  The Children property accepts of type UIElement.


The Line instances are used whenever the user marks over the board.  For each stroke a number of line objects are created to represent the stroke.  The user can choose two colors from the screen.

Repeating  that the line objects are created and added to the Children property of the canvas.



The delete functionality allows the user to delete the line under mouse cursor position.  This helps the user to remove an unwanted line.

The functionality is implemented by taking the mouse X, Y position and parsing through the line collection.  Each line's X, Y will be checked with the mouse positions and if a match found, the line is deleted from the canvas object.


There is a Clear button on the screen that will clear the board canvas.  This will quickly help the user to restart the game.

The functionality is implemented by clearing all the lines from the canvas Children property.


Source Code

The associated source code is attached with the article.  The core is the Silverlight application and there is an ASP.NET application to host the Silverlight part. 

The application is built using Silvelight version 4.0.

 Functionality Explained

The enumeration Mode is used to represent the active drawing mode of the application.  When the application starts, the default mode will be Draw.

    public enum Mode







When the user presses the Pen button, the mode will be set to Draw.

private void PenButton_Click(object sender, RoutedEventArgs e)


    _mode = Mode.Draw;



When the user presses the Delete button, the mode will be set to Delete.

private void Delete_Click(object sender, RoutedEventArgs e)


    _mode = Mode.Erase;



When the user presses, the Clear button, there is no mode change - the ClearAll() method is called.  The ClearAll() method will clear the Children property of the canvas and resets the mode to Draw.  There is a private variable _lines which is used to hold all the lines of the drawing.

private void ClearAll()


    foreach (Line line in _lines)





    _mode = Mode.Draw;



After calling the Clear() method the board will look like below.



In this article we have attempted to get familiar with UI Elements like canvas and line classes.  Hope you enjoyed the little code and the game!!

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend