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.
Canvas
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.
Line
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.
Delete
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.
Clear
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.
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
{
None,
Draw,
Delete
}
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)
BoardCanvas.Children.Remove(line);
_lines.Clear();
_mode = Mode.Draw;
}
After calling the Clear() method the board will look like below.
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 Silverlight version 4.0.
Summary
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!!