Extending the Windows Phone Pictures Hub

Comments

Chintandave er - Demo Screenshot

Hi , Thanks for the article.

I think, screenshot of the demo code running on simulator would be helpful to understand the article. I recommend to add screenshot in this article like the reference article has.

Thanks,

Chintan Dave.

Chintandave er 09:28, 7 August 2012 (EEST)

Hamishwillee - Yes, screenshots and slightly improved title and abstract

On quick scan, this appears to be a well constructed article. I like the fact you've provided good links to other place - thanks. If it were me I'd rename them to be the name of the article - e.g. http://msdn.microsoft.com/en-us/library/hh202950(v=vs.92).aspx would be better as How to: Extend the Pictures Hub with App Connect for Windows Phone (MSDN)

I haven't checked what it adds "over and above" the linked articles yet - but I am assuming it does more than just copy.

Based on my quick look I would say that its hard to tell without digging "what sort of extension this article does" and "what sort of image hub extension" is possible - both of which are important. The first would be improved by a "before and after" screenshots so we can see what the extension does. In either case, you should have an explanation of what extension allows you to do (in broad overview). Ideally this would be part of the introductory section.

The name could also be improved - its accurate, but we're in a wiki that is used for a number of platforms and runtimes. Suggest adding context "Extending the Windows Phone Image Hub" or similar.

Nice job.

Regards

Hamish

hamishwillee 10:32, 7 August 2012 (EEST)

Yan -

Hi. Thanks for your comments.

• Links are renamed.
• For picture, you can't access image hub directly on emulator to make snapshot. Maybe use image from microsoft articles?
• For page name, i've no idea. I'm not familiar with wiki and i don't know how do it :/

  yan_ 01:05, 8 August 2012 (EEST)

Chintandave er - Chintandave er - @yan.

Hi Yan, Thanks for updating article with screenshot and other suggested changes.

You can rename this wiki article by following below step:

1. Go to down arrow located on next to History tab (and Eye Icon)
2. Click on "Move" there
3. Give new Title for this article there.

That's it.

Chintan.

Yan -

ok. it's done.

thanks

yan_ 22:44, 8 August 2012 (EEST)

Hamishwillee - Thanks Yan & Subedited

Hi Yan

Thanks for making the fixes

I have subedited and made a number of changes - FYI:

• The hub is branded as "Pictures Hub", not "Imaging hub". No point changing the well understood name. I have moved the article again to reflect this and changed the name in the content
• Usually I use bold to highlight filenames and button presses (ie press OK), and the Icode macros for inline code. Italic to highlight important names.
• Images are usually left aligned rather than centred - this is up to you, but an image up the top that is centered is more likely to be pushed down by the contents pane - which looks bad
• Images often have frames - I like these because you can include some explanation.
• I moved the MSDN links into SeeAlso because they are more visible. Also added an "introduction" - explaining everything that the article covers.

In the introduction you'll notice the "Note" I added explaining that this extends the MSDN documentation with a concrete example and downloadable examples. There are a number of reasons for this (again just FYI):

1. We want to avoid accusations of plagiarism (the "moral issue" of passing off ideas and text of others as our own) - adding a note acknowledges our references
2. We want to avoid accusations of copyright infringement (a legal term, in which we steal someone elses IPR and words). AFAIK is not a particular issue here because we can copy text for educational reasons under most copyright law. Having the acknowledgement makes it clear that this is not our intention.
3. We don't want to duplicate content on MSDN "just for the sake of it". The comment makes it clear what "value add" we provide over and above what is provided on MSDN.

Of course in a completely original article or one that isn't directly drawing on those resources the disclaimer wouldn't be needed.

In terms of further improvement, it is worthwhile explaining the values you're changing in the manifest file:

• what is ConsumerID and where do you get it (ie is this your id for the app from the Dev Center?).
• Where does the ExtensionName come from - is this what you want to appear in the listing/menu in Picture viewer or is it some registered name?
  • If it is the name that appears in menus, how can you localise this or is that not possible
