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

 

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

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,

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 ,

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.

Next show the chooser to user to select the photo

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

And decode the byte array to writable bitmap as below,

And set the writeablebitmap to the source of image control ,

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

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.

Follow @debug_mode