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.

Monday 2 December 2013

ADTECH and Windows Phone

Recently I had a requirement to integrate ADTECH banner and interstitial ads in a Windows Phone 8 app.  Like it or not, mobile advertising is here to stay; and I suppose ADTECH is as good as the next.

To their credit, ADTECH have published a Windows Phone SDK which makes integration relatively painless.  If you've done much third-party integration you have to appreciate when a vendor releases a SDK for your platform.

Unfortunately, with the WP SDK ADTECH has decided to give us a wrapper around the WebBrowser control, which smacks of "quick n dirty".  So, for my current requirements, it meant that I would have to accommodate the overhead of a WebBrowser control on nearly every page.

Personally, I avoid using the WebBrowser control and instead use a custom set of RichText controls and the HTML Agility Pack.  This gives me complete control over the rendering of my HTML, by converting HTML objects into native WPF controls, allowing me to render HTML without the overhead (and memory leaks) of the WebBrowser control.

If we take a look at what ADTECH is doing behind the scene, you can have a look at your app's IsolatedStorage using a tool like Windows Phone Power Tools.  Here we can see ADTECH getting busy by downloading individual banner ads, which effectively amounts to an HTML page and accompanying JavaScript files.


Let's face it, displaying a banner ad is not rocket science, nor should it require the use of a WebBrowser control.  All we really want to do is display an image (with or without animation) and respond to a user Tap event.  Use of the WebBrowser control to accomplish this seems a bit overkill in my opinion.

None of this would be worth writing about if it were not for the unexpected impact this had on the app and the UX.  Empirically, I have found a significant degradation in app performance once the ADTECH controls have been included in the app.  What's worse is that the inherit problems with the memory leaks associated with the WebBrowser control as detailed here, raise their ugly head in the ADTECH controls.  The net effect is eventually your app will reach its memory limit threshold and crash.

 

Wednesday 6 November 2013

Windows Phone Development Tips

For the past several months I have been knee-deep in developing a commercial Windows Phone 8 app for a well-known sports company (NDA prevents me from disclosing any specifics).  While this is my seventh Windows Phone app, there are always new things to discover.  Here are a few tips I would like to impart, which you may or may not find useful.

async/await

WP8 developers can take advantage of the new async and await keywords in C#.  If you're unfamiliar with asynchronous programing here's a good place to start.  For both Windows Phone and WinRT applications, responsiveness is no longer a "nice to have", users expect your application to instantly respond to user input.  The Modern UI is fast, fluid and very responsive.  async/await is your best friend in making that happen. 

Monitor Memory Consumption

When embarking on my latest WP project I was fortunate to have a team of UI/UX designers.  They had spent a lot of time creating wireframes and screen mockups.  They had created some very rich screens, loaded with great content and functionality.  As a developer I immediately go into design mode, figuring out how to build the screens, behaviours and functionality.  Quite quickly my app came together, as well as the complexities.  It's easy to get caught up in the moment and forget about things like memory management.  So, I had a fully functioning app that worked great in the emulator and on my Lumia 920, but sucked on low/mid-range devices. 

Add these lines of code to your pages:

public MyPage()
{
     InitializeComponent();
     Debug.WriteLine(string.Format("MyPage constructor {0}", DeviceStatus.ApplicationCurrentMemoryUsage));
}


~MyPage()
{
     Debug.WriteLine(string.Format("MyPage destructor {0}", DeviceStatus.ApplicationCurrentMemoryUsage));
}

 This will allow you to monitor your apps memory consumption and identify pages that are not being destroyed.  You can do the same with your ViewModels, if you are using MVVM.

Additionally, you can periodically run the Windows Phone Application Analysis Tool (Debug | Start Windows Phone Application Analysis) to locate troublesome areas of your app.

Use WVGA 512MB Emulator...and buy a Lumia 520

When working in the development environment, use the WVGA 512MB Emulator.  While it is not exactly the same as a 512MB device, it will give you a feel for lower end devices.

