In this tutorial we are going to see how to play with a Photo Chooser task, with this task if we are going to develop an application which requires adding some photo or images to the user inputs we will be using this task. Basically if the application requires to select some picture from the internal photo album or from the photo hub we will be using this task to select the photo. Once the user selects a photo an event will be triggered which will be used to track the user selection that if the user has selected the picture or cancelled the selection.      [more]   

There are some cases where in our application we are required to take a photo image from the camera and add it to the application which can also be a part of these chooser task which is achieved using the Camera Capture Task which we have seen in our previous topic. Let us see the steps on how to achieve this task in real time for a Windows phone application.

Open Visual Studio 2010 IDE and create a new Silverlight for Windows Phone project with a valid project name as shown in the screen below. Once the project is created add some controls which are used to trigger the Photo Chooser Task as shown in the screen below.

Now drag and drop few controls to the screen which is used to trigger event that launches the Photo Chooser Task. Once we designed the screen with the controls we can see the screen looks like below. We have added a button control to trigger the event and image control to show the selected picture after the task is completed as shown in the screen below.

XAML Code:

<phone:PhoneApplicationPage
    x:Class="F5debugHowto24.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" d:DesignWidth="480" d:DesignHeight="768"
    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 x:Name="ApplicationTitle" Text="F5debug How to Series" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Photo Chooser" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!–ContentPanel – place additional content here–>
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Choose Photo" Height="72" HorizontalAlignment="Left" Margin="9,6,0,0" Name="button1" VerticalAlignment="Top" Width="441" />
            <Image Height="340" HorizontalAlignment="Left" Margin="25,96,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="411" />
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

Now we need to write our code in the button click event to trigger the Photo Chooser task, which basically opens the photo chooser application to select a desired photo. To do that just go to the code behind and first add the USING handler code on top with the existing using statements as shown in the code below.

using Microsoft.Phone.Tasks;

Next is to add the below code to the button click event which basically creates an instance of the Photo Chooser task and once the event is completed another event is raised which takes the result as output as shown in the code below.

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Tasks;
using System.Windows.Media.Imaging;

namespace F5debugHowto24
{
    public partial class MainPage : PhoneApplicationPage
    {
        PhotoChooserTask pcTask;

        // Constructor
        public MainPage()
        {
            InitializeComponent();

            pcTask = new PhotoChooserTask();
            pcTask.Completed += new EventHandler<PhotoResult>(pcTask_Completed);
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            pcTask.Show();
        }

        void pcTask_Completed(object sender, PhotoResult e)
        {
            switch (e.TaskResult)
            {
                case TaskResult.OK:
                    BitmapImage bImage = new BitmapImage();
                    bImage.SetSource(e.ChosenPhoto);
                    this.image1.Source = bImage;
                    break;
                case TaskResult.Cancel:
                    break;
            }
        }
    }
}

Now we are done with our code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screens below.

Output Screens:

So in this short tutorial we have seen how to use the Photo Chooser task to select user desired picture that can be used internally with in the application. Also we can make use of the Camera Capture task to take an image and save it over the Photo hub that can also be used with in the application. That’s it from this tutorial on Windows Phone see you all in the next tutorial soon. Mean while Happy Programming!!!