5 out of 5 rated this helpful Rate this topic

How to: Extend the Picture Viewer with App Connect for Windows Phone

Windows Phone

January 13, 2012

With App Connect, your application can be launched from the apps link in the picture viewer and provide a rich user experience based on the picture that the user was viewing. This topic describes how to create an application that can be launched from the picture viewer and extracts the corresponding picture token from the deep link URI. For more information about extending the pictures experience, see Pictures Extensibility Overview for Windows Phone.

Important Note:
Pictures extensibility has changed in Windows Phone OS 7.1. For information about how to extend the pictures experience in applications running on Windows Phone OS 7.0, see the Windows Phone OS 7.0 developer documentation here. In Windows Phone SDK 7.1, the Extras.xml file is not required. When upgrading applications that extend the picture viewer to Windows Phone OS 7.1, remove this file and use the new extensibility techniques described in this topic. For this release of the Windows Phone SDK, this topic can be completed only on the device and not on Windows Phone Emulator. The current version of the emulator does not include access to the Pictures Hub on the device. This topic is based on C# development; however, Visual Basic code is also provided.

Important Note:

Pictures extensibility has changed in Windows Phone OS 7.1. For information about how to extend the pictures experience in applications running on Windows Phone OS 7.0, see the Windows Phone OS 7.0 developer documentation here.

In Windows Phone SDK 7.1, the Extras.xml file is not required. When upgrading applications that extend the picture viewer to Windows Phone OS 7.1, remove this file and use the new extensibility techniques described in this topic.

For this release of the Windows Phone SDK, this topic can be completed only on the device and not on Windows Phone Emulator. The current version of the emulator does not include access to the Pictures Hub on the device.

This topic is based on C# development; however, Visual Basic code is also provided.

Declaring a Picture Viewer Extension

In this section, you create the application, declare an extension for the picture viewer, and add an image control to display the image that corresponds to the launch of the application.

To declare a picture viewer extension

In Visual Studio 2010 Express for Windows Phone, create a new project by selecting the File | New Project menu command.
The New Project window is displayed. Expand the Visual C# templates, and then select the Silverlight for Windows Phone templates.
Select the Windows Phone Application template. Fill in the Name box with a name of your choice. By default, this is the name that will appear on the picture viewer apps page.
Click OK. The New Windows Phone Application window is displayed.
In the Target Windows Phone Version menu, ensure that Windows Phone 7.1 is selected.
Click OK. A new project is created, and MainPage.xaml is opened in the Visual Studio designer window.
From the Project menu, select Add Reference. In the .NET tab, choose Microsoft.Xna.Framework, and click OK.
Open the application manifest file, WMAppManifest.xml, and add the following code as a child to the App element. This allows your application to be launched from the picture viewer.
Copy
<Extensions> <Extension ExtensionName="Photos_Extra_Viewer" ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}" TaskID="_default" /> </Extensions>

Open the code-behind file for the main page, MainPage.xaml.cs, and add the following directives at the top of the page.

Copy

using System.Windows.Media.Imaging;
using Microsoft.Phone;
using System.IO;
using Microsoft.Xna.Framework.Media;
using System.Windows.Navigation;

On MainPage.xaml, replace the Grid named LayoutRoot with the following code.

Copy

    <!--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="APP CONNECT EXAMPLE" 
                Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock 
                x:Name="PageTitle" Text="picture app" 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">
            <Image 
                Height="350" 
                HorizontalAlignment="Left" 
                Margin="6,18,0,0" 
                Name="retrievePic" 
                Stretch="Fill" 
                VerticalAlignment="Top" 
                Width="450" />
        </Grid>
    </Grid>

Extracting the Token Parameter

In this section, you extract the token parameter value from the deep link URI. The parameter value, the token, corresponds to the picture that your application was launched from. Using that token, the picture is displayed in the image control.

To extract the token parameter

In MainPage.xaml.cs, add the following code to the MainPage class. This code implements the OnNavigatedTo(NavigationEventArgs) method, looking for the token parameter in the URI that launched the application. If the token parameter is present, the application retrieves the corresponding picture from the media library, creates a bitmap image with it, and displays the image in the Image control named retrievePic.

Copy

   protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            // Get a dictionary of query string keys and values.
            IDictionary<string, string> queryStrings = this.NavigationContext.QueryString;


            // Ensure that there is at least one key in the query string, and check whether the "token" key is present.
            if (queryStrings.ContainsKey("token"))
            {
                
                // Retrieve the picture from the media library using the token passed to the application.
                MediaLibrary library = new MediaLibrary();
                Picture picture = library.GetPictureFromToken(queryStrings["token"]);


                // Create a WriteableBitmap object and add it to the Image control Source property.
                BitmapImage bitmap = new BitmapImage();
                bitmap.CreateOptions = BitmapCreateOptions.None;
                bitmap.SetSource(picture.GetImage());

                WriteableBitmap picLibraryImage = new WriteableBitmap(bitmap);
                retrievePic.Source = picLibraryImage;
            }

        }

Important Note:
If you use the PhotoChooserTask Chooser in your application, it results in the application being deactivated. When the application is reactivated, the OnNavigatedTo method is called. You must ensure that your application refreshes the page with the right image, or you may experience application performance problems and crashes as a result. Also, the preceding code provides instruction for retrieving the token parameter for a Silverlight application. For XNA Framework–based applications, you can retrieve the token by using the LaunchParameter property of the Microsoft.Xna.Framework Game class. An example would be: string token = LaunchParameters["token"];

Important Note:

If you use the PhotoChooserTask Chooser in your application, it results in the application being deactivated. When the application is reactivated, the OnNavigatedTo method is called. You must ensure that your application refreshes the page with the right image, or you may experience application performance problems and crashes as a result. Also, the preceding code provides instruction for retrieving the token parameter for a Silverlight application. For XNA Framework–based applications, you can retrieve the token by using the LaunchParameter property of the Microsoft.Xna.Framework Game class. An example would be: string token = LaunchParameters["token"];

Testing App Connect on the Device

When the device is tethered to your computer, you cannot use the Pictures Hub and launch your application from the picture viewer. However, your device must be tethered to your computer to load your application. This procedure describes how you can transfer your application to the device and test it.

To test App Connect on the device

With your device, take a picture using the camera.
Tether your device to your computer and wait for it to be recognized by the Zune software. Ensure that the application is set to deploy to the Windows Phone Device, select Debug from the menu, and select Start Debugging. Once the application is visible, go back to the Debug menu and select Stop Debugging. Disconnect the device from your computer and navigate to the Start screen.
On the Start screen, tap the Pictures application and then tap All. Tap the Camera Roll section to find your picture, and then tap the picture thumbnail to expand the picture.
Tap the three dots at the bottom of the page on the Application Bar. A menu should appear with an apps… link at the bottom of the list. Select apps….
On the apps page, choose the name of your application. Your application should open with the picture visible in the Image control.

From left to right, the following image shows how the application named Your Photo App can be launched from the picture viewer.

Other Resources

Pictures Extensibility Overview for Windows Phone

How to: Extend the Pictures Hub with App Connect for Windows Phone

How to: Extend the Share Picker with App Connect for Windows Phone

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)