A Silverlight Chalkboard

In the hopes of introducing some of our programmers to different technologies, I want to share a project that I posted on my blog a bit ago. I have been tinkering with Silverlight a bit, and thought it might be fun to show some of the things that can be done with it. I should note that for this project, I used Visual Studio 2008, and the Silverlight SDKs. One should be able to accomplish this with Visual C# 2008 Express. Ping me if you have any difficulties.
****************************************

I had so much fun putting together my last Silverlight gadget that I thought it might be fun to try another. I often have clients that want to be able to update parts of their web pages in order to do announcements and such, and I always cringe a little because that means allowing them access to the HTML, or PHP, or JSP, or any other number of places that I do not really want them to be. I thought it would be a much better idea to allow them access to a text file, and let them make changes there. Then I thought it might be fun to make it look like a chalkboard.

The first step was to find an image that looked like a chalkboard. I couldn’t find anything that I really liked, but I did find a Photoshop tutorial, and came up with this in a matter of minutes.

It doesn’t look exactly like the tutorial, but it suits my purpose. So the next thing was to create a new Silverlight app, and add the image to the project. I put the image inside of its own folder:

After that, adding the image into the Page.xaml file was trivial. I also created a TextBlock that I laid over the top of the image. Here is the entire .xaml code for the project:

<UserControl x:Class="SilverlightApplication1.Page"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Width="400" Height="300">
	<Canvas x:Name="LayoutRoot" Loaded="LayoutRoot_Loaded">
		<Image
			Source="images/chalkboard.jpg"
			Visibility="Visible">
		</Image>
		<TextBlock
			Name="boardSurface"
			Canvas.Top="10"
			Canvas.Left="10"
			Width="380"
			Height="280"
			Foreground="White"
			FontFamily="EraserDust.ttf#Eraser"
			FontSize="22"
			Text="">
		</TextBlock>
	</Canvas>
</UserControl>

I decided then that it was all fine and good to have a chalkboard to write on, but it would look much better if I had a font that actually looked like handwriting on a chalkboard. I had no idea how to use a custom font, so I went looking for another tutorial, and I found one on the silverlight.net website, done by Tim Heuer. Incidentally, it was spot on. The only difference was that I did not have to set the font as a resource. It was done automatically. I found the font on fontspace.com. Once I was done with Tim’s tutorial and I was sure that I was able to use the font, I needed to add the Loader event to the canvas so that when it loaded, it would read the file. Visual Studio handles the event creation control automatically, so all I needed to do was find the necessary code to read the file.

Sometimes web applications are a bit finicky in how they read files due to being sandboxed. The first sample I found to read files caused out of memory errors. Probably not the code’s fault. I probably did something stupid with it, but eventually I found some code that works (on a forum somewhere that I can’t find again, so I don’t know who to credit). Here is the complete code for that:

using System;

using System.IO;
using System.Windows;
using System.Windows.Controls;
namespace SilverlightApplication1

{

   public partial class Page : UserControl
	{
		public Page()
		{
			InitializeComponent();
		}
		private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
		{
			var s = "";
			var ss = "";
			var sri = Application.GetResourceStream(new Uri("chalkboard.txt", UriKind.Relative));
			using(TextReader tr = new StreamReader(sri.Stream))
			{
				boardSurface.Text = tr.ReadToEnd();
			}
		}
	}
}

And before anyone freaks out because I hard coded the file name into the stream constructor, I know that is not the right way to do it. It should have been done as a field so that if I need to maintain the code, I don’t have to hunt all through the code. So sue me. Anyway, here is the end result:

Posted Image

I think it looks pretty cool, and it only took me about 90 minutes. It is also one of the more fun projects I have done because I needed to pull together multiple resources to pull it off. In a real world situation, i would create another Silverlight control that the client could use to make changes to the text file without actually touching the text file. Since there is only so much space on the chalkboard, then I would use this project to generate a preview to prevent the client from overflowing the text.

EDIT: lol… I just noticed that forgot to clean out my string variables when I found the other code….

************************************************************

BleepingComputer.com: A Silverlight Chalkboard