Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

How to use Cimbalino Windows Phone Toolkit Camera - CameraCaptureService

From Wiki
Jump to: navigation, search

This code example shows how to launch the Camera "chooser" using CameraCaptureService from the Cimbalino Windows Phone Toolkit.

WP Metro Icon Multimedia.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code Example
Source file: CameraCaptureService Sample (github).
Tested with
SDK: Windows Phone 8.0 SDK, Windows Phone 7.1.1 SDK
Devices(s): Nokia Lumia 800, Nokia Lumia 920
CompatibilityPlatform Security
Capabilities: ID_CAP_ISV_CAMERA
Created: saramgsilva (11 Nov 2013)
Last edited: influencer (31 Jan 2014)



The Cimbalino Windows Phone Toolkit delivers a set of useful and powerful MVVM-compatible tools and services to help developers build Silverlight applications for Windows Phone. The Toolkit is divided in projects which deliver different features, ranging from base MVVM services and helpers, through to code for background agents, and for accessing media library, location services etc. Cimbalino.Phone.Toolkit.Camera provides the services for camera access.

The Cimbalino Toolkit's "Camera Capture" service provides an MVVM compatible service for launching the Camera application and returning the captured photo. The kit provides both the ICameraCaptureService interface and its implementation CameraCaptureService required to register the service in MVVM Light (note that MVVM and the MVVM Light Toolkit are not "preconditions" to use this service).

This article explains how to use the service in an MVVM Light app. Developers should first read How to use MVVM Light Toolkit for Windows Phone for a general overview of MVVM Light and how to use services.

Building the example code

The source code for the code example is available here: CameraCaptureService Sample (github).

To build the source code you will also need the MVVM Light Toolkit and the Cimbalino Windows Phone Toolkit. Their packages are available in the Nuget Package Manager. For more details see:

The sample is built using MVVM Light and the article does not go into great detail about the plumbing/infrastructure provided by the toolkit. For more information see:

Note.pngNote: you must specify the following capabilities in the app manifest: ID_CAP_ISV_CAMERA

Registering the service

Register the service in the ViewModelLocator constructor:

  1.     /// This class contains static references to all the view models in the
  2.     /// application and provides an entry point for the bindings.
  3.     public class ViewModelLocator
  4.     {
  5.         /// Initializes a new instance of the ViewModelLocator class.
  6.         public ViewModelLocator()
  7.         {
  8.             ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
  10.             if (!SimpleIoc.Default.IsRegistered<ICameraCaptureService>())
  11.             {
  12.                 SimpleIoc.Default.Register<ICameraCaptureService, CameraCaptureService>();
  13.             }
  15.             SimpleIoc.Default.Register<MainViewModel>();
  16.         }
  18.         public MainViewModel MainViewModel
  19.         {
  20.             get
  21.             {
  22.                 return ServiceLocator.Current.GetInstance<MainViewModel>();
  23.             }
  24.         }
  26.         public static void Cleanup()
  27.         {
  28.             // TODO Clear the ViewModels
  29.         }
  30.     }

Implementing the ViewModel

Implement the MainViewModel as shown below. The highlighted sections show the MainViewModel constructor taking the ICameraCaptureService parameter and assigning it to the private variable, and later on the variable being used to launch the camera.

  1.     /// This class contains properties that the main View can data bind to.
  2.     public class MainViewModel : ViewModelBase
  3.     {
  4.         /// The camera capture service
  5.         private readonly ICameraCaptureService _cameraCaptureService;
  7.         /// The image
  8.         private ImageSource _image;
  10.         /// Initializes a new instance of the MainViewModel class.
  11.         public MainViewModel(ICameraCaptureService cameraCaptureService)
  12.         {
  13.             _cameraCaptureService = cameraCaptureService;
  14.             CameraCaptureCommand = new RelayCommand(CameraCapture);
  15.         }
  17.         /// Gets the camera capture command.
  18.         public ICommand CameraCaptureCommand { get; private set; }
  20.         /// Gets or sets the image.
  21.         public ImageSource Image
  22.         {
  23.             get
  24.             {
  25.                 return _image;
  26.             }
  27.             set
  28.             {
  29.                 Set("Image", ref _image, value);
  30.             }
  31.         }
  34.         /// Cameras the capture.
  35.         private void CameraCapture()
  36.         {
  37.             Image = null;
  38.             _cameraCaptureService.Show(CameraCapetureResult);
  39.         }
  42.         /// Cameras capture result.
  43.         /// "photoResult" is he photo result.
  44.         private async void CameraCapetureResult(Microsoft.Phone.Tasks.PhotoResult photoResult)
  45.         {
  46.             if(photoResult.ChosenPhoto!=null)
  47.             {
  48.                 var bitmapImage = new BitmapImage();
  49.                 bitmapImage.SetSource(photoResult.ChosenPhoto);
  50.                 Image = bitmapImage;
  51.             }
  52.         }
  53.     }

Implementing the view

The rest of the app is "plumbing" to hook up the MainViewModel to the View and send commands back to the invoke the service. How to use MVVM Light Toolkit for Windows Phone explains most of what is going on.

This xaml statement binds the view to the viewmodel.

DataContext="{Binding MainViewModel, 
Source={StaticResource Locator}}"

The MainPage.xaml can be the following:

FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
DataContext="{Binding MainViewModel, Source={StaticResource Locator}}"
SupportedOrientations="Portrait" Orientation="Portrait"
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="Cimbalino Sample" Style="{StaticResource PhoneTextTitle2Style}" Margin="12,0"/>
<TextBlock Text="CameraCaptureService and PhotoCameraService"
Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle2Style}"/>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Source="{Binding Image}" Stretch="Uniform" Margin="0,242,0,0" />
<Button Content="Camera Capture" Command="{Binding CameraCaptureCommand}" Height="237" VerticalAlignment="Top"/>
This page was last modified on 31 January 2014, at 22:08.
83 page views in the last 30 days.