Simple camera capture in Window 8 Metro style application

During one of my sessions from the Windows 8 Developer Camp I talked about how easy it is for current .NET developers to write Windows 8 Metro style apps. One slide in particular showed how easy it is to interact with devices, etc., through the Windows Runtime in Windows 8 as compared to how difficult it can be when talking to the Win32 API in a traditional desktop application.

Here’s the code from the slide:

using Windows.Media.Capture;

var ui = new CameraCaptureUI();
ui.PhotoSettings.CroppedAspectRatio = new Size(4, 3);
var file = await ui.CaptureFileAsync(CameraCaptureUIMode.Photo);


if (file != null)
var bitmap = new BitmapImage();

bitmap.SetSource(await file.OpenAsync(FileAccessMode.Read));

Photo.Source = bitmap;

As you can see, it’s very simple code. And you’ll only need to do a couple things to get it to run properly.

  1. First, create a new Blank Metro style C# application. It’s the simplest way to try out stuff like this. Paste the code into the BlankPage.xaml.cs file, in the OnNavigatedTo() method. Move the using statement to the top of the file.
  2. Since we’re using the await keyword, we have to indicate that the OnNavigatedTo() method is an async method by changing its signature to “protected async override void OnNavigatedTo(NavigationEventArgs e)
  3. Add a couple more using statements to take care of the BitmapImage and FileAccessMode, as follows:
    using Windows.UI.Xaml.Media.Imaging;  // for BitmapImage
    using Windows.Storage;                // for FileAccessMode
  4. In Solution Explorer, open the Package.appxmanifest file and in the designer click on the Capabilities tab. Check the Webcam checkbox to indicate that your app needs to capture snapshots and movies from the connected webcams.
  5. There’s one more thing to do: Open the BlankPage.xaml file and add an <image> tag. This is where we put the captured image. Notice we give the image the x:Name of “Photo”. We set its source in the C# code with the Photo.Source =  statement (shown above).

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
    <Image x:Name="Photo" Width="700" Height="700" />

Once you’ve done that, you’re ready to run your app. And here’s what that looks like.

The first time you run it, the user will be prompted – do you want to allow the program to use your webcam? image

Using the webcam to take the picture

Cropping the image (notice it keeps the 4×3 aspect ratio that we specified in the code)image

And once you click OK, you’re returned back to the main page of the appimage

That’s it. Pretty simple, eh?

To keep up with all the stuff that’s going on with Windows 8, one of your best resources is

-bliz (@snowstormlife)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s