Partager via

Getting started with Hilo (Windows Store apps using C++ and XAML)

  • Article

From: Developing an end-to-end Windows Store app using C++ and XAML: Hilo

Previous page | Next page

Here we explain how to build and run the Hilo Windows Store app, how the C++ and XAML source code is organized, and what tools and languages it uses.

Download

After you download the code, see Building and running the sample on this page for instructions.

Important  Before you run the sample, ensure that you have at least 1 image in Pictures. Having a variety of image formats and sizes will exercise more parts of the code. For example, the rotate operation stores the orientation in Exchangeable Image File (Exif) data for images that support Exif (such as many JPEG and TIFF images). The cartoon effect operation scales down large images to a maximum of 1024x768 pixels.

 

Building and running the sample

Build the Hilo project as you would build a standard project.

  1. On the menu bar, choose Build > Build Solution. The build step compiles the code and also packages it for use as a Windows Store app.
  2. After you build the project, you must deploy it. On the menu bar, choose Build > Deploy Solution. Microsoft Visual Studio also deploys the project when you run the app from the debugger.
  3. After you deploy the project, pick the Hilo tile to run the app. Alternatively, from Visual Studio, on the menu bar, choose Debug > Start Debugging. Make sure that Hilo is the startup project.

You can run Hilo in any of the languages that it supports. Set the desired language from Control Panel. For example, if you set the preferred language to Arabic (Saudi Arabia) before you start Hilo, the app will display Arabic text right-to-left and use the default calendar for that locale. Here is a screen shot of the year groups view localized for Arabic (Saudi Arabia).

The Hilo source code includes localization for Arabic (Saudi Arabia), English (United States), German (Germany) and Japanese (Japan).

[Top]

Projects and solution folders

The Hilo Visual Studio solution contains three projects: Hilo, HiloTests, and CartoonEffect.

Note  The version of Hilo that contains the HiloTests project is available at patterns & practices - Develop Windows Store apps using C++ & XAML: Hilo.

 

The Hilo project uses Visual Studio solution folders to organize the source code files into these logical categories:

  • The Assets folder contains the splash screen, tile, and other images.
  • The Common folder contains common page and navigation functionality for the app.
  • The ExceptionHandling folder defines the policies and classes for dealing with unhandled exceptions.
  • The Imaging folder contains imaging extension code and helpers.
  • The Models folder contains repository code and other classes that are used by viewmodels.
  • The Strings folder contains resource strings, with subfolders for each locale.
  • The Tile folder contains the code that updates the app's Start screen tile.
  • The ViewModels folder contains the application logic that is exposed to XAML controls.
  • The Views folder contains the app's XAML controls.
  • The XamlExtensions folder contains data converters and other utilities.

The HiloTests project contains unit tests for Hilo. It shares code with the Hilo project and adds source files that contain unit tests. The CartoonEffect project implements an image processing algorithm that applies a cartoon effect to an image, packaged as a static library.

You can reuse some of the components in Hilo with any app with little or no modification. For your own app, you can adapt the organization and ideas that these files provide. When we consider a coding pattern to be especially applicable in any app, we call it out here.

[Top]

The development tools and languages

Hilo is a Windows Store app that uses C++ and XAML. This combination is not the only option. You can write Windows Store apps in many ways, using the language of your choice. When we considered which language to use for Hilo, we asked these questions:

  • What kind of app do we want to build?  If you're creating a food, banking, or photo app, you might use HTML5/CSS/JavaScript or XAML/C++/C#/Visual Basic because the Windows Runtime provides enough built-in controls and functionality to create these kinds of apps. However, if you're creating a 3-D app or game and want to take full advantage of graphics hardware, you might choose C++ and DirectX.
  • What is our current skillset?   If you're a XAML expert, then XAML and C++ or .NET might be a natural choice for your app. If you know web development technologies, you might choose HTML5, CSS, and JavaScript.
  • What existing code can we bring forward?   If you have existing code, algorithms, or libraries that work with Windows Store apps, you can bring that code forward. For example, if you have existing app logic written in C++, you might consider creating your Windows Store app with C++.

Tip  You can build reusable Windows Runtime components using C++, C#, or Visual Basic. You can use your component in any of your apps, even if they are written in a different programming language. For more info, see Creating Windows Runtime Components.

 

We chose C++ for performance and because it matched our skillsets. We believed that a full photo app would likely perform compute-intensive image processing such as image filter effects, and we knew that C++ would let us best take advantage of the multicore and GPU capabilities of the hardware platform in this case. For example, Hilo uses C++ Accelerated Massive Parallelism (C++ AMP) to implement a cartoon effect. C++ gave us a direct path to libraries such as C++ AMP and the Parallel Patterns Library (PPL).

We chose XAML for developer productivity. We believed that XAML's declarative UI approach and many built-in features would save us time and let us focus on design and core app logic.

We chose Visual Studio Express as our environment to write, debug, and unit test code, Team Foundation Server to track planned work, manage bug reports, version source code, and automate builds, and Blend for Visual Studio to design animations.

The document Your first app orients you to the language options available.

Note  Regardless of which language you choose, you'll want to ensure your app is fast and fluid to give your users the best possible experience. The Windows Runtime enables this by providing asynchronous operations. Each programming language provides a way to consume these operations. See Asynchronous programming to learn more about how we used C++ to implement a fast and fluid UX.

 

[Top]