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 400x400 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;
}
}
}
}
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>
In this way you can select a photo on Windows Phone 7. I hope this post is
useful. Thanks for reading.