Retargeting a BayTrail* Windows* 8 Store Sample Application to Windows 8.1

Download Article

Download Retargeting a BayTrail* Windows* 8 Store Sample Application to Windows 8.1 [PDF 602KB]

Abstract

This article discusses the process of retargeting an existing healthcare sample app from Windows 8 to Windows 8.1. In particular, using special features that were added to Visual Studio 2013 for retargeting/importing windows store apps, build errors, and challenges faced. In addition, using 3^rd party libraries and newly available UI controls & features are discussed.

Overview

Windows 8.1 brings new features, APIs, UI, and performance enhancements to the windows platform. It is up to the developer to take advantage of new features and re-implement some parts of an app that will benefit from the new Windows 8.1 enhancements. Even a simple retarget and compile can result in benefits such as quick app startup time and automatic windows store app updates.

This article will look at migrating a sample healthcare app to Windows 8.1.

For an in-depth and general technical discussion of migrating a Windows Store App to Windows 8.1, please refer to the following white paper.

http://msdn.microsoft.com/en-us/library/windows/apps/dn376326.aspx

Retargeting Windows Store Apps to Windows 8.1

Depending on the functionality and complexity of your app, the process of retargeting Windows Store Apps to Windows 8.1 is relatively a straight forward process.

Developers can plan their retargeting process to be incremental. Initially, the app can be recompiled to resolve any build errors so the app takes advantage of the Windows 8.1 platform. Subsequently, developers can review any functionalities in the app that will benefit from re-implementation using the newly available APIs. Finally, the retargeting process gives the developer an opportunity to review the compatibility of 3^rd party libraries in Windows 8.1.

When the healthcare sample app was migrated to Windows 8.1, the simple recompile option, checking usage of 3^rd party libraries, and re-implementing the settings control using the new Windows 8.1 XAML control was performed.

For reference, Microsoft Developer Network has extensive documentation that covers all facets of migrating an app to Windows 8.1. Please refer the following link.

http://msdn.microsoft.com/en-us/library/windows/apps/dn263114.aspx

A Healthcare Windows Store App

As seen in several other articles in this forum, we will use a sample healthcare Line of Business Windows Store app.

Some of the previous articles include:

The application allows the user to login to the system, view the list of patients (Figure 1), access patient medical records, profiles, doctor’s notes, lab test results, and vital graphs.

Figure 1: The “Patients” page of the Healthcare Line of Business app provides a list of all patients. Selecting an individual patient provides access to the patient’s medical records.

Retargeting sample healthcare app

Before the sample app is retargeted, it is useful to review different components, UI features, and 3^rd party libraries that are used.

The UI and the core app life cycle handling of the app were implemented using the templates available in Windows 8. Windows 8.1updated the project & page templates and included a brand new Hub pattern template. The app uses sqlite* as its backend database to store all patient records. WinRTXamlToolkit* is used for charts and the 3^rd party library Callisto* is used for implementing the Settings Control. The Settings Control is invoked by the charms bar. Windows 8.1 has a new XAML based settings controls that can be used instead of a 3^rd party library.

The app has search functionality implemented using the charms bar integrated in Windows 8. Windows 8.1 has a new in-app search UI control that could be used to extend the search experience to different UI pages of the app, depending on the requirements.

The sample app has several other functionalities like camera usage, NFC and audio recording that will continue to function in Windows 8.1 without any changes.

As mentioned earlier, Visual Studio 2013 was used to recompile the sample app for Windows 8.1, 3^rd party library build issues were fixed, and parts of the app were re-implemented using new Windows 8.1 features. The app can be refined further in the future by re-implementing more pieces of the app that benefit from the Windows 8.1 platform. For example, new page templates, view models for different screen sizes, the new in-app search, or the new tile sizes and templates could be utilized.

Using Visual Studio 2013 to import the app

To retarget the app for windows 8.1, first download and install Visual Studio 2013 on a Windows 8.1 host machine. After the installation, ensure any 3^rd party libraries are updated to the latest version inside the Visual studio extensions.

The project was opened in Visual Studio 2013 and no errors were seen when compiling the project out of the box. To retarget the project to Windows 8.1, right-click the project name in the solutions explorer and the option for retargeting the project to Windows 8.1 is shown in the list (Figure 2)

Figure 2: Option for retargeting the project (captured from Visual Studio* 2013)

Clicking on this option brings up a dialog box asking for confirmation. Verify that the project selected is correct and press the OK button.

Figure 3: Confirmation Dialog for retargeting (captured from Visual Studio 2013*)

After Visual Studio completes the action, you should see the project now has “Windows 8.1” next to the project name in the solution explorer (Figure 4).

Figure 4: Solution Explorer shows the project is retargeted to Windows 8.1 (captured from Visual Studio 2013*)

When trying to compile the project, build errors may occur. Figure 4 also shows some 3^rd party libraries showing build issues. In the next section, resolving build errors and 3^rd party library issues is discussed.

Fixing build errors and 3rd party library issues

Updating the 3^rd party libraries to latest version resolves some of the problems. The Visual Studio* extensions dialog can be used to check for the latest library version available. For Sqlite*, it was updated to the Windows 8.1 version as shown Figure 5.

Figure 5: Extensions dialog (captured from Visual Studio 2013*)

