How to Use Cimbalino Windows Phone Toolkit Camera - CameraCaptureService

Introduction

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 into projects that deliver various features, ranging from base MVVM services and helpers, through to code for background agents and for accessing media library, location services and so on. 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).

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.

Note

You must specify the following capabilities in the app manifest: ID_CAP_ISV_CAMERA.

Registering the service

Register the service in the ViewModelLocator constructor as in the following:

/// This class contains static references to all the view models in the
/// application and provides an entry point for the bindings.
public class ViewModelLocator
{
    /// Initializes a new instance of the ViewModelLocator class.
    public ViewModelLocator()
    {
        ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

        if (!SimpleIoc.Default.IsRegistered<ICameraCaptureService>())
        {
            SimpleIoc.Default.Register<ICameraCaptureService, CameraCaptureService>();
        }

        SimpleIoc.Default.Register<MainViewModel>();
    }

    public MainViewModel MainViewModel
    {
        get
        {
            return ServiceLocator.Current.GetInstance<MainViewModel>();
        }
    }

    public static void Cleanup()
    {
        // TODO Clear the ViewModels
    }
}

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.

/// This class contains properties that the main View can data bind to.
public class MainViewModel : ViewModelBase
{
    /// The camera capture service
    private readonly ICameraCaptureService _cameraCaptureService;

    /// The image
    private ImageSource _image;

    /// Initializes a new instance of the MainViewModel class.
    public MainViewModel(ICameraCaptureService cameraCaptureService)
    {
        _cameraCaptureService = cameraCaptureService;
        CameraCaptureCommand = new RelayCommand(CameraCapture);
    }

    /// Gets the camera capture command.
    public ICommand CameraCaptureCommand { get; private set; }

    /// Gets or sets the image.
    public ImageSource Image
    {
        get
        {
            return _image;
        }
        set
        {
            Set("Image", ref _image, value);
        }
    }


    /// Cameras the capture.
    private void CameraCapture()
    {
        Image = null;
        _cameraCaptureService.Show(CameraCapetureResult);
    }


    /// Cameras capture result.
    /// "photoResult" is he photo result.
    private async void CameraCapetureResult(Microsoft.Phone.Tasks.PhotoResult photoResult)
    {
        if(photoResult.ChosenPhoto!=null)
        {
            var bitmapImage = new BitmapImage();
            bitmapImage.SetSource(photoResult.ChosenPhoto);
            Image = bitmapImage;
        }
    }
}

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.
This XAML statement binds the view to the viewmodel.

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

The MainPage.xaml can be the following:

<phone:PhoneApplicationPage
    x:Class="CimbalinoSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    DataContext="{Binding MainViewModel, Source={StaticResource Locator}}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--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"
                       TextWrapping="Wrap"
                       Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle2Style}"/>
        </StackPanel>

        <!--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"/>

        </Grid>
    </Grid>
</phone:PhoneApplicationPage>