Question

I’m making a drawing program in C# for Windows Phone.

This is for Windows Phone, so a bunch of stuff doesn’t work that would work in C#.

At the start of opening a .XAML page, I have a blank Canvas. The user draws on the Canvas, then clicks Save. When he/she clicks Save, I want the program to be able to save the image on the Canvas.

I have the following code so far:

        IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication();
        StreamReader sr = null;

        sr = new StreamReader(new IsolatedStorageFileStream("Data\\imagenum.txt", FileMode.Open, isf));
        test = sr.ReadLine();
        sr.Close();

        int.TryParse(test, out test2);

        test2 = test2 + 1;

        IsolatedStorageFile isf2 = IsolatedStorageFile.GetUserStoreForApplication();
        isf2.CreateDirectory("Data");
        StreamWriter sw = new StreamWriter(new IsolatedStorageFileStream("Data\\imagenum.txt", FileMode.Create, isf2));
        sw.WriteLine(test2);
        //This writes the content of textBox1 to the StreamWriter. The StreamWriter writes the text to the file.
        sw.Close();

This code finds what an appropriate name for the image would be.

I’ve also found various other code snippets on the web:

            // Construct a bitmap from the button image resource.
        test = "Images/" + test + ".jpg";
        using (IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForApplication())
        {
            WriteableBitmap bmImage = new WriteableBitmap(image);
            if (!store.DirectoryExists("Images"))
            {
                store.CreateDirectory("Images");
            }
            using (IsolatedStorageFileStream isoStream =
            store.OpenFile(@"Images\" + test + ".jpg", FileMode.OpenOrCreate))
            {
                Extensions.SaveJpeg(
                bmImage,
                isoStream,
                bmImage.PixelWidth,
                bmImage.PixelHeight,
                0,
                100);
            }
        }

The above is an ugly mess of code from tutorials on MSDN and my own badly scraped together code.

(It doesn’t work, for semi-obvious reasons)

How would I save the canvas to IsolatedStorage, as an image?

Answer 1

Your first section where you appear to be writing the last used number to a text file in IsolatedStorage seems like a lot of work to do something relatively simple. You can replace that whole section with this:

IsolatedStorageSettings settings = IsolatedStorageSettings.ApplicationSettings;
int imageNumber = 0;
settings.TryGetValue<int>("PreviousImageNumber", out imageNumber);
imageNumber++;

You can save the image to IsolatedStorage like this:

using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())
{
    if (!isf.DirectoryExists("Images"))
    {
        isf.CreateDirectory("Images");
    }
    IsolatedStorageFileStream fstream = isf.CreateFile(string.Format("Images\\{0}.jpg",imageNumber));

    WriteableBitmap wbmp = new WriteableBitmap(image);
    Extensions.SaveJpeg(wbmp, fstream, wbmp.PixelWidth, wbmp.PixelHeight, 0, 100);
    fstream.Close();
}

But it would probably make more sense to save the image to their MediaLibrary like this:

MediaLibrary library = new MediaLibrary();
WriteableBitmap wbmp = new WriteableBitmap(image);

MemoryStream ms = new MemoryStream();
Extensions.SaveJpeg(wbmp, ms, wbmp.PixelWidth, wbmp.PixelHeight, 0, 100);
ms.Seek(0, SeekOrigin.Begin);
library.SavePicture(string.Format("Images\\{0}.jpg",imageNumber), ms);

Either way, you can then save the imageNumber back to the IsolatedStorageSettings like this:

settings["PreviousImageNumber"] = imageNumber;
settings.Save();

---

I had assumed the image used above was set somewhere else in your code. I haven’t saved a Canvas to an image before, but some quick searching turned up this blog where an example is given using the WriteableBitmap which indicates you can just replace the image variable with your canvas element:

WriteableBitmap wbmp = new WriteableBitmap(yourCanvas, null);

The article also indicates that the Canvas’ background will be ignored and replaced with a black image but that you can overcome this by first adding a rectangle to the Canvas with whatever background you want. Again, I haven’t tried this. If this doesn’t work you should consider posting another question specifically related to transforming a Canvas to an Image since this is really a separate issue from your original question about saving images.