Draw using the InkCanvas - Page 5
       by kirupa  |  10 February 2008

In the previous page, you learned how to call and use the eraser to erase the strokes you made. In this page, let's shift gears a bit and focus on how to save the strokes into a file so that you can access them later.

Saving your Ink Strokes
You spend all of this time drawing something in your ink canvas. If you are using a mouse to draw, you know how hard it is to draw something that could be done in a fraction of a time with either a stylus or (gasp!) pencil and paper. Once you have your masterpiece drawn, it is a shame to lose it all when you close your application.

Needless to say, having the ability to save your drawing would be a good thing. While the actual command to get all of the stroke data from your ink canvas to save is easy, getting to that point requires some careful planning. Let's work backwards by first looking at the code needed to save your strokes into a file:

// Specify the folder and file your ink data will be stored in

string folderName = Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData) + "\\Ink";

string filePath = folderName + "\\MyDrawing.ink";

 

// Check if directory exists

if (!Directory.Exists(folderName))

{

Directory.CreateDirectory(folderName);

}

 

// Create a new file (or overwrite an existing one) to store our data

FileStream inkFileStream = new FileStream(filePath, FileMode.Create);

 

// Transfer your data and close the file.

DrawingBoard.Strokes.Save(inkFileStream);

inkFileStream.Close();

I won't go through the code line by line, for that would deviate this tutorial far from the stated goal of teaching you about the ink canvas. Instead, let me provide you a high-level overview of what needs to be done, and if I did a good enough job, the code should be self-explanatory.

When planning on saving a file, the first thing you would need to think about it is where your file will be saved. You could prompt the user for the save location and get the information that way, or you can specify a default location yourself. In my case, I specify a default location in your AppData folder (C:\Users\<username>\AppData) with the folder name called Ink:

string folderName = Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData) + "\\Ink";

The next step is to specify the name of the file. I am calling my file MyDrawing with a .ink extension. The name of the file itself is not that important. What is important is the name of the file in the context of the full path to it. That is why in the code above, I actually specify a file path with my file name as part of the expression:

string filePath = folderName + "\\MyDrawing.ink";

The easy part is done. We specified the paths to both our directory and save file. All that is left is actually creating the directory/file and saving the data. It's actually quite simple.

When creating a folder, you need to make sure you are not overwriting an existing folder. For example, if the folder you are creating already exists, then you shouldn't spend time creating a new folder. If you look at my code, I first check to see if a folder (also known as a directory) exists, and if that folder does not exist, then I create that folder:

// Check if directory exists

if (!Directory.Exists(folderName))

{

Directory.CreateDirectory(folderName);

}

The story for files is different. I don't care if I am overwriting my save file, so with one line I take care of creating the new file:

// Create a new file (or overwrite an existing one) to store our data

FileStream inkFileStream = new FileStream(filePath, FileMode.Create);

The FileMode.Create action creates a new file at the location you specify, and if that file already exists? Well...that file gets overwritten!

The final step is to save the stroke information from our ink canvas, and the code for that is provided below:

// Transfer your data and close the file.

DrawingBoard.Strokes.Save(inkFileStream);

inkFileStream.Close();

As shown in the code, you can access your ink strokes by calling Strokes.Save() on your ink canvas control. The save method takes a stream as its argument, and luckily for us, in the preceding line, you created a new object of type FileStream - which is based on Stream. That's close enough! Once you pass in your strokes data to your FileStream object, called inkFileStream in our case, you can close your stream.

Loading your Ink Strokes
You just saw how to save ink strokes. I guess the next thing will be to cover how to load those saved ink strokes back into your application! The code for loading our strokes file is:

string folderName = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments) + "\\Ink";

string filePath = folderName + "\\MyDrawing.ink";

 

// If our file exists,

if (File.Exists(filePath))

{

FileStream inkFileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read);

StrokeCollection strokes = new StrokeCollection(inkFileStream);

inkFileStream.Close();

 

DrawingBoard.Strokes = strokes;

}

This code is much more straightforward than what you saw for saving. You store the path to your file just like you did before, but unlike before, you check to see if the file exists at that path. If the file exists, you open the file, read the data as a stream, and store it in a StrokeCollection object. Once you have your StrokeCollection object, you are good to go. The last thing is to assign your collection of strokes back to your ink canvas's strokes property. Pretty simple, ehh?

Phew. We are almost done. There is just one more page of related ink canvas discussion, and after that you are done with this tutorial.

Onwards to the next page!

1 | 2 | 3 | 4 | 5 | 6