Photo Chooser in Windows Phone 7


Today, in this article let's dig out one of the useful feature related to windows phone. This concept is useful in selecting the photos and performing necessary tasks as per the user requirements.

Question Arises: What is Photo Chooser Task?

This Class allows user to choose photos and integrate into using applications.

The Complete Code of MainPage.xaml looks like this:

<phone:PhoneApplicationPage
    x:Class="Photo_Chooser_Task.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="Vijay's Photo Chooser Application" FontFamily="Verdana" FontSize="22" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Windows 7 Phone" 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" FontFamily="Verdana" FontSize="22" Height="72" HorizontalAlignment="Left" Margin="119,206,0,0" Name="button1" VerticalAlignment="Top" Width="214" Click="button1_Click" />
            <Image Height="204" HorizontalAlignment="Left" Margin="84,330,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="311" />
            <TextBox Height="72"  HorizontalAlignment="Left" Margin="196,27,0,0" Name="textBox1"  VerticalAlignment="Top" Width="236" />
            <TextBox Height="72"  HorizontalAlignment="Left" Margin="196,128,0,0" Name="textBox2"  VerticalAlignment="Top" Width="236" />
            <TextBlock Height="30" FontFamily="Verdana" FontSize="22" HorizontalAlignment="Left" Margin="72,57,0,0" Name="textBlock1" Text="First Name" VerticalAlignment="Top" />
            <TextBlock Height="30" FontFamily="Verdana" FontSize="22" HorizontalAlignment="Left" Margin="72,151,0,0" Name="textBlock2" Text="Last Name" VerticalAlignment="Top" />
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="152,553,0,0" Name="textBlock3" Foreground="Red" FontFamily="Verdana" FontSize="22" VerticalAlignment="Top"
/>
        </Grid>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

The Complete Code of MainPage.xaml.cs looks like this:

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;
using Microsoft.Phone;
using System.IO;

namespace Photo_Chooser_Task
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            textBlock3.Text = "";
            image1.Source = null;
            if (textBox1.Text == "" || textBox2.Text == "")
            {
                textBlock3.Text = "Please Enter Values";

            }
            else
            {
                PhotoChooserTask objPhotoChooser = new PhotoChooserTask();
                objPhotoChooser.Completed += new EventHandler<PhotoResult>(PhotoChooseCall);
                objPhotoChooser.Show();

            }
        }
        void PhotoChooseCall(object sender, PhotoResult e)
        {
            switch (e.TaskResult)
            {
                case TaskResult.OK:
                    BinaryReader objReader = new BinaryReader(e.ChosenPhoto);
                    image1.Source = new BitmapImage(new Uri(e.OriginalFileName));
                    MessageBox.Show("First Name: " + textBox1.Text + " " + "Last Name: " + textBox2.Text);
                    textBox1.Text = "";
                    textBox2.Text = "";
                    break;

                case TaskResult.Cancel:
                    MessageBox.Show("Cancelled");
                    break;

                case TaskResult.None:
                    MessageBox.Show("Nothing Entered");
                    break;

            }

        }
    }
}

The Output of the Application looks like this:

PhotoChooser0.png

The Entered Name Values Output Application looks like this:

PhotoChooser1.png

PhotoChooser2.png

PhotoChooser3.png

The Nothing Entered Output Application looks like this:

PhotoChooser4.png

Up Next
    Ebook Download
    View all
    Learn
    View all
    MVC Corporation is consulting and IT services based company.