• The task id - how do you set this, and when would you set it (I can guess, but best to spell it out)

If not answered by the above, I think localising is an interesting question to answer.

Thanks very much for this, you've done an excellent job

Regards

Hamish

hamishwillee 04:42, 9 August 2012 (EEST)

Yan -

Thanks for improvements and explanation. For ConsumerID , ExtensionName and task_id. I don't thinks you can change these. They are WP reference. For expanation, miscrosoft don't explain these values... For lacalisation, it's your application name which is displayed. So if you have localized is name, the display will be localized.

Localized application name is a few .... http://msdn.microsoft.com/en-us/library/ff967550%28v=vs.92%29.aspx

http://patrickgetzmann.wordpress.com/wp7-localize/

yan_ 09:52, 9 August 2012 (EEST)

RHarrison - Multiple Photo Share

Hi,

Is it possible to get this to work for multiple photos? It works fine when selecting one photo, but when I select multiple photos, my app is no longer on the Share list.

Regards,

Richard

RHarrison 05:15, 21 March 2013 (EET)

Yan -

Hi. I don't know. Maybe you could ask on discussion boards.

ps : i'll update this article with new WP8 functionality.

yan_ 11:11, 21 March 2013 (EET)

Hamishwillee - Yan, did this happen?

Hi Yan

YOu wrote "ps : i'll update this article with new WP8 functionality.". Did this happen, and if so, can we add the categories and article metadata for WP8?

Regards

H

hamishwillee 01:55, 3 April 2013 (EEST)

Yan -

not yet.

I'll do it this week

yan_ 10:46, 3 April 2013 (EEST)

Windows Phone 8 development -

hi yan

i was getting facebook integration for windows phone 8

but its not working in my emulator yet i havn't test on device any idea or any other solution

Windows Phone 8 development 10:28, 25 April 2013 (EEST)

Log in or Join to leave comments.

19 Aug
2012

This article explains how to extend the Windows Phone Pictures Hub with your application.

See Also

• Pictures Extensibility Overview for Windows Phone (MSDN)
• How to: Extend the Pictures Hub with App Connect for Windows Phone (MSDN)
• How to: Extend the Picture Viewer with App Connect for Windows Phone (MSDN)
• How to: Extend the Share Picker with App Connect for Windows Phone (MSDN)

Article Metadata

---

Code Example

Source file: Media:ExtendImageHub.zip

---

Article

Keywords: WMAppManifest, MediaLibrary

Created: yan_ (18 Jul 2012)

Last edited: hamishwillee (10 Apr 2013)

Introduction

The Pictures Hub is the centre of all still-image activity on Windows Phone. This article shows how an application can extend the Pictures Hub, adding itself as an "imaging" app that can be launched from the hub, picture viewer, or share picker option.

Note: This article extends the WP7 content part on MSDN (like Pictures Extensibility Overview for Windows Phone) with concrete examples and a downloadable example you can try out on your Windows Phone device.

Register your app as an "Imaging application"

The application can be registered in the manifest file as an Imaging application, it will then appear in the Pictures Hub "applications" section (as shown below in fourth-from-left image):

Pictures Hub with "Your Photo App" added. The right-most image shows the opened app

All that is required is to open the WMAppManifest.xml and add the following code fragment after the Tokens node:

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

Register application as an image viewer

The application can be registered as an Image viewer. This allows the user to choose the app from the Pictures Hub's menu to open a selected image.

Opening an image using a registered image viewer

To register your app, first add the following text after the Tokens node in WMAppManifest.xml:

<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 Pictures 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);
}

Ensuring correct orientation of loaded image

Of course it's not so simple. When BitmapImage load image, it doesn't check image orientation. On Lumia 800 (maybe all WP7 devices) 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;
}

Register your app as an image sharer

The application can be registered as an Image Sharer, allowing it to be selected as an option for sharing an image (for example to a web service).

Open WMAppManifest.xml and add the following text after the 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 Picture 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
• Handling picture orientation in CameraCaptureTask in Windows Phone 7