Jump to content


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.

Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.


A Silverlight Chalkboard

  • Please log in to reply
1 reply to this topic

#1 groovicus


  • Security Colleague
  • 9,963 posts
  • Gender:Male
  • Location:Centerville, SD
  • Local time:09:52 PM

Posted 09 April 2009 - 08:31 PM

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.

Posted Image

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:
Posted Image

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"
	Width="400" Height="300">
	<Canvas x:Name="LayoutRoot" Loaded="LayoutRoot_Loaded">

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()
		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Ö.


BC AdBot (Login to Remove)


#2 Romeo29


    Learning To Bleep

  • Members
  • 3,194 posts
  • Gender:Not Telling
  • Location:
  • Local time:10:52 PM

Posted 09 April 2009 - 10:19 PM

Nice :thumbsup: Thanks.

I was thinking of learning some of Silverlight for some time, I guess I am going to start today :flowers:

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users