If you're serious about Windows Phone development do yourself a favour and pickup a Lumia 520 as a test device.  The 520 is one of the most popular Windows Phone on the market, and for about £100 (SIM-free) its a steal.  Sideload your app onto your 520 and give it whirl.  If your app behaves well on the 520 you can pretty guarantee it will perform on other devices.  I only recently picked up a 520 in an emergency after my 920 died and was returned to Nokia.  Running your app on something like a 920 doesn't tell you much - of course its going to kick-ass, its a kick-ass phone.

Clean-up after yourself

Because your are working with limited memory (150MB for low end device, 300MB for high end), for larger apps you eventually become aware of this ceiling.  It is a good practice to tidy-up after yourself once the user is completed with a page.  I generally do this on the BackKeyPress event, but it could also be done in the OnNavigatedFrom override, depending on your circumstances.

If you're using MvvmLight you can call the CleanUp method on your ViewModel to decouple EventHandlers, dispose of unused objects and resources, etc.

Additionally, the issue regarding images on Windows Phone is well-known.  So, this is a good place to purge any unused images.

Give your app to a kid

By chance I let my 14 year old use my app.  Hmm...it was revealing.  Granted, he's a pretty switched-on kid, but observing him do things with the app (or try and do things) was a real eye-opener.  As well, I had him talk about the app as he was using it, telling me what he liked or didn't like, what was intuitive, what was confusing.  This resulted in some major changes in the user journeys we had originally designed.

Okay, a 14 year old is not a focus group.  But, on a budget, it was free and provided invaluable feedback.

Use IsolatedStorage, not Windows.Storage

I started out using IsolatedStorage, then mid-development switched to Windows.Storage - big mistake.  Stefan Wexel writes about this on StackOverflow, check it out:

StorageFile 50 times slower than IsolatedStorageFile

I'm sure Windows.Storage will improve in time, but for now stick with IsolatedStorage for Windows Phone 8.

Well, that's it for now;  I hope these tips were of some use.  Will post more as they hit me in the 'ead.




Friday 21 June 2013

Style Explorer is in the Store

Style Explorer has passed certification and is now available in the Windows Phone Store.  Here's the link:

http://www.windowsphone.com/en-us/store/app/style-explorer/2e3ab244-d803-4b54-81cb-efeccc79e10d

As always, any comments, feedback or suggestions are welcome.

Even better - rate and review :)


Tuesday 18 June 2013

Coming Soon: Style Explorer for Windows Phone 8

I've just submitted my fourth WP8 app to the Store.  It is called Style Explorer and is primarily for Windows Phone developers.  If you are a developer you are probably aware of the numerous built-in resources that comes bundled with Windows Phone.  Microsoft encourages use of these resources to produce a consistent look and feel and user experience on the Windows Phone platform.

Style Explorer is a reference tool which organises and displays these resources so you get a feel for what they look like on the target device.  This includes:


  • Supported Font Families
  • Font Sizes
  • Font Weights
  • Text Styles
  • Accent Colors
  • System Brushes
  • Control Brushes
  • Default standard control properties
  • Segoe UI Symbol Named Glyphs
  • A Visual Designer which allows you to modify the look and feel of standard controls and export the settings as C# or Xaml


Here are some screenshots:

Thursday 6 June 2013

In defense of WPF

Recently there was an interesting thread on a LinkedIn WPF Group about the future of WPF.  The originator sparked the discussion by raising the question if WPF was going to be replaced by HTML5.  Many WPF developers shared the opinion that the introduction of HTML5 did not herald the end of WPF.  I agree.

From this I did a quick Google search on recent WPF news and ran across a blog posting by a former WPF disciple.  The thrust of his article was that WPF has not evolved in the six years since its introduction.  He then proceeded to highlight what he felt was wrong with WPF.  This included poor designer support, ugly syntax, complex binding expressions, etc.

The author espouses the virtues of ASP/MVC as a platform that is really going places.  Having done 10 years web development, including classic ASP and ASP.Net, I thought this was amusing.  Even more interesting that I left web development shortly after Microsoft released WPF; 10 years was more than I could stomach.  I've always felt that web applications were always attempting to do things that the platform was never designed to do, in short it was a kludge.  Is it getting better?  Sure it is, but a leopard cannot change its spots.

