Capturing Photo And Displaying It In Image Element

Introduction

This article explains the camera capture task. We will see how to provide access to the mobile camera from our app to user. Not only that we will also open that photo in our app. For that purpose we will use a Windows Phone task launcher. So let's start.

Camera Capture Task

This is a kind of launcher provided by Windows Phone to launch the mobile camera. It helps in the easy integration of the mobile camera with other apps. It can be used by various imaging apps.

Before using this task we need to include the following namespace:

using Microsoft.Phone.Tasks;

This task has a "completed" event that is used to get the notification for the completion of the task.

The 'Completed' event handler contains the following task event args that can be used:

• Chosen Photo
  Image that is captured by a camera. Image stream is returned.
   
• Error
  Gets the exception associated with it in case of an error when capturing the photo.
   
• Original File Name
  Name of the photo.
   
• Task Result
  Gets the result of this task. It can be anything from the following:
   
  • Cancel: Task is canceled.
  • Ok: Task Completed successfully
  • None: No result returned.

Demo

XAML

<phone:PhoneApplicationPage

    x:Class="Demo.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}"

    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="Demo" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>

            <TextBlock  Text="Demo" Margin="9,-7,0,0" FontSize="40" />

        </StackPanel>

 

        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <StackPanel Orientation="Vertical">

                <Image Height="504" Name="capImg"></Image>

                <Button Name="camBtn" Click="captur" Content="Take photo" HorizontalAlignment="Left" Width="446" Height="129" VerticalAlignment="Bottom"/>

            </StackPanel>

        </Grid>

    </Grid>

</phone:PhoneApplicationPage>

C# Code Behind

using Microsoft.Phone.Controls;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using Windows.Phone.Speech.Synthesis;

using Windows.Devices.Sensors;

using System.Diagnostics;

using Microsoft.Phone.Net.NetworkInformation;

using Microsoft.Phone.Tasks;

using System.Windows.Media.Imaging;

using System.Windows.Media;

 

namespace Demo

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

 

        void cct_Completed(object sender, PhotoResult e)

        {

            var src = new BitmapImage();

            src.SetSource(e.ChosenPhoto);   // Converting Stream to Image Source

            capImg.Source = src;

        }

 

        private void captur(object sender, RoutedEventArgs e)

        {

            /* Step 1 */

            Microsoft.Phone.Tasks.CameraCaptureTask cct = new CameraCaptureTask();

            /* Step 2 */

            cct.Completed += cct_Completed;

            /* Step 3 */

            cct.Show();

           

        }

    }

}

The Show method is used to launch the task.

Output