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

Comments

• Anonymous
  November 13, 2013
  The comment has been removed

• Anonymous
  November 14, 2013
  What is the "won camera app"? The above example works with emulator and actual device.

• Anonymous
  November 14, 2013
  I mean own camera app when to take new picture, when you make your own camera and not the one that is built as you show in this here sample. I can not get this work: 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; Thanks

• Anonymous
  November 14, 2013
  What I want to do is on the same XAML i want to have viewfinder and image control, when taking a picture, it appears in the image control.

• Anonymous
  November 15, 2013
  Are you getting any error? Not sure if I get what you are trying to achieve, did you look at Lenses?msdn.microsoft.com/.../jj206990(v=vs.105).aspx