While at one point I was a full time developer, those days are long past. I do, however, still take time to write code. Most of my coding is for fun and to learn how things work. I built two Windows Phone 7 applications that I submitted to the Windows Phone market, and I just submitted my first Windows Store Application to be certified. Hopefully within 8 days, when Windows 8 launches, my application will be in the Windows Store.
While I’ll write more about the certification process in a few days, today I wanted to share my first big “lesson learned” from building this application. This lesson learned is “Don’t forget snapping and filling when designing and building your applications.”
I’ve talked for years about separating the interface from the business logic. Specifically, I’ve commented that you should not assume screen size. When building applications for Windows 8, you need to really think about this. In fact when building Windows 8 applications, you can consider tablets which can be in landscape or portrait mode depending on how you hold it. More importantly, you have to remember that the user can have your application in full screen, or they can snap it to a side. There is also the larger filled screen that the application can be placed into when a different application is snapped. These are both different layouts as shown in the figure.
With landscape, portrait, snap, and filled modes, you end up with four different screen sizes/resolutions that your application can be forced into on a single slate device.
The Good News for Visual Studio 2012 Users
The good news for those using Visual Studio 2012 is that the tool can help you — if you pick right. When building my application, I started with the Blank project template. I then added additional blank pages to extend my application. Blank pages are a bad choice if you want the tool to help you with the various resolutions.
When building an application, if you want to support the various visual states, then you will want to use the “Basic” template instead of the “Blank” template. The Basic template will include additional code that will help you support the resolutions. You can delete the defaulted MainPage.xaml page and replace it with a a new “Basic” page by selecting using the “Add new item” option on the Project menu. You can also add additional basic pages to your solution.
When you’ve added a basic page, you’ll have the ability to use the Device menu’s state recorder to make it easy to create the layouts. The state recorder is on the device menu as shown in the following figure.
To use the recorder, open up your interface file in Visual Studio. Select the Device menu as shown in the figure above. You can see in the device menu, there are four icons showing the different visual states. Chances are you will have built your application in standard portrait or landscape mode. If so, that mode should be shown as selected. You can then select any of the other modes from the toolbar:
If you select the new mode and also check the box next to Enable State Recording, you’ll be able to rearrange your applications interface in this new visual state without messing up the old mode. You can build the new layout to fit the new window area in the designer. You can then repeat this process for each of the various modes. The recorder takes care of the heavy lifting for you in that it retains the layouts of the original states as long as you remember to check the “Enable State Recording” box.
The rest of the code and markup is modified for you. Once you’ve used the state recorder to change your layout, you can rebuild your application and run it in the emulator. Through the emulator, you’ll be able to test the snapped, filled, portrait, and landscape visual states to make sure they look good.
It is nice when you can use the tool to get the job done. Of course the lesson I learned the hard way was to make sure that you start with the Basic project pages instead of the blank ones!
# # #
|Your Idea. Your App. 30 Days
Get daily guidance from Generation App for building Windows 8 applications.