Channels ▼

Open Source

Writing Your First Windows 8 App: The Lay of the Land

If you take a look at the references included in the new project, you will notice that there are just two items (see Figure 9):

  • .NET for Windows Store apps
  • Windows

Figure 9: The project structure for a Windows Store Grid app.

A Grid app is composed of three pages:

  • GroupedItemsPage.xaml. It's the main page, also known as the "hub." This page displays the group title and one tile for each item in the group (when rendered, it looks like Figure 10).

Figure 10: The XAML preview for the default hub in a Grid app.

  • GroupDetailPage.xaml. Whenever you click or tap on a group title, this page displays detailed information about the group on the left-hand side, and one tile for each item in the group on the right-hand side, including a summary for each item. This page is also known as the "spot."

Figure 11: The XAML preview for the default spot in a Grid app.

  • ItemDetailPage.xaml. Whenever you click or tap on an item tile, the app will navigate to this page to display the details for the selected item. This page is also known as "detail." Thus, the Grid app is composed of hub, spot, and detail.

Figure 12: The XAML preview for the default detail in a Grid app.

The Grid app provides a nice navigation model. However, the initial color scheme is really horrible and it seems you're working with a monochrome screen, or an old CGA-based graphic system. You will usually want to customize the styles for your Windows Store apps. In this case, I want the app to have a nice tile in the Start screen, a splash screen, a small tile for the Search screen, and different styles for the screens. To accomplish this, it is necessary to grab data from a Web service using the new System.Net.HttpClient, which I'll discuss further in next week's article. In a future installment, I will dive into integrating the app with other apps and services.

A final note to help you prepare for next week's deeper dive: As I mentioned in my article "Using Asynchronous Methods in ASP.NET 4.5 and in MVC 4" asynchronous methods are an essential part of the new Windows 8 apps user experience. If you aren't familiar with the new async and await modifiers that are part of C# 5.0, I suggest you to read the article before attempting Windows 8 app development with XAML and .NET for Windows Store apps. Microsoft wants Windows 8 apps to be both simple and fluid, so .NET for Windows Store apps provides I/O-bound operations based on the new asynchronous programming model. You can take advantage of them to avoid blocking the UI.

In this first article, I've provided a brief overview of important things you should consider before starting your adventures in Windows 8 apps land. In next week's article, I'll explain how to customize the appearance of the app and you'll learn how to consume a Web service by using the new asynchronous methods provided by System.Net.HttpClient. This way, you will have a real-life example of an app developed from scratch that consumes a Web service prepared to provide data to the app.

Gaston Hillar is a frequent contributor to Dr. Dobb's on the topic of Microsoft development.

Related Reading

Customizing the Appearance of Windows 8 Apps

Access Data with REST in Windows 8 Apps

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.