Revision as of 02:46, 18 June 2013 by diegodobelo (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Minimal Camera app in Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

Delete instructional text in italic

This article explains how to ... Replace the abstract text with a short paragraph (or sentence) describing what the topic covers.

Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use

WP Metro Icon Multimedia.png
WP Metro Icon WP8.png
WP Metro Icon Baby.png
Article Metadata
Windows Phone 8
Created: (20 Jun 2013)
Last edited: diegodobelo (18 Jun 2013)


The Windows Phone camera is a useful resource to create fancy applications, but sometimes we just need a place to get started. This article shows how to quickly access the camera of a Windows Phone device programatically. It will not use the advanced camera features because the intention here is get the camera working as quick as possible.


Install the Windows Phone 8 SDK: http://dev.windowsphone.com/en-us/downloadsdk

Open Visual Studio. Select file->New Project...

On Templates section select Visual C #-> Windows Phone -> Windows Phone App

Enter the project name and press OK.

Select Windows Phone OS 8.0 as the target Windows Phone OS version and press OK.


In the MainPage.xaml file update the element phone:PhoneApplicationPage to lock the orientation on landscape and to hide the system tray:

SupportedOrientations="Landscape" Orientation="LandscapeLeft" shell:SystemTray.IsVisible="False"

Now delete the <Grid.RowDefinitions> element and add the following canvas element:

<Canvas x:Name="viewfinderCanvas" HorizontalAlignment="Center" >
<!--Camera viewfinder -->
<VideoBrush x:Name="viewfinderBrush" />

Now the MainPage.xaml will look like:

FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Landscape" Orientation="LandscapeLeft"
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Canvas x:Name="viewfinderCanvas" HorizontalAlignment="Center" >
<!--Camera viewfinder -->
<VideoBrush x:Name="viewfinderBrush" />

To create this camera application we need to declare the camera capability in the app manifest file. Open the WMAppManifest.xml file and select ID_CAP_ISV_CAMERA and ID_CAP_MEDIALIB_PHOTO under capabilities tab. They are needed to access the camera and to save a photo on device, respectively. Don't forget to save the file.

Open the MainPage.xaml.cs file and add the following directive at the top of the page:

using Microsoft.Devices;

Add the following variable declaration before the class constructor:

private PhotoCamera _cam;

Now add the following method to the class:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
if ((PhotoCamera.IsCameraTypeSupported(CameraType.Primary) == true) ||
(PhotoCamera.IsCameraTypeSupported(CameraType.FrontFacing) == true))
if (PhotoCamera.IsCameraTypeSupported(CameraType.Primary))
_cam = new Microsoft.Devices.PhotoCamera(CameraType.Primary);
_cam.Initialized += new EventHandler<CameraOperationCompletedEventArgs>(cam_Initialized);
_cam.CaptureImageAvailable += new EventHandler<ContentReadyEventArgs>(cam_CaptureImageAvailable);

This code instantiates the camera object using the primary camera as source. It also set the events handlers to camera initialization and image availability. At the end of the method the camera object is set as the source of viewfinderBrush, which was defined at the MainPage.xaml file as a VideoBrush.

Note that the compiler is complaining about missing cam_Initialized and cam_CaptureImageAvailable methods. It is because they are not implemented yet. We will implement them later.

Remove Category:Draft when the page is complete or near complete

The "platform categories" will be displayed here in preview only - Copy paste relevant categories into text here

Add categories below using category selector. To see appropriate versions for each platform you can add the {{VersionHint}} template and preview the page. Then copy-paste the ones you want.

311 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.