Windows Phone Collages Maker

This article explains how to use Image Control, BitmapImage and PhotoChooserTask, let the user load the image from resource (design time or runtime) or let the user select user desired picture.

 Click New Project..., Select Windows Phone App
 

In Toolbox, select Image Control and drag it to your page.
 

In Toolbox, select button Control and drag two button  to your page. change the caption of button1 to "resource" and change the caption of button2 to "PhotoChooserTask", The layout as following screen
 

In Solution Explorer, select your application name, "PhotoApp2",


Right click mouse button, select Add - New Folder item, Type "Images"
 

Select Images Folder, Right click the mouse, select Add - Existing Item... , select your image file. e.g. we added the image named baby.jpg
 

Select the Image Control , In Properties windows, type "Image1", You wlll see the MainPage.xaml.cs 's content (x:Name="Image1") will updated automatically.  
 

Select the Button1 Control , In Properties windows, type "button1". Select the Button2 Control , In Properties windows, type "button2".
 

You may load the image in design time, Select Image Control (Image1) on your pages, In Properties windows , select Source property, type "Images/Baby.jpg" , You will see the image loaded to Image Control

In Solution Explorer windows, select Images folder , Right click the mouse, select Add - Existing Item... , select your another image file. e.g. we added the image named monkey.jpg
 

Select Button Control (button1) on your pages, In Properties windows, click this icon

Select Tap event and click the textbox, it will add button1_Tap event.
 

Now you need load the image from resource to Image Control in runtime. You need use BitmapImage class.
To use any of the BitmapImage classes, you first need to add a using statement at the top of your Page class.  type "Using System.Windows.Media.Imaging;"

Next type following code in button1_Tap event.

BitmapImage bitmapImage = new BitmapImage();

bitmapImage.UriSource = new Uri("/Images/monkey.jpg", UriKind.RelativeOrAbsolute);

Image1.Source = bitmapImage;

Select Button Control (button2) on your pages, In Properties windows, click this icon 

Select Tap event and click the textbox, it will add button2_Tap event.
 
Finally you need allow user select user desired picture to Image Control. You need use PhotoChooserTask class.

To use any of the PhotoChooserTask class, you first need to add a using statement at the top of your Page class.  type "Using Microsoft.Phone.Tasks;"

Next type following code to public area. It will create the instance of the PhotoChooserTask.

PhotoChooserTask photoTask = new PhotoChooserTask();

In MainPage(), type following code. It hook up the Completed event. It let you know when the user selected the photo.
photoTask.Completed = photoTask_Completed; 

add photoTask_Completed event.

private void photoTask_Completed(object sender, PhotoResult e)

        {

            if (e.ChosenPhoto != null)

            {

                BitmapImage bitmapImage = new BitmapImage();

                bitmapImage.SetSource(e.ChosenPhoto);

                Image1.Source = bitmapImage;

            }

        } 

In button2_Tap event, add following code let the user select the photo.

 photoTask.Show();