Wintellect Blogs

More Fun with Universal Apps: MyComix Reader

14 Apr , 2014  

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.

image

 

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:

image

The whole point of building PCLs is packaging code that can be shared across platforms. They work great in conventional apps, and they work equally great in universal apps. Remember that you have to add a reference to the PCL in each project in which you use it, which in this case meant I had to add references to both the Windows project and the Windows Phone project.

Supporting Search

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. It’s called “AutoSuggestBox” because it supports drop-down suggestion lists just like the Windows SearchBox. Declaring an AutoSuggestBox control in HubPage.xaml was simple:

<AutoSuggestBox x:Name="SearchTextBox" Width="300" TextChanged="OnTextChanged" />

Writing a TextChanged event handler to provide suggestions as the user types was equally simple:

private async void OnTextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
    if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
    {
        sender.ItemsSource = (sender.Text.Length > 1) ?
            await ComicDataSource.GetQuerySuggestionsAsync(sender.Text) :
            new string[] { };
    }
}

The result was an an interactive list of suggestions that appears when the user types the second character into the AutoSuggestBox and updates with each additional character typed:

image

 

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. I intended to implement semantic zoom in the phone app by using a ListView for the zoomed-in view and a GridView templated to resemble a LongListSelector in the zoomed-out view, but alas, I couldn’t get the SemanticZoom control to work on the phone. I’m assuming this is just because I’m working with a prelease version of the phone runtime, so I’ll plan to update this post at a later date to demonstrate not only how to use SemanticZoom on a phone, but how to mimic LongListSelector with a GridView.

Universal Apps Abroad

I’ll be delivering a session on universal apps at the Software Design & Development conference in London next month, and I’ll be using these samples and several more that are currently under development. I’ll also be talking about universal apps at a special meeting of the Bangalore .NET User Group next week in Bangalore, India. Would love to see you in London or Bangalore if you happen to be in the neighborhood!