Facebook Twitter Gplus YouTube RSS
Home dotnet Windows Phone Developer first windows phone 7 app (PhotoChooserTask and Landscape)

first windows phone 7 app (PhotoChooserTask and Landscape)

I created my first sample app in Windows Phone 7. In this app I done a small image viewer application and also implemented Landscape handling too..

I just wrote few lines code for this, every thing taken care by inbuilt class.

I just wrote photoChooserTask.Show() this line to open photo chooser. It will list the photos in WP7. After selecting the photo it will send that information. So, I just set that photo to an image control


here is the XAML code:-

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” xmlns:my=”clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps” VerticalContentAlignment=”Stretch”>

<!–LayoutRoot is the root grid where all page content is placed–>
<Grid x:Name=”LayoutRoot” Background=”Transparent” DataContext=”{Binding}”>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”*”/>
<ColumnDefinition Width=”Auto” />
<ColumnDefinition Width=”0″ x:Name=”LandscapeColumn” />
<ColumnDefinition Width=”12*” />
<!–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=”My Image Viewer” Style=”{StaticResource PhoneTextNormalStyle}”/>
<TextBlock x:Name=”PageTitle” Text=”Playing with Photo Chooser” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}” FontSize=”36″ />
<Image Grid.Row=”1″ HorizontalAlignment=”Left” Margin=”6,6,6,6″ Name=”imageArea” Stretch=”Fill” VerticalAlignment=”Top” Width=”450″ Height=”436″  />
<Button Grid.Row=”2″ Content=”Browse”  Height=”72″ HorizontalAlignment=”Left” Name=”imageBrowseBtn” Click=”imageBrowseBtn_Click” VerticalAlignment=”Top” Width=”160″ Margin=”278,0,0,0″ />


Here is the C# code

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;

namespace WP7Screen
public partial class MainPage : PhoneApplicationPage
// Declare the PhotoChooserTask object with page scope.
PhotoChooserTask photoChooserTask;

// Constructor
public MainPage()
SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;
photoChooserTask = new PhotoChooserTask();
photoChooserTask.Completed += new EventHandler<PhotoResult>(photoChooserTask_Completed);
this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>(Page_OrientationChanged);

private void imageBrowseBtn_Click(object sender, RoutedEventArgs e)

void photoChooserTask_Completed(object sender, PhotoResult e)
if (e.TaskResult == TaskResult.OK)
System.Windows.Media.Imaging.BitmapImage bmp =new System.Windows.Media.Imaging.BitmapImage();
imageArea.Source = bmp;

void Page_OrientationChanged(object sender, OrientationChangedEventArgs e)
if ((e.Orientation & PageOrientation.Landscape) != 0)
LandscapeColumn.Width = GridLength.Auto;
Grid.SetRow(imageBrowseBtn, 1);
Grid.SetColumn(imageBrowseBtn, 1);
LayoutRoot.ColumnDefinitions[1].Width = GridLength.Auto;
//Here margin left is set to 0
imageBrowseBtn.Margin = new Thickness(0);

LandscapeColumn.Width = new GridLength(0);
Grid.SetRow(imageBrowseBtn, 2);
Grid.SetColumn(imageBrowseBtn, 0);
LayoutRoot.ColumnDefinitions[1].Width = new GridLength(0);
//Here margin left is set to 278
imageBrowseBtn.Margin = new Thickness(278, 0, 0, 0);


And here is my output


My image viewer windows phone 7 application

This is my first Windows phone 7 work…!

Enjoy while coding..!


Naga Harish.

 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
3 Comments  comments 
  • Rahul

    I found your post very helpful and useful, could you help me with something i am trying to create, maybe give me an example or the do the first part so i can continue myself

    I want to create a App which allows the user to select from a category of road signs (images) and then display a image of the road sign showing its meaning.

    First page: shows different selections as a button/hyper-link for example: Information Signs, Road Marking Sign, Public Signs or Parking Signs

    Second Page: After the user selects a category for example Road Marking Signs, they can now see a number of different road marking images, which they can scroll through and select one.

    Third page: After selecting the images the third page will show the image of the sign followed by a description of the sign.

    The above text shows a short description of the type of App i am trying to create if you can show me how i can do this it would be very helpful for me, please reply back. You can also contact me through my email if you like.

    • Naga Harish Movva

      Hi Rahul,

      Have look on this http://www.codeguru.com/csharp/.net/net_general/article.php/c17025 . I have seen one more site it is best for your app. But, I unable to call back now. If I got I will send that URL also. But you can start with this.


    • Naga Harish Movva

      have you got my mail? I sent source code one simple example