In this post we will see how could we select a photo saved on device and bind it as source of image control on our application.

Expected Output

image

 

image

To work with photo on device you need to work with Choosers. To work with Choosers you need to add Microsoft.Phone.Tasks namespaces.

clip_image001

PhotoChooserTask class allows us to choose a photo on the device. To choose a photo you need to make an object of this class. PhotoChooserTask class is defined as below,

image

You can see in definition of class that either you can choose photo from camera by setting ShowCamera value to true . In this post we will choose save photo from the device. You have option to set pixel height and width value of selected photo as well.

So very first, you need to create instance of PhtoChooserTask ,

image

And then set the height and width of the selected photo. By setting these values user will able to select only 400×400 pixels of the photo.

image

Next show the chooser to user to select the photo

image

PhtoChooserTask returns selected photo as byte array. In completed event, you need to decode the byte array as writeable bitmap and then set as the source of Image control. For that you need to add below namespaces

image

And decode the byte array to writable bitmap as below,

clip_image002

And set the writeablebitmap to the source of image control ,

clip_image003

For your reference full source code is as below,


using System;
using System.Windows;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Tasks;
using System.Windows.Media.Imaging;
using Microsoft.Phone;

namespace PhoneApp6
{
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
}

private void btnSelectPhoto_Click(object sender, RoutedEventArgs e)
{
PhotoChoos erTask taskToChoosePhoto = new PhotoChooserTask();
taskToChoosePhoto.PixelHeight = 400;
taskToChoosePhoto.PixelWidth = 400;
taskToChoosePhoto.Show();
taskToChoosePhoto.Completed += new EventHandler<PhotoResult>(taskToChoosePhoto_Completed);
}

void taskToChoosePhoto_Completed(object sender, PhotoResult e)
{
if (e.TaskResult == TaskResult.OK)
{
string fileName = e.OriginalFileName;
WriteableBitmap selectedPhoto = PictureDecoder.DecodeJpeg(e.ChosenPhoto);
imgSelected.Source = selectedPhoto;

}
}
}
}

&nbsp;

Design

I have just put one button and image control. On click event of the button user will select photo on device and after clicking on Ok button, selected photo will be set as source of the image control.


<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="select photo" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Select Photo" 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">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Button x:Name="btnSelectPhoto" Content="Select Photo on Device" Height="100" Width="auto" Click="btnSelectPhoto_Click" />
<Image x:Name="imgSelected" Height="auto" Width="auto" Grid.Row="1" />
</Grid>
</Grid>

&nbsp;

In this way you can select a photo on Windows Phone 7. I hope this post is useful. Thanks for reading Smile

If you find my posts useful you may like to follow me on twitter http://twitter.com/debug_mode or may like Facebook page of my blog http://www.facebook.com/DebugMode.Net If you want to see post on a particular topic please do write on FB page or tweet me about that, I would love to help you.

Advertisements

7 thoughts on “Code to select photo on Windows Phone 7

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s