Window Wednesdays are likely going to be pretty focused on "Universal apps" for a while. I know, funny that given it just came out, that it's pretty exciting and it allows us to build app's that run on devices from 2 feet to 10 (when XBox One support is released).
Today, we highlight a project from Jeff Prosise where he shows us how to took an existing Windows 8 app and converted into a Universal App, and customizing the experience for each device.
Past times we've highlighted Jeff;
- Increasing your Windows intellect now with WintellectNOW
- Jeff takes off the cover of his CoverFlow Control for Windows 8 & Windows RT
A couple of weeks ago, I posted about the new universal app model that Microsoft introduced at BUILD 2014. In that post, I introduced a version of Contoso Cookbook that runs on Windows 8.1 and Windows Phone 8.1. That sample covered the basics of universal apps, including using a shared project to share code and resources between Windows and Windows Phone projects. Today I’d like to take it one step further by introducing a more sophisticated universal app named MyComix Reader, or simply “MyComix.” It’s an updated version of a sample that I published in 2012. MyComix now gets its data from Azure. And it now runs on Windows and Windows Phone, enabling it to support a variety of form factors, including PCs, tablets, and, of course, phones.
The screen shot below below shows the app’s start page in Windows and Windows Phone. Same data; just a different way of rendering the data on different devices. The app supports a 3-page navigation model, and it supports search. To see for yourself, download the Visual Studio solution and run it on your development PC. Remember that you’ll need to have Visual Studio 2013 Update 2 installed to do so.
Sharing Resources through PCLs
Recall that a freshly created universal-app solution contains three projects: a Windows project, a Windows Phone project, and a shared project that doesn’t target any particular platform, but that contains files shared with the other two projects via linking. MyComix contains a fourth project: a Portable Class Library (PCL) named MyComixReader.Controls that I added in Visual Studio. That project includes a pair of custom controls that I use in the Windows app and the Windows Phone app: one named MagicImage, and another named CoverFlow. (To see the MagicImage control at work, tap one of the comic books to see a detail, and then tap the comic-book cover image.) I originally developed the CoverFlow control for Windows after modifying the source code for a Silverlight CoverFlow control posted on CodePlex long ago. I was pleasantly surprised to find that the control worked in Windows Phone 8.1 without a single modification. Here’s how it looks after you tap a comic title on the start screen and swipe through a few cover images:
Both apps present a search UI to the user on their start screens. In the Windows app, I used Windows 8.1’s SearchBox control to anchor that UI. There is no SearchBox control in Windows Phone 8.1, but there is an AutoSuggestBox control that’s similar. ...
Supporting Semantic Zoom
The Windows version of MyComix uses a SemanticZoom control, first introduced in Windows 8, to implement semantic zoom. Try it: on the start screen, use the Ctrl key and the mousewheel or a two-finger pinch on a touch screen to zoom out. The screen changes to show one comic-book cover for each title, making it easy to jump right to the title you want.
Windows Phone 8.1 includes a SemanticZoom control, too, as well as GridView and several other controls that migrated over from Windows...
Here are some snaps of the Solution;
As you can see, and as Jeff mentioned, he's mixed Shared, PCL and device specific projects into a tasty whole.
The app compiled and ran for me the first time, which I love. Here are some snaps of it running on my system.
Make sure you also read Jeff's post, Building Universal Apps with Visual Studio 2013 Update 2 and catch the Build 2014 sessions.
Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.