Tuesday 9 December 2014

Styling the PickerFlyout

I recently had a requirement to customise the PickerFlyout for a Windows Phone 8.1 app.  By default the Background color is the chrome color for the selected theme.  We had a requirement to have all of our Flyouts use a white background.

Problem is, PickerFlyout does not appear to be "styleable", and in fact is simply a Popup control.  Using XamlSpy we can see that the child of the Popup is a PickerFlyoutPresenter, which can be styled.  But if you attempt something like:
<Style TargetType="PickerFlyoutPresenter">
<Setter  Property="Background"  Value="White" />
</Style>
 
on a page or control level you will find that it has no effect on your Flyout.  This is because the Flyout is not a child of the page or control.  Simply move it to your App.xaml to have this style applied throughout your app.
 
 

Sunday 26 October 2014

The Legacy of Windows Phone

While bloggers and industry pundits speculate about the future of Windows Phone, what is often overlooked is the influence it has had on other mobile platforms.  More specifically, the Modern UI (formerly known as Metro UI).

One of the things that attracted me to Windows Phone was its unique, modern user interface.  While other mobile platforms were overtly mimicking iOS, Microsoft chose a completely original path [Note: with a nod to Zune and Windows Media Center].  Modern UI is 180° opposite of Apple's skeuomorphic design language.

It was a bold move and was not to go unnoticed.  In 2011 the Industrial Designers Society of American awarded the Windows Phone 7 UI its "Gold Interactive" award, its "People's Choice Award", and a "Best in Show" award, stating:

"The innovation here is the fluidity of experience and focus on the data, without using tradition user interface conventions of windows and frames.  Data becomes the visual elements and controls. Simple gestures and transitions guide the user deeper into content. A truly elegant and unique experience."  – Isabel Ancona, User Experience Consultant

At the time of its launch on October 21, 2010, the mobile world looked like this:

iOS4
Android 2.2
WP7
Had Microsoft released what amounted to an iOS or Android clone, today's mobile UI landscape may be very different.

What is remarkable about WP is what is not there.  As a mobile developer I understand the urge to pile more and more information and functionality onto a screen.  It must have required considerable restraint and discipline not to overload this screen, but instead have it serve more as a navigation device with visual cues.  This permits the designer (and user) to remain focused on the task at hand, and to expand functionality on subsequent screens; never overwhelming the user with unnecessary information or functionality.

From a purely subjective view, of the three, I would consider Windows Phone to be decidedly "modern".  I'm not entirely sure why that is.  Maybe it is because it has no obvious predecessors?

With Windows Phone and its Modern UI in the mix, both Apple and Google seemed compelled to update and revamp their own mobile UIs.  I would argue that this was not because Windows Phone posed a threat to their market shares.  Maybe it was the realisation that their own mobile UI appeared antiquated against the Modern UI?  Or that the underlying design principles of Modern UI were well suited for mobile devices?  Maybe it was a shift from producing interesting devices, to be interested in their user?  That is all speculation.  Eventually we will see both adopt and invent their own interpretation of a modern UI design language.

Google's Material Design feels like a distant cousin to Modern UI (some may contend not too distant).  Of the two, Android always felt like it needed some guidelines and continuity.  So, in that respect, Material Design is a welcome change, though not wholly original.

Apple, on the other hand, has had a much bumpier ride transitioning itself from the skeuomorphic world of steel, glass, paper and leather to a modern mobile UI.  The transformation thus far, has been beautiful and dramatic.  The Verge did an excellent piece on the history of iOS, check it out.

These same screens, as they appear today:

iOS8
Android 5
WP8.1
Note how little has changed with Windows Phone, even after four versions.  We see the same basic layout, along with some additional visual cues and functionality, which likely evolved from usage studies and user feedback.

Microsoft is not compelled to reinvent its mobile UI or turn it into something else, nor should it.  The Modern UI is its DNA.  With the adoption of the Modern UI, Microsoft is in an enviable position of having a UI design which demonstrably works across devices.

It is worth mentioning that the Modern UI's influence extends well beyond the mobile platform; more and more I see it being adopted in web sites, games, television and elsewhere.

Regardless of the fate of Windows Phone, the design language it introduced will continue to influence devices and interfaces well into the future.

Tuesday 22 July 2014

New App: Developer's Handbook

First, my apologies for allowing this blog to stagnate.  Been extremely busy with several Windows Phone projects, which is a good thing.

I've finally managed to eek out some time to complete an 8.1 app that I started months ago - Developer's Handbook.  The Developer's Handbook is essentially a follow-up app to the Style Explorer.


Designed for Windows Phone Developers, Developer's Handbook is a handy reference app for Windows Phone 8.1.  Includes:
 
  • Colors & Brushes
  • Fonts & Text
  • Settings
  • Themes
  • Buttons
  • CommandBars
  • Container Controls
  • Core Controls
  • Date/Time Controls
  • Flyouts
  • SymbolIcons
  • List Controls
  • Progress Controls
  • Text Controls
Full property details linked to Microsoft API references.
Visual guide to built-in Theme Resources, Global Styles and Control Styles.
 
Developer's Handbook is now available in the Windows Phone Store (link)

Wednesday 12 February 2014

Huffy is Dead!

For anyone interested or curious...  Huffy for Windows Phone 8 has been pulled from the Store.  Prior to this I received a takedown notice from Microsoft, who were responding to an unlawful use of copyright material complaint filed by The Huffington Post.

Unless they've changed their T & C's for their RSS feeds, I thought Huffy was well within the guidelines.  To be honest, just not worth arguing about it.

If you already have it installed it should continue to work until such time when the HuffPost changes their schema.  Or you can install the Official Huffington Post app for Windows Phone, which was released shortly after the complaint was filed.

Wednesday 29 January 2014

Alternating Rows with the LongListSelector

If you are familiar with the LongListSelector control in Windows Phone, you may have noticed that it does not natively support alternating row styles.  With regards to list items, you’re left with the ItemTemplate to determine the layout and appearance of your list items.

To change the background colour of your items, one possible workaround is to use a converter to evaluate a property on your bound item, and alternate between two sets of brushes.  I’ve created an AlternatingRowConverter to do just that.




Here, the converter is expecting an integer value and by doing a simple modulus we can switch between two SolidColorBrushes, which have been defined as public properties.
Here’s what our xaml looks like:


Notice that the PrimaryRowBrush and AlternateRowBrush can be defined in a number of ways, either by named value or hex, or creating the brush directly.

Within the LongListSelector.ItemTemplate we use a StackPanel to house the item.  The Background property of the StackPanel is bound to the Index property of a business object called Fruit.  The Converter takes the integer value and returns either the PrimaryRowBrush or AlternateRowBrush.
And here’s the result:


You can download the source code here.