Highlighting PlayTo / DLNA functionality in your Windows 8 Apps

 

Using the PlayTo functionality within a media application is a great way to enhance your media related app – but the methodology for the user to invoke the PlayTo feature in Windows 8 relies on a full working knowledge of the Charms bar (The user needs to select a device from the devices charm as he is about to play a video).

So in order to highlight this great feature I have added a new button on my Apps’ application bar that also invokes the PlayTo device menu:

image
PlayTo App Bar button in the ‘Easy Origami’ App

imageThe button is based on the one currently available in StandardStyles.XAML called “PlayAppBarButtonStyle”.  I simply copied the XAML and made a few changes as in the example below. 

NB If you don’t want to modify your StandardStyles.XAML – which is generally regarded as bad practice then you can add this mark-up to the XAML of your App.XAML file where it will also be automagically ‘found’!

 

The mark-up matches the mark-up for the existing “Play” button with only the text changing (to ‘Play To’)

image

And the button in your media page then calls the following method which invokes the ‘PlayTo’ Devices menu:

image

Semantic Zoom – Dual Implementation

414x180

Semantic Zoom was initially implemented in “Live Tile Browser”  to collapse down the A-Z listing of Live Tilesto a simple alphabet (see blow)

image
Semantic Zoom –  (a–z listing of available Live tiles)

This worked fine but it did present a small problem when I decided to offer a different method for sorting the live tiles – by their constituent App:

image

Semantic Zoom –live tiles ordered by their ‘owning’ Apps

I struggled for a while but discovered that I needed very few changes to my XAML to come up with a ‘Zoomed in’ View that worked equally well for both scenarios. (The logical ‘Zoomed in’ view to my mind being the icons of the owning Apps themselves)

Here is the XAML I used for the Semantic Zoom element which, along with the grouped data is all that is required to implement this new control:

image(Click to Enlarge)

NB The  <local:LiveTile /> element is a User Control encapsulating the Live Tile functionality.

Developer Opportunities.

This App is open to any independent developer of Windows Phone Apps in order to highlight their own Live Tiles at no cost
Contact the developers (rd3d@WebServices.co.uk) or comment below if you would like to know more.

Flippin’ User Controls with Virtual Backsides …

1

 

A few people have asked what controls were used in the ‘Live Tile News’ app to create the ‘Flipping Live Tiles’ that feature on each page (If you haven’t tried this app yet then each page has a number of two sided tiles which can be flipped over with an upward – or downward, flick of the thumb).

 

 

 

The basic control is made up of a couple of standard list box controls for each panorama item page:

image(Click to enlarge)

Each ListBox is then populated with enough items to fill 1 screen (ie x2 – 1 for each side of the tile).  For this I used a user control but a template would work just as well.  The key to the flipping functionality is the transformation element, which sits on the root grid of the UserControl:

image

The “Rotator” element is manipulated by a couple of storyboards which site in the XAML immediately previous to the above:

image(Click to enlarge)

With the engineering in place all that is required now is to identify the gestures and trigger the storyboards and image switching as required:

NB The gestures are listened for using the ManipulationCompleted events which I set up in the constructor:
 image

The Event handler that handles all the listbox manipulation events then has the responsibility of identifying the type of manipulation that has taken place by checking the relevant X & Y coordinates:

image(Click to enlarge)

If a ‘flip’ action is detected then, after setting a progressively slower storyboard start time dependent on the usercontrols’ (BBCTile) position within the ListBox, the user control’s  “StoryFlip” Storyboard action is triggered. 

NB Note that when this first storyboard action has completed the tile has travelled 90 degrees to the user and apears at that point to be invisible – the image on the tile is then switched before calling the second storyboard (Named “StoryFlipBack”) which finishes the rotation and shows the ‘virtual backside’ of the UserControl.

NB I am not convinced that the staggered start time has any real impact on the effectiveness on the transition.  At the time of writing I feel there is still opportunity to enhance the flipping effect such that it appears more natural!

In a future post I will look at the additional gesture that allows each tile to be added as a ‘Live Tile’ to the home screen.


The following Apps make use of this effect:

Web Based App Installs for Windows Phone

Stumbled upon a cool way of installing apps over the air.  Here are the steps I took:

First fire up the web based marketplace:

http://www.windowsphone.com/en-GB/search?q=web+services+uk

NB The above link shows all my own apps currently in the marketplace – you can click on the ‘Marketplace’ link to view all apps!

image

Select an App from the App Store.

image

install (or reinstall) the app.

image

Select which phone you want to install to.

image

Click Reinstall.

image

Now check your phone!

 

Cool!

How to buy a Kindle Fire in the UK

First of all the Kindle Fires are going to be limited so act fast ….

1. Open a new account with BundleBox.

2. Place your order from this page (see below)

3. Sit back and wait …

image

UPDATE:

Dear Ian,

Hope you are well.
We received a new shipment for you. It is now stored safely in your BundleBox.
Here are the details of the arrived shipment:

Sender: AMAZON.COM
Carrier: UPS
Tracking code: xxxxxxxxxxxxx
Number of packages: 1
Date of arrival: November 15, 2011
Warehouse ID: 0401C149
Repack required: No
You can tell us about the contents of your arrived shipments in the Arrived shipments section.

We will use the information that you provide to compile the necessary customs declarations and the estimation of the required import duty and VAT.
Once you have provided us with this information, you are ready to book your shipment of your goods to their final destination.
You can consolidate as many shipments as you want into your shipment to the final destination to take more advantage of our great rates.
Take a look at the recent deals from the USA for some shopping inspiration.
You can keep this shipment in your BundleBox free of charge for 30 days, until December 15, 2011.
After that a daily rate of £1.00 applies.
If you have any questions, you can contact us via the Message Center.
Best regards,

The BundleBox team

NB Estimated delivery is this coming Thursday or Friday  17th/18th November.

Update 2:

Dear Ian,

Hope you are well.

Just a quick note to let you know that your shipment with order ID xxxxxxxxx has left your BundleBox. FedEx aims to deliver your shipment on: 17 November 2011
You can track the status of your shipments in the Track status section.

We will also send you key status updates.

Best regards,

The BundleBox team