(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

Windows 8 Metro Apps: The 8 Must-Know Tricks! Day 1

(6 votes)
Samidip Basu
>
Samidip Basu
Joined Aug 22, 2011
Articles:   16
Comments:   24
More Articles
14 comments   /   posted on Jul 10, 2012
Categories:   Windows 8 , General

You’re at a chic coffee shop or on a plane.  Just like everyone around you, you have a tablet. Watch a movie, play a game, do the social stuff. And then while everyone starts getting bored, you flip part of your tablet and out comes a thin keyboard. May be you are also carrying your Arch Touch mouse .. your thin tablet is now transformed into a decent dev machine that’ll happily run Visual Studio for hours on battery. Non-developers get to use the desktop mode on Intel slates, thus bringing over all the productivity applications from a Windows 7 PC. All the while, the ‘Metro’ side of things stays very touch-friendly and superbly delightful for content consumption.

That, is one of the promises of Windows 8 - the next iteration of the most popular computer OS. Be excited, as this is the biggest & boldest change in Windows since 95 and there is a lot in it for developers. If you are a .NET developer, the programming paradigms in Windows 8 Metro apps should be very interesting, with fragments of it boiling over to other .NET development. XAML devs should feel right at home, as should web folks with strong HTML/JS/CSS skills. Metro apps are fun to write, in my opinion, and there is a huge potential to make a name for yourself when the Windows Store opens with Windows 8.

I have had the superb pleasure of working on several Windows 8 Enterprise LOB Metro apps for proof-of-concept, along with some very talented internal developers/designers. Unfortunately, that also means NDA and not being able to talk about stuff yet. But what I can do is share some coding experiences, since there is a decent learning curve.  I will try to keep the articles short for readability & jump into what you need to make your first Windows 8 Metro app.

So, starting today is an article series on common tips & tricks towards developing real-world Windows 8 Metro apps.  Over the next several weeks, you’ll see 8 articles talk about some must-do things for Windows 8 Metro app developers. Simple, to the point, with some code examples on XAML/C# stack. This post will serve as the indexed home of the series … this is what’s cooking:

Day 1: Know the ecosystem; Start
Day 2: Layout, Navigation & Visual States
Day 3: Semantic Zoom
Day 4: Controls & Styling
Day 5: Search, Share & Settings Contracts
Day 6: Data Persistence & Application Life-Cycle Management
Day 7: Use of OData or Web Services
Day 8: Live Services integration  
 

Day 1: Know the ecosystem; Start

Now, before we sit down to write our Windows 8 Metro application, I think it is important to understand the ecosystem and make sure you are onboard personally.  Question assumptions & understand why we are being asked to do something some way. Here are few pointers I find useful:

  • By end of 2012, your phone, PC & Xbox-connected TV start looking very identical and you move seamlessly between the three. This is the new ‘Metro’ ecosystem and it is very conscious rebranding across MSFT products. Let us make an honest effort to understand Metro as a design language and think UX first.    
  • Release Preview being the latest public Windows 8 build, learn everything about the OS & UX starting HERE.   
  • Now, we developers obviously want to start writing apps for Windows 8. A new genre of delightful, performant & touch-optimized applications for various form factors. Bookmark the Metro Dev Center – devour all the content; lot of good stuff to learn from the documentation.
  • For the first time in the history of Windows, the OS completely steps aside & let’s our Metro apps shine, edge-to-edge. This is awesome, but with power comes responsibility. It is easy (specially with the VS templates) to start making an app that looks Metro; it is rather difficult to nail the UX that Metro demands.
  • Learn what makes a great Metro app HERE. As in Windows Phone, and probably more important with the bigger form factor – let’s sweat the details. Little UX tweaks have a big impact on how the user perceives a Metro app.
  • The complete UX Guidelines for Metro apps can be found HERE – read well my friends.
  • Let’s focus on content over chrome & information hierarchy through typographical ramp. Users will explore the app if we can delight with content.
  • Remember ‘Win as One’ as a Metro design principle? While no one is forcing you, it really helps the end user if our Metro apps follow the same UX, implement the same touch gestures and integrate with the rest of the Windows 8 OS.  To understand little tricks in Windows 8, start with these wonderful posts by my buddy & SilverlightShow author Michael Crump on ‘10 Things You Didn’t know about Windows 8’ HERE & HERE.
  • Understanding Layout options and making the appropriate use of controls in a given context is critical. Wonderful set of UI Layout guidelines HERE.
  • Utilize the App Bar (guidelines HERE) for commands, but essential navigation pieces need to be on the canvas.
    Supporting multiple View States (Snapped, Full, Filled) & the Charms is not optional; but a must-do. Let us not recreate any of the Charms in our apps.
  • Tiles – They are the face of your application. So, invest in making an awesome Tile, which keeps inviting the user back into your application. If at all possible, consider supporting Live Tile or Toast notifications from an outside service for a very engaging user experience. Guidelines for Tiles & Toasts can be found HERE & HERE respectively.
  • Motion was another Metro design principle. Subtle animations energize the usage of our apps – so let’s add animations when appropriate to our frames/pages/controls or when using Transient UI elements. Again start HERE. Absolutely use the built-in Animations Library.
  • Touch is not an after-thought in Windows 8. It is what we start out supporting in Metro apps – let’s understand all the different ways the OS does it & try to integrate/extend. Wonderful Touch interaction design principles can be found HERE. Semantic Zooming support is highly recommended if presenting a lot of list-based content and if you do not want the user to be lost – guidelines HERE.
  • Last, but not least, is being Fast & Fluid – something we have imbibed from Windows Phone development. Windows 8 Metro apps are touch-optimized and demand direct fluid user interaction. Absolutely nothing can hold back the UI thread; in fact, .NET 4.5 for Metro apps is going to make it hard to write synchronous code. Spend the time to truly understand the  new Async-Await pattern of asynchrony in .NET, starting HERE. Usable everywhere in making Metro apps, but also portable to other forms of programming.    

 

      Conclusion

      That’s it for today. The crux of this post is to provide pointers to a lot or resources so that we developers know where to start & what to keep in mind. There is definitely much to grasp; so my mantra is to SLOW DOWN and do the right things.

      See you next time as we dive into some real-world Windows 8 Metro app development principles. Thanks for reading!

       

      About Author

      ActualPicSamidip Basu (@samidip) is a technologist, gadget-lover and MSFT Mobility Solutions Lead for Sogeti USA working out of Columbus OH. With a strong developer background in Microsoft technology stack, he now spends much of his time in spreading the word to discover the full potential of Windows Phone/Windows 8 platforms & cloud-supported mobile solutions in general. He passionately helps run the Metro Developer User Group (http://themetrodeveloperusergroup.com/), labors in M3 Conf (http://m3conf.com/) organization and can be found with at-least a couple of hobbyist projects at any time. His spare times call for travel and culinary adventures with the wife. Find out more at http://samidipbasu.com.


      Subscribe

      Comments

      • -_-

        Re: Windows 8 Metro Apps: The 8 Must-Know Tricks! Day 1


        posted by on Jan 11, 2015 09:49
        Thanks a lot for sharing this with all people you really realize what you’re talking about! Bookmarked. flex belt This is a terrific article, and I would like more information if you have any. I am fascinated with this topic and your post has been one of the best I have read. mi40x I am always searching online for articles that can help me, The article you have posted contains massive message came to be powerful. 6 minutes to skinny Im thoroughly enjoying the smart way you write articles in this blog. glowing lean system Wonderful! Actually wealthy content and extremely helpful in sequence. venus factor I got it my answer from over here. I extremely advocate his/her mechanism with the helpful educational information.
      • Lara3013

        Re: Windows 8 Metro Apps: The 8 Must-Know Tricks! Day 1


        posted by Lara3013 on Mar 11, 2015 16:14
        I am commenting to let you know what a terrific experience reading through your web page. My review here
      • Lara3013

        Re: Windows 8 Metro Apps: The 8 Must-Know Tricks! Day 1


        posted by Lara3013 on Mar 31, 2015 19:20
        You share tons of interesting info, neat and excellent design you've got here. It's certainly one of the most informative stuff on this topic I've ever read. Go To Website
      • MarcoBet

        Re: Windows 8 Metro Apps: The 8 Must-Know Tricks! Day 1


        posted by MarcoBet on Apr 02, 2015 05:39

        That is very interesting Smile I love reading and I Cipto Junaedy always searching for informative information like this Jadwal MotoGP 2015. This is exactly what I was looking for Cara Upload Video ke Youtube.  Really this system so amazing. Cipto Junaedy  so happy to browsing this BBM Untuk Android Versi Terbaru. Simply fill out a quick and easy application, and you'll be on your way to getting your new Cara Membuat Email  and Cara Instal Windows 7 avoiding Thanks for sharing this great article . Don't forget for reading the articles about Jinpoker.com Agen Judi Poker Online dan Domino Online Indonesia Terpercaya. And I encourage you to bookmark the following page if Cahayapoker.com Agen Judi Poker Dan Domino Uang Asli Online Terpercaya Indonesia considered important ... Regards ituDewa.net Agen Judi Poker Domino QQ Ceme Online Indonesia

        | Nusantarapoker.com Agen Texas Poker Dan Domino Online Tanpa Robot Terpercaya
      • soom

        Re: Windows 8 Metro Apps: The 8 Must-Know Tricks! Day 1


        posted by soom on Apr 04, 2015 10:10
        Blog Comment
        Thanks for the amazing content on your blog I am very interested in this article and you have really helped me. I have just told a few of my friends about this on FaceBook and they love your content just as much as I do..
      • soom

        Re: Windows 8 Metro Apps: The 8 Must-Know Tricks! Day 1


        posted by soom on Apr 05, 2015 10:14

        Thanks for the amazing content on your blog I am very interested in this article and you have really helped me. I have just told a few of my friends about this on FaceBook and they love your content just as much as I do.. web design colchester

      • abel672

        Re: Windows 8 Metro Apps: The 8 Must-Know Tricks! Day 1


        posted by abel672 on Apr 09, 2015 11:23
        I am wondering how I might be notified whenever a new post has been made. I have subscribed to your RSS which may do the trick? Have a great day! read this
      • abel672

        Re: Windows 8 Metro Apps: The 8 Must-Know Tricks! Day 1


        posted by abel672 on Apr 09, 2015 11:24
        I high appreciate this post. It’s hard to find the good from the bad sometimes, but I think you’ve nailed it! would you mind updating your blog with more information? read this
      • pulautidung

        Re: Windows 8 Metro Apps: The 8 Must-Know Tricks! Day 1


        posted by pulautidung on Apr 10, 2015 01:46
        information which was amazing. I love your articles. as a blogger, I also have information. greetings from Indonesian children. mari berwisata ke panorama wisata pulau tidung – karena indonesia memang indah banget. kami juga ahli di dalam internet marketing, dengan menjadi pakar seo indonesia yang paling handal – untuk menjadikan kata kunci paket pulau tidung di halaman 1 google. gimana? masih belum percaya? 
      • alikhan

        Re: Windows 8 Metro Apps: The 8 Must-Know Tricks! Day 1


        posted by alikhan on Apr 15, 2015 22:35
        I am always searching online for articles that can help me. There is obviously a lot to know about this. I think you made some good points in Features also. Keep working, great job ! Conos de señalizacion
      • alikhan

        Re: Windows 8 Metro Apps: The 8 Must-Know Tricks! Day 1


        posted by alikhan on Apr 17, 2015 14:14
        I am always searching online for articles that can help me. There is obviously a lot to know about this. I think you made some good points in Features also. Keep working, great job ! healthy diet
      • alikhan

        Re: Windows 8 Metro Apps: The 8 Must-Know Tricks! Day 1


        posted by alikhan on Apr 17, 2015 14:30
        I am looking for and I love to post a comment that "The content of your post is awesome" Great work! swimwear for women online
      • alikhan

        Re: Windows 8 Metro Apps: The 8 Must-Know Tricks! Day 1


        posted by alikhan on Apr 18, 2015 10:45
        I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details.make money online

      Add Comment

      Login to comment:
        *      *       

      From this series