Extending the Windows Phone Pictures Hub

This article explains how to extend Image Hub with your application.

Article Metadata

---

Code Example

Source file: Media:ExtendImageHub.zip

---

Article

Keywords: Image Hub, extension, Windows phone

Created: yan_ (18 Jul 2012)

Last edited: chintandave_er (25 Jul 2012)

Open application from Image Hub

First possibility is to reference your application as an Image application. To do it you, open WMAppManifest.xml and add after Tokens node

<Extensions>
      <Extension ExtensionName="Photos_Extra_Hub"
                         ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}" 
                         TaskID="_default" />
</Extensions>

Open Image from Image Hub

Second possibility is to reference your application as Image viewer. When user views an image it can select an application with the menu bar to open this image.

To do it you, open WMAppManifest.xml and add after Tokens node

<Extensions>
      <Extension ExtensionName="Photos_Extra_Viewer" 
                         ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}" 
                         TaskID="_default" />
</Extensions>

In your code, override OnNavigatedTo() function. When your application is launched from Image hub, token is added in NavigationContext.QueryString. This token is used to get a Picture instance

using Microsoft.Xna.Framework.Media;
using System.Windows.Navigation;
using System.IO;
 
//...
 
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
	IDictionary<string, string> queryStrings = this.NavigationContext.QueryString;
	//check if a token is added 
	if (queryStrings.ContainsKey("token"))
	{
 
		MediaLibrary library = new MediaLibrary();
		//Acces to Picture instance from token.
		Picture picture = library.GetPictureFromToken(queryStrings["token"]);
 
		//Get Image Stream
		Stream imageStream = picture.GetImage()
 
		/*Todo 	Code to open image and display it
			...		
		*/
		queryStrings.Remove("token");
 
	}
	base.OnNavigatedTo(e);
}

Houston we have a problem

Of course it's not so simple. When BitmapImage load image, it doesn't check image orientation. On Lumia 800 (maybe all WP7) a portrait image will be loaded like a landscape Image. So you must check orientation manually. To do it you can use ExifLib library which can read exif image data and so image orientation.

Now you can easily perform correction image display.

<Image x:Name="imageViewer" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,150,0,0">
    <Image.RenderTransform>
         <RotateTransform x:Name="imageOrientation" />
    </Image.RenderTransform>
</Image>

// Load Image to a BitmapImage
BitmapImage bitmap = new BitmapImage();
bitmap.CreateOptions = BitmapCreateOptions.None;
bitmap.SetSource(imageStream);
 
//display loaded image
imageViewer.Source = bitmap;
imageOrientation.Angle = 0;
 
 
//reposition stream to the beginning
imageStream.Seek(0, SeekOrigin.Begin);
//read exif data
JpegInfo info = ExifLib.ExifReader.ReadJpeg(imageStream, "");
 
if ( info.Orientation == ExifOrientation.TopRight)
{
	imageOrientation.Angle = 90;
}
if (info.Orientation == ExifOrientation.BottomRight)
{
	imageOrientation.Angle = 180;
}
if (info.Orientation == ExifOrientation.BottomLeft)
{
	 imageOrientation.Angle = -90;
}

Share Image from Image Hub

Last possibility is to reference your application as an ""Image Sharer"".

Open WMAppManifest.xml and add after Tokens node

<Extensions>
      <Extension ExtensionName="Photos_Extra_Share" 
                         ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}" 
                         TaskID="_default" />
</Extensions>

In your code, override OnNavigatedTo() function. When your application is launched from Image hub, FileId is added in NavigationContext.QueryString. This token is used to get a Picture instance

using Microsoft.Xna.Framework.Media;
using System.Windows.Navigation;
using System.IO;
 
//...
 
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
	IDictionary<string, string> queryStrings = this.NavigationContext.QueryString;
	//check if a token is added 
	if (queryStrings.ContainsKey("FileId"))
	{
 
		MediaLibrary library = new MediaLibrary();
		//Acces to Picture instance from token.
		Picture picture = library.GetPictureFromToken(queryStrings["FileId"]);
 
		//Get Image Stream
		Stream imageStream = picture.GetImage()
 
		/*Todo 	your code
			...		
		*/
		queryStrings.Remove("FileId");
 
	}
	base.OnNavigatedTo(e);
}

Reference links

ExifLib

• ExifLib
• http://timheuer.com/blog/archive/2010/09/23/working-with-pictures-in-camera-tasks-in-windows-phone-7-orientation-rotation.aspx

Image hub extension

• http://msdn.microsoft.com/en-us/library/hh202950(v=vs.92).aspx
• http://msdn.microsoft.com/en-us/library/ff817010(v=vs.92).aspx
• http://msdn.microsoft.com/en-us/library/ff967563(v=vs.92).aspx