The usage of some of the 3^rd party libraries in the app were re-evaluated after migrating to Windows 8.1. As mentioned earlier, the Settings UI control has been added to Windows 8.1. It was decided that it would be best to remove the 3^rd party library Callisto* from the app and utilize the native Windows 8.1 control. To migrate to the native control, all source code references to the Callisto* library were removed. Please see Figure 6 to see the updated project references in the solutions explorer.

Figure 6: Project references in sample app after retargeting to Windows 8.1* (captured from Visual Studio 2013*)

WinRTXamlToolkit* is still being utilized for charts and other features, so it has been updated to the Windows 8.1 version.

By using the newly available Windows 8.1 XAML settings control, the app maintains the same look and feel as when using the 3^rd party library. Figure 7 shows the settings control in design mode.

Figure 7: Settings Flyout UI in design mode (captured from Visual Studio 2013*)

Using the new XAML based settings control, SettingsFlyout, is similar to other XAML controls. The following snippet shows the XAML code used for the sample app’s settings UI.

<SettingsFlyout
    x:Class="PRApp.Views.PRSettingsFlyout"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PRApp.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    IconSource="Assets/SmallLogo.png"
    Title="PRApp Options"
    HeaderBackground="{StaticResource StandardBackgroundBrush}"
    d:DesignWidth="346"
    xmlns:c="using:PRApp.ViewModels">

    <SettingsFlyout.Resources>
        <c:SessionSettingsViewModel x:Key="myDataSource"/>
    </SettingsFlyout.Resources>
    <!-- This StackPanel acts as a root panel for vertical layout of the content sections -->
    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">


        <StackPanel Orientation="Horizontal"  Margin="5">
            <TextBlock Text="{Binding Source={StaticResource myDataSource}, Path=SessionSettings.Loginuser.Login}" Margin="0,0,5,0" />
            <TextBlock Text="{Binding Source={StaticResource myDataSource}, Path=SessionSettings.Loginuser.Loginmsg}" />
        </StackPanel>
        <Button Content="User Home" Margin="5" Command="{Binding Source={StaticResource prAppUtil}, Path=UserHomeCmd}"/>
        <Button Content="Logout" Margin="5" Click="Button_Click_1" />
        <ToggleSwitch Header="Show Deceased Patients" Margin="5" IsOn="{Binding Mode=TwoWay, Source={StaticResource myDataSource}, Path=SessionSettings.ShowDeceased}"/>
        <StackPanel Orientation="Horizontal"  Margin="5">
            <ToggleSwitch Header="Use Cloud Service" Margin="5,0,0,0" IsOn="{Binding SessionSettings.UseCloudService, Mode=TwoWay, Source={StaticResource myDataSource}}"/>
        </StackPanel>
        <StackPanel Orientation="Vertical"  Margin="5">
            <TextBlock Margin="5" FontSize="14" Text="Server Address:" Width="97" HorizontalAlignment="Left" VerticalAlignment="Center" />
            <TextBox HorizontalAlignment="Stretch" FontSize="12" Margin="5" Text="{Binding SessionSettings.ServerUrl, Mode=TwoWay, Source={StaticResource myDataSource}}"  />
        </StackPanel>


        <Button HorizontalAlignment="Right"  Click="Button_Click_Test_Connection" Content="Test Connection"/>
        <TextBlock  TextWrapping="Wrap"  x:Name="StatusText" HorizontalAlignment="Left" Text="{Binding SessionSettings.TestConnectionStatus, Source={StaticResource myDataSource}}"  />

    </StackPanel>
</SettingsFlyout>

Figure 8: XAML code snippet for settings flyout in sample app

Configuring and initializing the SettingsFlyout is done in the app’s main point of entry (App.xaml.cs file). SettingsFlyout is added to the ApplicationCommands collection. Please see the following code snippet in Figure 9 for reference.

protected override void OnWindowCreated(WindowCreatedEventArgs args)
{
    Windows.UI.ApplicationSettings.SettingsPane.GetForCurrentView().CommandsRequested += Settings_CommandsRequested;
}

void Settings_CommandsRequested(Windows.UI.ApplicationSettings.SettingsPane sender, Windows.UI.ApplicationSettings.SettingsPaneCommandsRequestedEventArgs args)
{
    Windows.UI.ApplicationSettings.SettingsCommand PRSettingsCmd =
        new Windows.UI.ApplicationSettings.SettingsCommand("PRAppOptions", "PRApp Options", (handler) =>
        {
            PRSettingsFlyout PRSettingsFlyout = new PRSettingsFlyout();
            PRSettingsFlyout.Show();

        });

    args.Request.ApplicationCommands.Add(PRSettingsCmd);
}

Figure 9: Code snippet showing the settings flyout initialization

SettingsFlyout is an excellent feature in Windows 8.1 that iseasy to use and it comes with all the design best practices recommended for Windows Store Apps. In addition, the effort to transition to this native control was painless.

Summary

This article discussed retargeting a sample health care Windows Store App from Windows 8 to Windows 8.1. The steps involved in the retargeting process were covered in detail with relevant screenshots and code snippets. The article concluded with a discussion about replacing a 3^rd party library with a native Windows 8.1 control.

Intel, the Intel logo are trademarks of Intel Corporation in the US and/or other countries.

*Other names and brands may be claimed as the property of others.

++This sample source code is released under the Intel OBL Sample Source Code License (MS-LPL Compatible), Microsoft Limited Public License, and Visual Studio* 2013 License.