Windows Phone code sample: Capturing image from camera and updating live tile

This blog post walks you through an app which captures image from the device camera using the CameraCapture Chooser, saves it on the phone storage, retrieve it back and update the app live tile with this image
1. Lets get started by creating a new Windows Phone Application from the Visual Studio File Menu. We are using Visual C# - Silverlight for Windows Phone Template for this project.
2. Now drag two Image controls and three buttons from Windows Phone Control Toolbox on the page. Name the first image as myImage, second image as smallerImage, buttons as btnClick (set content property as Capture), btnRead (content as Retrieve), btnTile (content as Set Tile). Your page should look like the one shown below:

3. Add the following namespaces which we will be requiring in our code

using System.IO.IsolatedStorage;

using System.Windows.Media.Imaging;

using Microsoft.Phone.Shell;

4. Create an object for CameraCaptureTask and couple of other data members for working with the image

private byte[] _imageBytes;

CameraCaptureTask CCT = new CameraCaptureTask();

string imageFolder = @"\Shared\ShellContent";

string imageFileName = "DemoImage.jpg";

5. Add an eventHandler to the constructor so that it looks like this

public MainPage()

{

    InitializeComponent();            

    CCT.Completed += new EventHandler<PhotoResult>(capture_completed);

}

6. Now, we will add code for button Click event for the Capture button

private void btnClick_Click(object sender, RoutedEventArgs e)

{

    try

    {                

        CCT.Show();

    }

    catch (System.InvalidOperationException ex)

    {

        MessageBox.Show("An error occurred");

    }

}

7. And code to execute when CameraCapture task is complete. The code below displays the image in an image control and saves the captured image in Isolated storage

void capture_completed(object sender, PhotoResult e)

{

    if (e.TaskResult == TaskResult.OK)

    {

        //Display the photo in an image control named myImage and save the image with dimensions of 150x150 pixels

        WriteableBitmap WriteableBMP = new WriteableBitmap(150, 150);

        WriteableBMP.LoadJpeg(e.ChosenPhoto);

        System.Windows.Media.Imaging.BitmapImage bmp = new System.Windows.Media.Imaging.BitmapImage();

        bmp.SetSource(e.ChosenPhoto);

        myImage.Source = bmp;                

        //Using Isolated storage for storage

        using (var isoFile = IsolatedStorageFile.GetUserStoreForApplication())

        {

            if (!isoFile.DirectoryExists(imageFolder))

            {

                isoFile.CreateDirectory(imageFolder);

            }

            string filePath = System.IO.Path.Combine(imageFolder, imageFileName);

            using (var stream = isoFile.CreateFile(filePath))

            {

                WriteableBMP.SaveJpeg(stream, WriteableBMP.PixelWidth, WriteableBMP.PixelHeight, 0, 100);

            }

        }

    }

}

8. Next step is to Read the image back in the second image control (to prove we actually saved the image)

private void btnRead_Click(object sender, RoutedEventArgs e)

{

    //Reading the image back from storage

    BitmapImage imgFromStorage = new BitmapImage();

    using (var isoFile = IsolatedStorageFile.GetUserStoreForApplication())

    {

        string filePath = System.IO.Path.Combine(imageFolder, imageFileName);

        using (var imageStream = isoFile.OpenFile(

            filePath, FileMode.Open, FileAccess.Read))

        {

            imgFromStorage.SetSource(imageStream);

        }

    }

    smallerImage.Source = imgFromStorage;

}

9. Now that we have retrieved the image, lets set the Live Tile with this image as the tile image and some content

public void CreateApplicationTile()

{

    var appTile = ShellTile.ActiveTiles.First();

    //Retrieve the seconds part of current timestamp

    int Sec=System.DateTime.Now.Second;

    var store = IsolatedStorageFile.GetUserStoreForApplication();

    if (appTile != null)

    {

        var standardTile = new StandardTileData

        {

            Title = "Live Tile Demo",

            BackgroundImage = new Uri(@"isostore:/Shared/ShellContent/DemoImage.jpg", UriKind.Absolute),

            //Set the tile count to current seconds value

            Count=Sec,

            BackTitle = "Tile Back Title",

            BackBackgroundImage = new Uri(@"isostore:/Shared/ShellContent/DemoImage.jpg", UriKind.Absolute),

            BackContent = "Live Tile Demo Back Title"

        };

        appTile.Update(standardTile);

    }

}

private void btnTile_Click(object sender, RoutedEventArgs e)

{

    CreateApplicationTile();

}

And we are done. Go ahead and test the app on Emulator. You can see every time you capture and set tile, the current seconds value will be displayed on the top right end of tile.


Related Resources
Isolated Storage for Windows Phone
Choosers for Windows Phone
Tiles overview for Windows Phone