It’s funny - I work on Silverlight all day and then I come home and work on… Silverlight. I was working on a project last night, and my wife said “Oh, that’s kind of like an Etch-A-Sketch”. I then felt compelled to build a Silverlight Etch-A-Sketch, so here it is. The whole project took me a total of 45 minutes, and the majority of that was spent trying to find a background image that was big enough to suit my needs.
The application starts out by setting the X and Y values of a point to the center of the drawing surface. Each time one of the arrow keys is pressed, the “cursor” moves in that direction, leaving a point on the drawing surface. I initially had the project set up to use a polyline object, and add points to the PointCollection as the arrows were pressed, but I found a quirk with that functionality. Instead, I created a “pointEllipse” user control, which is a 1×1 pixel ellipse the color of the “pen” that draws on the drawing surface. Each time you press a key, an instance of the pointEllipse is placed on the drawing surface at the appropriate location.
Here’s how the code breaks down:
I set up a new point object to hold the next coordinates assigned each time the cursor moves. X and Y store the current X and Y location of the cursor. Step defines the distance the cursor will travel each time a key is pressed.
Point nextPoint = new Point();
double x;
double y;
double step = 1;
Next, I get the center of the drawing canvas and place a copy of the pointEllipse element there. Also, a few event listeners are wired up. One to take user input on KeyDown, one when the “Shake It!” button is pressed to clear the drawing, and one when the “OK” button is pressed on the instruction pane.
public Page()
{
InitializeComponent();
x = drawingCanvas.Width / 2;
y = drawingCanvas.Height / 2;
nextPoint.X = x;
nextPoint.Y = y;
pointEllipse pE = new pointEllipse();
pE.SetValue(Canvas.LeftProperty, x);
pE.SetValue(Canvas.TopProperty, y);
drawingCanvas.Children.Add(pE);
this.KeyDown += new KeyEventHandler(Page_KeyDown);
clearButton.Click += new RoutedEventHandler(clearButton_Click);
okButton.Click += new RoutedEventHandler(okButton_Click);
}
When the app loads, the background is drawn and the center point is added. The instruction pane is shown. When the “OK” button is pressed, the instructions are hidden with the following event handler.
void okButton_Click(object sender, RoutedEventArgs e)
{
instructions.Visibility = Visibility.Collapsed;
}
When keys are pressed, the event handler code adjusts the X or Y value depending upon which key was pressed. If the X or Y values go beyond the boundaries of the drawing canvas, they are not permitted to advance. The adjustments you see in the boundary code checks are because I got a little sloppy when I put the drawing canvas in place. Once the keyboard input is handled, a function called doDraw() is called.
void Page_KeyDown(object sender, KeyEventArgs e)
{
switch (e.Key)
{
case Key.Up:
y -= step;
if (y <= 17) y = 17;
break;
case Key.Left:
x -= step;
if (x <= 17) x = 17;
break;
case Key.Right:
x += step;
if (x > drawingCanvas.Width - 10) x = drawingCanvas.Width - 10;
break;
case Key.Down:
y += step;
if (y >= drawingCanvas.Height - 10) y = drawingCanvas.Height - 10;
break;
default:
// do nothing
break;
}
doDraw();
}
The doDraw function creates an instance of the pointEllipse object and drops it on the drawingCanvas object after positioning it based on the current values of X and Y.
void doDraw()
{
pointEllipse pE = new pointEllipse();
pE.SetValue(Canvas.LeftProperty, x);
pE.SetValue(Canvas.TopProperty, y);
drawingCanvas.Children.Add(pE);
}
The last function is the event handler for when the “Shake It!” button is pressed. If you remember on an Etch-A-Sketch, shaking them is how you erase your drawing. To do that, I clear all the children off of the drawing canvas and reset the cursor to the center of the drawing canvas.
void clearButton_Click(object sender, RoutedEventArgs e)
{
drawingCanvas.Children.Clear();
x = drawingCanvas.Width / 2;
y = drawingCanvas.Height / 2;
nextPoint.X = x;
nextPoint.Y = y;
}
If you want to see the game, you can check it out here.
If you would like to play with the project, you can download all the code here.
If someone has the patience/ability to draw something really cool, send me a screen shot. =)
Entries (RSS)