The comments section of this blog post quickly filled up with like-minded developers for a good old-fashioned WPF bashing.  Comments ranged from "WPF hurts my brain" to "MVC is sooo cool, and WPF ain't".  A small minority cautiously defended WPF and what it could do.

What struck me about these comments was how self-centered the viewpoints were.  The choice of technologies and preferences were largely based on them - what made their life easier.  Almost no one focused on the end product or the end user, or how they were affected by these technologies, it was all about themselves.

I challenge any of these WPF-bashers to sit down with an end user and present to them two applications:  One, a properly designed WPF desktop application; and Two, an equivalent ASP.Net/MVC application.  Then, after using both ask the user which they prefer.  I would put money on the WPF application.  Why?  Because WPF is a superior user interface framework over HTML.

My heart goes out to office workers who have been forced to use web applications day in, day out.  The truth is - web apps SUCK.  And everybody knows it.

I have been in countless design/planning meetings for new internal applications and there rarely is a discussion about whether to go down the web app route or desktop route.  Why?  Because often it is assumed that web apps are more cost effective, easier to maintain, easier to deploy.  No one ever says the reason for the decision is HTML/ASP's vastly superior UI capabilities or how it delivers an excellent user experience.  Why?  Because - web apps SUCK.  And everybody knows it.

Why do I use WPF over HTML/ASP?  Because of the end product I can create; because of the effect that product has on the end user and their work.  I don't pick a technology because it is easy for me.  I pick a technology that is going to assist me in bringing about a superior valuable product for the end user.  My goal is to change the way my users work, to assist them in performing their job, to make the whole experience more efficient and enjoyable.

Thursday 16 May 2013

Tuesday 7 May 2013

Coming soon: Huffy for Windows Phone

Within the next five days or so my new Windows Phone 8 app, Huffy, will be in the Windows Store.  Huffy is the unofficial Huffington Post Reader.

For quite some time The Huffington Post has been absent from the Windows Phone landscape.  Back in 2011, HuffPost released a WP7 app, but then it suspiciously disappeared, never to return.  I thought it was long overdue, so decided to take on the task.

Here's what I came up with...

Huffy offers three editions of the Huffington Post: US, UK and Canada; and 75 categories of news articles and blogs.

Once the app has passed through Microsoft's certification process I will post the link to the product page.

Also, I have created a Facebook Product Page for the app:

https://www.facebook.com/pages/Huffy-for-Windows-Phone/450955798325055







Monday 25 March 2013

New Free App: M1 for WP8

I have published my second Windows Phone 8 app entitled M1 for WP8.  You can find it here:

http://www.windowsphone.com/en-gb/store/app/m1/5c929ae0-7ef7-47d4-81e4-2f5753d00e89

Similar to my previous app M25 for WP8, M1 allows you to monitor the current state of the M1 motorway here in the UK.  Here's a few screenshots.


After publishing the M25 I stepped back and took a look at refactoring my codebase to support any motorway in the UK.  As a result, the new version of M25 and the M1 app share a common core codebase.  As well, the size of the xap file has gone down dramatically from about 500kb to around 275kb.

Anyway, if you are familiar with M25 you will know how to use the M1.

As always, comments/feedback/reviews are appreciated.

Thursday 31 January 2013

M25 for WP8 Reviews

My M25 app for Windows Phone 8 has been in the store for a couple of weeks now and has gotten some positive reviews, currently with a 5-star rating.  Here's a few (I know...shameless self-promotion):


"Where have you been all my life!! The at a glance section for each junction is a brilliant feature and showing all the planned roadworks is great."
"Awesome app if you use the m25 daily"
"Just downloaded and had a quick play with it - so surprised someone hasnt come up with this app sooner - I live in Romford and regularily use the bridge and tunnel to get to and from Dartford. Will stop me blindly driving into the car park at the toll booths. Good job. Its well presented and the route plan and planned roadworks info are great additions - at a glance section is genius. Left you a short 5 star review as well. Thanks Ron"

From the official Microsoft User Community:
"Great work on M25, Ron! Just showcased the app to the community. Next time we're in London we'll be using it. :)"

And my personal favourite...
"Ooooo. This is good :-)"
I've got a minor update coming out in the next couple of days.  Anyone who has installed it will find it as an update in the store.