1 out of 2 rated this helpful - Rate this topic

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

Windows Phone

March 22, 2012

With App Connect, your application can be launched from the share link in the picture viewer and provide a rich user experience for sharing pictures to a web service. This topic describes how to create an application that can be launched from the picture viewer SHARE page and extracts the corresponding picture FileId parameter from the deep link URI. For more information about extending the pictures experience, see Pictures Extensibility Overview for Windows Phone.

This topic does not contain code for communicating with a web service. You must provide the code necessary to upload a picture to a web service. For more information about using a web service with your application, see Networking and Web Services Overview for Windows Phone.

Tip:
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 E0F0E49A-3EB1-4970-B780-45DA41EC7C28.xml file is not required. When upgrading applications that extend the share picker 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.

Tip:

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 E0F0E49A-3EB1-4970-B780-45DA41EC7C28.xml file is not required. When upgrading applications that extend the share picker 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 Share Picker Extension

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

To declare a share picker extensibility application

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 share picker SHARE 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, the WMAppManifest.xml file, and add the following code as a child to the App element, just below the Tokens element. This declares that your application supports extending the share picker.
Copy
<Extensions> <Extension ExtensionName="Photos_Extra_Share" 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="shared picture" 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="15,15,0,0" 
                Name="retrievePic" 
                Stretch="Fill" 
                VerticalAlignment="Top" 
                Width="450" />
        </Grid>
    </Grid>

Extracting the FileId Parameter

In this section, you extract the FileId parameter for the picture that corresponds to the launch of the application. Using that parameter value, the picture is displayed in the image control. In a real-world application, the parameter would be used to retrieve the image and send it to a web service.

To extract the FileId parameter

In MainPage.xaml.cs, add the following code to the MainPage class. This code implements the OnNavigatedTo(NavigationEventArgs) method, looking for the FileId parameter in the URI that launched the application. If the FileId 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 "FileId" key is present.
    if (queryStrings.ContainsKey("FileId"))
    {
        // Retrieve the picture from the media library using the FileID
        // passed to the application.
        MediaLibrary library = new MediaLibrary();
        Picture picture = library.GetPictureFromToken(queryStrings["FileId"]);

        // 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;
    }
}

Note:
When your application is launched, it is your responsibility to verify whether it was launched from the share picker or from the application list. If it was launched from the share picker, you should display your sharing UI and use the method described above to access the photo. If it was not launched from the share picker, which you can verify by checking whether queryStrings["Action"] = "ShareContent", then you should use the standard photo Choosers to retrieve an image. For more information, see Choosers for Windows Phone.

Note:

When your application is launched, it is your responsibility to verify whether it was launched from the share picker or from the application list. If it was launched from the share picker, you should display your sharing UI and use the method described above to access the photo. If it was not launched from the share picker, which you can verify by checking whether queryStrings["Action"] = "ShareContent", then you should use the standard photo Choosers to retrieve an image. For more information, see Choosers for Windows Phone.

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 Windows Phone, take a picture using the camera.
Tether the phone to your computer and wait for it to be recognized by the Zune software. Ensure the application is set to deploy to the Windows Phone Device, select Debug from the menu, and select Start Debugging. When 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 option share… at the bottom of the list. Select share….
On the SHARE 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 Share Picker App can be launched from the share picker.

Other Resources

Pictures Extensibility Overview for Windows Phone

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

How to: Extend the Picture Viewer 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)