Windows Store App Development Tutorial - Part 1 : Overview and Requirements of Windows Store App Development

Welcome to the Learn Windows Store Application Development in 31 days series. In this series we are going to start looking into what is a Windows Store App is all about and understand the latest and much awaited Modern UI design to develop your first Windows store application and upload to the Windows Store in this 31 days tutorial. This tutorial is targeted to the Level 100 to Level 300 audience which is going to explain about start developing the app from the scratch and explains the components and tools that will be used to develop a Unique application which will be packaged and uploaded to the Market place.

What is Windows Store Application?

Before we dig into what and why a Windows Store Application is all about, we will first take a look on what Windows 8 is all about  as Windows 8 will be the base Operating system which the Windows Store is targeted upon. So for those who are not familiar with Windows 8 here is a small idea on the same, “ Windows 8 is the new operating system announced by Microsoft for use on personal computers, including home and business desktops, laptops, tablets, and home theater PCs. Windows 8 introduces significant changes to the operating system's graphical user interface and platform, such as a new interface design incorporating a new design language used by other Microsoft products, a new Start screen to replace the Start menu used by previous versions of Windows, a new online store that can be used to obtain new applications, along with a new platform for apps that can provide what Microsoft described as a "fast and fluid" experience with emphasis on touchscreen input.”

So as quoted in the above sentence, Microsoft has a new Online Store which is targeted to Application development on a set of pre acceptable guidelines which is basically a new Modern UI (Metro UI later) which is not called “Windows Store Application” Here is a small idea on how the new Windows 8 operating system will be.

Windows 8 is fast and speedy that when we use the application or play games, as Windows 8 starts quickly and uses less memory for the application and games. Also Windows 8 is cloud connected, so we can have direct access to the data over the cloud to the Windows 8 PC or the tablet on the go. Like Windows Phone Marketplace here in Windows 8 as well we have a market place where have option to download the latest applications and games and share along with your friends over the social networking media.

So What are the requirements of Windows Store App Development?

Windows store application can be developed with Visual Studio 2012 which has launched a month before, so basically we need to have a Windows 8 Operating System which is already available running on a development machine along with Visual Studio 2012 IDE. For downloading these software's visit to http://msdn.microsoft.com and install on the development machine. 

Once you downloaded and installed the Windows 8 and Visual Studio 2012 IDE we can see some of the base templates that are available to be used to develop the Windows store application as shown in the screen below.

 We will look into these templates in detail in our upcoming articles, meanwhile once we can see the Windows Store template available we need to register and activate the license of the Windows Store application development using Visual Studio 2012. 

What are the Software and Hardware Requirements to Build Windows Store Application?

Below are some of the requirements which needs to be taken into consideration while setting up the development environment for developing Windows Store Applications. 

Hardware Requirements: (For Installing Windows 8)

•  Processor: 1 gigahertz (GHz) or faster
• RAM: 1 gigabyte (GB) (32-bit) or 2 GB (64-bit)
• Hard disk space: 16 GB (32-bit) or 20 GB (64-bit)
• Graphics card: Microsoft DirectX 9 graphics device with WDDM driver

Software Requirements:

•  Visual Studio 2012 Express or RTM  
• Windows 8 SDK 
• Windows App Certification Kit For Windows RT 

How a Windows Store Application look like? 

Windows Store applications are going to be next gen apps which will target the user experience more closely compared to the other aspects. With Windows Store application users will be really having some exciting options to navigate and play around with the application and games that can be developed. The application will be opened in Full Screen with navigation options available all through the sliding lookups at the right side as well with the new Start screen that is easily available.

The below screen is a sample on how a Windows Store Application looks like, this application is developed using XAML with C# for Windows Store application development. This app is called Gift Ideas which gives gift ideas for particular occasions.

So in our next tutorial we will see the different templates available and how to start developing our first Windows Store Application using Visual Studio 2012 IDE. To follow this series I would suggest every one to start installing the required software’s on to there deveopment machines and be ready to develop your unique Windows Store app to publish to Windows Store.

Navigation In Windows Store Apps.

The UI design for your Windows Store app is about organizing and presenting content to your users, and providing commands that enable your users to act on the content. UI design includes the organization of pages in the app, the navigation between pages, and the layout of content and commands on each page.

Add pages and navigation : 

In this tutorial, we go over the basics of creating a user interface in Extensible Application Markup Language (XAML). To learn these basics, you create a simple photo viewer that lets the user pick an image from their Pictures Library, and then it shows the image and some info about the image file. 

The first thing you need to do is add a new page to your app for the photo viewer. Then you add a navigation command to the main page so that the user can navigate to the new page.

 To add a page to an app : 

1. Select Project > Add New Item. The Add New Item dialog box opens.
2. Under Visual C# or Visual Basic in the left pane, pick the Windows Store template type.
3. In the center pane, pick Basic Page.
4. Enter "PhotoPage.xaml" as the name for the page.
5. Click Add. The XAML and code behind files for your page are added to the project. Here's the Add New Item dialog.
   
   
   
    

1. To change the page title, select the "My Application" text near the top of PhotoPage.xaml. Make sure the TextBlock named pageTitle is showing in the Properties panel and the Properties view () is selected.
   
2. Under Common in the Properties panel, click the property marker for the Text property. The property menu opens.
3. In the property menu, select Edit Resource. The Edit Resource dialog opens.
4. In the Edit Resource dialog, change the value from "My Application" to "Hello, photo!".
5. Click OK.The XAML for the resource definition is updated like this.
   
   

    <x:String x:Key="AppName">Hello, photo!</x:String>

   Add navigation :

   The XAML UI framework provides a built-in navigation model that uses Frames and Pages and works much like the navigation in a web browser. The Frame control hosts Pages, and has a navigation history that you can use to go forward and back through pages you've visited. You can also pass data between pages as you navigate.
   
   
   To navigate between pages :
   
   
   1. In Solution Explorer, double-click MainPage.xaml to open it.
   2. In the XAML editor, find the StackPanel that contains the greetingOutput TextBlock. Immediately after the greetingOutput TextBlock, add a Button element, like this:  

         <Button x:Name="photoPageButton" Content="Go to photo page"/>

       Here's the button you added with the surrounding XAML.
   
   

   <StackPanel Grid.Row="1" Margin="120,30,0,0">
       <TextBlock Text="What's your name?"  

                           Style="{StaticResource BasicTextStyle}"/>
       <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
           <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"
                    TextChanged="NameInput_TextChanged"/>
           <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
       </StackPanel>
       <TextBlock x:Name="greetingOutput"  

                          Style="{StaticResource BigGreenTextStyle}"/>
       <Button x:Name="photoPageButton" Content="Go to photo page"/>
   </StackPanel> 

   3. In the XAML editor or design view, select the "Go to photo page" Button that you added to MainPage.xaml.
   4. In the Properties panel, click the Events button ().
   5. Find the Click event at the top of the event list. In the text box for the event, type "PhotoPageButton_Click" as the name of the function that handles the Click event.
   6. Press Enter. The event handler method is created and opened in the code editor so you can add code that's executed when the event occurs.
   7. Add this code to the event handler that you created in the code behind page. In the event handler, navigate to the new photo page that you added to the app. 
   
   

     // Add this code.
               if (this.Frame != null)
               {
                   this.Frame.Navigate(typeof(PhotoPage));
               }

   8. Press F5 to build and run the app. Click the Go to photo page button. The photo page opens. Click the back button to navigate back to the main page.
   
   
   
   You don't need to add a back button to the photo page. The photo page is based on the LayoutAwarePage class, which has built-in support for navigation. The back button uses the Frame history to go back to the previous page, and is shown only when the Frame.CanGoBack property is true. For more examples of navigation support, see the "Navigation support" region of the LayoutAwarePage.cs/.vb file in the Common folder of the project.
   
   
   

Project templates for Windows Store apps

This topic describes the project templates for Windows Store apps built for Windows using Visual C#.

Grid project template for Windows Store apps : 

The Grid App template is a great way to start a Windows Store app that you can customize to enable users to browse through categories to find content in which they'll want to fully immerse themselves. Examples include shopping apps, news apps, and photo or video apps. 

The Grid app starts with a home page that shows a list of groups. A group is a named set of items, such as a part of a virtual department store that contains individual retail items. If the user selects a group, the app opens the group details page, which displays a list of the items on the right side. The user can select an item on either the home page or the group details page. This opens a full-page view that shows the item details (shown here on top).

The Grid App template includes these .xaml files : 

• App.xaml, which is loaded first and provides markup for the content host (where each page is loaded into the main window).
• GroupedItemsPage.xaml, which is the home page. It enables a user to view the groups and items, and either select an item to navigate to the full-page item view, or a select a group label to navigate to the group details page..
• GroupDetailPage.xaml, which enables a user to view group details on the left and items on the right, and select an item to navigate to the full-page item view.
• ItemDetailPage.xaml, which is the full-page view for an item. 

The template includes these .cs|.vb|.cpp|.h files:

• App.xaml.cs|.vb|.cpp|.h, which specifies how the app behaves when it's started.
• GroupedItemsPage.xaml.cs|.vb|.cpp|.h, which specifies behavior that's associated with the home page.
• GroupDetailPage.xaml.cs|.vb|.cpp|.h, which specifies behavior that's associated with the group details page.
• ItemDetailPage.xaml.cs|.vb|.cpp|.h, which specifies behavior that's associated with the full-page item view.
• SampleDataSource.cs|.vb|.cpp|.h, which is the data-source object that exposes the data to the app.

The Grid App template also includes the package.appxmanifest file, which describes the app package for Windows, and a .pfx file that's used to sign the .appxmanifest file. (This file is included as a project file to support building from the command line.) The template also includes several image files, like splashscreen.png for the splash screen image, and storelogo.png, which is used for Windows Store.

Split project template for Windows Store apps :

The Split App template is a great way to start creating a Windows Store app that you can customize to enable users to view a list of items and item details in a two-column view, where users might want to switch quickly among the items, and where the list might be updated dynamically. Examples include a news reader, a sports scores app, or an email app. 

The Split app starts with a home page that shows a list of groups. A group is a named set of items, like a news source that provides news stories. When the user selects a group by tapping or clicking it, the app opens the split-view page. The Split app pages are shown here:  

The split-view page displays a two-column view (or master/detail view), where the details on the right side change when a user selects an item on the left side. Again, imagine a list of news stories on the left side and the actual stories on the right side.

The Split App template includes these .xaml files: 

• App.xaml, which is loaded first and provides markup for the content host (where each page is loaded into the main window).
• ItemsPage.xaml, which is the home page. It enables a user to select a group to navigate to the app's split-view page.
• SplitPage.xaml, which is the split-view page. It defines two sections—one for the list of items on the left and another for the item details on the right.

 The template includes these .cs|.vb|.cpp|.h files:

• App.xaml.cs|.vb|.cpp|.h, which specifies how the app behaves when it's started.
• ItemsPage.xaml.cs|.vb|.cpp|.h, which specifies behavior that's associated with the home page.
• SplitPage.xaml.cs|.vb|.cpp|.h, which specifies behavior that's associated with the split-view page.
• SampleDataSource.cs|.vb|.cpp|.h, which is the data-source object that exposes data to the app.

The Split App template also includes the package.appxmanifest file, which describes the app package for Windows, and a .pfx file that's used to sign the appxmanifest file. (This file is included as a project file to support building from the command line.) The template also includes several image files, like splashscreen.png for the splash screen image, and storelogo.png, which is used for Windows Store.

What comes with a template?

When you open a project template, a folder labeled "Common" appears in Solution Explorer. This folder contains a few classes and resources that your project, and any item templates that you add, rely on. Because of this dependency, you shouldn't modify the contents of this folder, but you can (and often should) override some of these styles and methods elsewhere in your app to make them work the way you want them to. This illustration shows the default contents of Solution Explorer when you create a Visual C# Grid App project:

 

XAML overview

 Microsoft introduce the XAML language and XAML concepts to the Windows Store app developer audience, and describe the different ways to declare objects and set attributes in XAML as it is used for creating a Windows Store app.

What is XAML?

Extensible Application Markup Language (XAML) is a declarative language. Specifically, XAML can initialize objects and set properties of objects, using a language structure that shows hierarchical relationships between multiple objects, and using a backing type convention that supports extension of types. You can create visible user interface (UI)elements in the declarative XAML markup. You can then associate a separate code-behind file for each XAML file that can respond to events and manipulate the objects that you originally declare in XAML. The XAML language supports interchange of sources between different tools and roles in the development process without information loss, such as exchanging XAML sources between Visual Studio and Microsoft Expression Blend so that designer roles and developer roles are separate and can iterate on the development of an app. XAML files are XML files that generally have the .xaml file name extension.

Basic XAML Syntax : 

XAML has a basic syntax that builds on XML, and by definition valid XAML must be valid XML. But XAML also has syntax concepts that are assigned a different and more complete meaning. For example, it supports property element syntax, where property values can be set through elements rather than strings. 

Microsoft Visual Studio helps you to produce valid XAML syntax, both in the XAML text editor and in the XAML design surface. So, don't worry too much about the syntax with each keystroke. The IDE often helps you write valid syntax via autocompletion, suggestions in Microsoft IntelliSense lists, or other techniques. If this is your first experience with XAML, it might still be useful to know the syntax rules and particularly the terminology that is sometimes used to describe the restrictions or choices.

XAML namespaces :

By a broad definition for programming, a namespace determines how strings or identifiers that reference programming entities are interpreted. A namespace can also resolve ambiguities if you reuse identifiers. By using namespaces, a programming framework can separate user-declared identifiers from framework-declared identifiers, disambiguate identifiers through namespace qualifications, and so on. A XAML namespace serves this purpose for the XAML language. Here's how XAML applies and extends XML namespace concepts:

• XAML uses the reserved default-namespace XML attribute xmlns for namespace declarations, and the value of the attribute is a URI.
• XAML uses prefix declarations to declare non-default namespaces, and prefix usages in elements and attributes to reference that namespace.
• XAML has a concept of default namespace, which doesn't have to be the XML language default namespace.
• Namespace definitions inherit in an XML document from parent element to child element.
• Attributes of an element inherit the element's namespaces.                                                

XAML file almost always declares a default XAML namespace in its root element. The default XAML namespace defines which elements you can be declare without qualifying them by a prefix.

The XAML language XAML namespace : 

One particular XAML namespace that is declared in nearly every Windows Runtime XAML file is the XAML namespace for elements that are defined by the XAML language. By convention, the XAML language XAML namespace is mapped to the prefix "x". The default project and file templates for Windows Store app projects always define both the default XAML namespace (no prefix, just xmlns=) and the XAML language namespace (prefix "x") as part of the root element. For example, this snippet is a template-created Page root of the initial page for an app (showing the opening tag only, and simplified): 

<Page
    x:Class="Application1.BlankPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
</Page>

The "x" prefix/XAML language XAML namespace contains several programming constructs that you use often in your XAML. Here are the most common 

x: prefix/XAML namespace constructs:

x:key : Sets a unique user-defined key for each resources in a ResourceDictionay. The Key          token string is the argument for the StaticResource markup extension to retrieve any such resource from another XAML usage.
x:Class : pecifies the code namespace and class name for the class that provides code-behind for a XAML page, and names the class that is created or joined by the build actions that support the XAML markup compiler when the app is compiled. You must have such a class to support code-behind, or to have your XAML content be initialized as Window.Content.
x:Name :Specifies a run-time object name for the instance that exists in run-time code after an object element defined in XAML is processed. You can always use x:Name for element identification, which is useful when FrameworkElement.Name is not supported on that element type.                                                                                                                       x:Uid : Identifies elements that should use localized resources for some of their property values.

The Best New Features In Windows 8

Windows 8 is available for download now, complete with a new tiled, touch-friendly interface as well as some enhancements to the traditional mouse-and-keyboard desktop. Here's everything you'll find in the newest version of Windows.

Microsoft's "re-imagining" of Windows is focused very heavily on a new, tiled, touch-centric interface for tablets. However, it's still somewhat usable with a mouse and keyboard-and no matter what device you're on, you can switch between the simple Metro interface and the traditional Windows desktop to fit whatever your needs are at that given moment.

Performance Increases :

One of the issues that's been on our minds since they first previewed this new interface was whether this will keep bogging Windows down with more running processes, and whether running a full Windows desktop on a low-powered tablet was really a good idea (after all, we've seen Windows run on net-books).

Microsoft knows your fears, and has addressed them: Windows 8 is slated to have better performance than Windows 7, even with this metro interface running on top of a desktop. We ran a few tests back when the the Developer Preview came out and found that to be the case, especially when it comes to boot times. Tablet users and net-book users especially should notice a fairly significant performance increase with Windows 8. Especially considering that any of your tablet-based apps will suspend themselves when you jump into the traditional desktop, so all they take up is a little of that extra RAM.

The Lock Screen : 

Windows 8's lock screen is pretty much what you'd expect: it's got a beautiful picture along with a few little widgets full of information, like the time, how many emails you have, and so on.

  You can swipe up to unlock, or press the space-bar if you're on a desktop keyboard. You can then proceed to type your normal password, or use one of Windows 8's "picture passwords," which let you swipe or draw an invisible gesture that only you know, using your lock screen photo as reference, to let yourself in (though this is really better on tablets than it is on a PC). For example, in Microsoft's original demo, they used a photo of a person, and the password was to tap on their nose and swipe left across their arm).

The Start Screen :

 Once you log in, you're taken to Windows 8's new Start screen, which replaces the old Start menu. The screen should be familiar to Windows Phone users: You've got a set of tiles, each of which represents an application, and many of which show information and notifications that correspond to the app.

For example, your email tile will tell you how many unread emails you have (and who they're from), your calendar tile will show upcoming events, your music tile will show you what's playing, and so on. You can also create tiles for games, contacts, and even traditional Windows apps that will pull you into the Windows desktop. The tablet-optimized apps are all full screen and "immersive", though, and you can rearrange their icons on the home screen easily (just as you would on any other tablet platform). At any time, you can press Win+D or click on the Desktop tile to go to the familiar Windows desktop instead.

The Desktop : 

Once you get to the desktop, you'll be in much more familiar territory. You've got your taskbar, your desktop icons, and your normal windowed applications as you're used to (though they have a new, flatter, Aero-less theme). The Start menu, however, is gone—instead, you can move your mouse to the bottom left hot corner and click to return to the Start screen, or press the Windows key as normal. Like the old Start menu, you can start typing any time you're on the Start screen to start searching for an app or setting, giving you quick access to everything on your computer.

 It isn't nearly as convenient as the old Start menu was, but you can get used to most stuff pretty quickly. Pressing the Windows button and typing in an app or setting is faster than browsing the Start menu anyway, so it's a good habit to get into, and you can always access a more traditional menu by pressing Win+X—this will bring up a small menu in the corner that has shortcuts to the Control Panel, Run, the Command Prompt, and other stuff advanced users may want to access.

Full Screen Apps : 

While you can pin your favorite apps to the taskbar, as usual, most of your apps will reside on the Start screen, just like they used to reside in the Start menu. Just fire up the Start screen and tap or click on the tile for the app you want to launch (or, as we mentioned above, type it in the search box). Tablet-optimized apps will go full screen, while others will shoot you back to the desktop.

 The full-screen apps that come with Windows 8 are really nice: most have touch-based controls, like pinch to zoom and copy and paste, but you can also use them with a mouse and keyboard if you so desire. Each has options like search, share, and settings through the Charms bar, which you can get by swiping from the right edge of the screen or pressing Win+C. Apps can share information one another easily, such as selected text or photos. After picking your media from one app, you'll then be able to choose which app you want to share with, and work with it from there. For example, you can share photos to Facebook, send text from a web page in an email, and so on.

None of this is brand new to touch-based platforms, but what is new is the ability to not only multitask, but run these apps side by side. Say you want to watch a video and keep an eye on your news feed at the same time. Just like in Windows 7 for the desktop, you can dock an app to one side of the screen while docking another app at the opposite side, which is a seriously cool feature. Imagine being able to IM and play a game at the same time, or browse the web while writing an email. It's a fantastic way to fix one of the big shortcomings of mobile OSes, thus allowing you to ignore the full desktop interface more often and stay in the touch-friendly, tablet view.

The Windows Store : 

The Windows Store looks much like the home screen, with tiles that correspond to different categories and featured apps. From there, you can look at a more detailed list of the available apps in a given section. And, the store contains not only touch-based apps for the tablet interface, but some of the more traditional desktop Windows apps you're used to, so you have one portal to discover all your Windows apps no matter what interface you're using. The Store has free and paid apps, and you can try paid apps before you commit to buying, which is really, really nice.

Sync All Your Data to the Cloud : 

The cloud is taking center stage in Windows 8, with your Microsoft account driving all the syncing. Your address book, photos, SkyDrive data, and even data within third-party apps can sync up to the cloud, and you can access them on any Windows 8 device—even a brand new one. Just sign in, and you'll have access to everything (not unlike Chrome OS, which immediately loaded your themes and extensions when you logged in). 

The address book also syncs with other services like Facebook and Twitter as well. You can even sync all of your settings from one Windows 8 PC to another. Just sign onto your Windows 8 with a Microsoft account and you'll get all your themes, languages, app settings, taskbar, and other preferences will show right up. It's a pretty neat feature if you have multiple Windows 8 PCs and don't want to set them all up separately—just a few taps and you've got all your preferences ready to go (you will have to re-download your apps, though).

Windows Explorer : 

Windows Explorer has gone through a few changes this time around, most notably the "Ribbon" interface we've come to know from Microsoft Office. Instead of traditional menus like View, you now have three Ribbon panes: Home, Share, and View, that give you access to the features that used to be in the menus. If you're in a folder designed for certain file types—like the "Pictures" library—you'll get a few extra Ribbon panes centered around photos, which is pretty cool.

Windows Explorer also has native mounting of ISO files, a one folder up button like the old days of XP (thank God), and a really cool "quick access" toolbar in the left-hand corner that lets you add your favorite shortcuts to the title bar. It also has a new file copy dialog that makes it easier to manage move-and-replace actions with lots of files.

A New Task Manager :

Microsoft's finally redesigned the task manager, and it looks pretty great. You have a very simple task manager for basic task killing, but if you're a more advanced user, you can bring up the detailed task manager filled with information on CPU and RAM usage, Metro app history, and even startup tweaking—so you can get rid of apps that launch on startup without going all the way into msconfig.

Built-In Antivirus with Windows Defender : 

Remember Microsoft Security Essentials, our favorite antivirus app for Windows? Well, now it's built in to Windows 8 as Windows Defender. It has nearly the exact same interface and feature set; the main difference is that you no longer have to install it.

Other Features :

Along with these cool features, Windows 8 also comes with other features we've come to know and love to see in desktop and mobile OSes alike. It's got system-wide spellchecking, so you don't have to rely on a specific app to keep your writing top-notch, as well as a system-wide search feature, that lets you search anything from your music library to your contacts to the web itself. It also has a really cool feature for desktop users that lets your run the Metro UI on one monitor while running the traditional desktop on the other (not to mention better support for multiple monitors in general—like having the taskbar on both screens).

 It also has a really cool feature called "refresh your PC", where you can do a clean install with the tap of a button. Whether you're selling your machine or just want a cleaner, faster installation of Windows, you can do it all in one click. You can even set refresh points, similar to restore points, so you can refresh your PC to the way it was at a certain point in time.

This is a condensed version of everything you'll find in Windows 8, but the best way to see the new features is to experience it for yourself.

Creating A First Windows 8 App : Hello World. Step 5: Style the start page

Choosing a theme

It's easy to customize the look and feel of your app. By default, your app uses resources with a dark style. The system resources also include a light theme. Let's try it out and see what it looks like.

To switch to the light theme

1. In Solution Explorer, double click App.xaml to open it. 

2. In the opening Application tag, add the RequestedTheme property with its value set to Light.  

 

    RequestedTheme="Light"

    Here's the full Application tag with the light theme added.

  <Application
    x:Class="HelloWorld.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld" 
    RequestedTheme="Light">

3. Press F5 to build and run the app. Now it uses the light theme. 

Which theme should you use? Whichever one you want. For apps that mostly display images or video, we recommend using the dark theme, and for apps that contain a lot of text, we recommend using the light theme. If you're using a custom color scheme, use the theme that goes best with your app's look and feel.?

Using standard styles : 

Earlier in this tutorial, we pointed out that the App.xaml file contains a reference to the StandardStyles.xaml ResourceDictionary: 

<ResourceDictionary.MergedDictionaries>

    <!-- 
        Styles that define common aspects of the platform look and feel
        Required by Visual Studio project and item templates
    -->
    <ResourceDictionary Source="Common/StandardStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>        
        

Right now, all the text is very small and difficult to read. You can easily apply the standard styles to elements in your app to make them look great.

To style an element : 

1. Double-click MainPage.xaml in Solution Explorer to open it. 

2. In XAML or design view, select the "What's your name?" TextBlock that you added previously.

3. In the Properties Window, click the Properties button ()

4. Expand the Miscellaneous group and find the Style property.

5. Click the property marker next to the Style property to open the menu.

6. In the menu, select Local Resource > BasicTextStyle. 
   BasicTextStyle is a resource defined in the StandardStyles.xaml ResourceDictionary.

In the XAML design surface, the appearance of the text changes. In the XAML editor, the XAML for the TextBlock is updated.

<TextBlock Text="What's your name?" Style="{StaticResource BasicTextStyle}"/>

7.  Repeat the process to assign the BasicTextStyle to the greetingOutput TextBlock element.

Tip  There's no text in this TextBlock, but when you hover the mouse pointer over the XAML design surface, a blue outline shows where the TextBlock is so you can select it.

Your XAML now looks like this.

<StackPanel Grid.Row="1" Margin="120,30,0,0">
    <TextBlock Text="What's your name?" Style="{StaticResource BasicTextStyle}"/>
    <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
        <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
        <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
    </StackPanel>
    <TextBlock x:Name="greetingOutput" Style="{StaticResource BasicTextStyle}"/>
</StackPanel>

8. Press F5 to build and run the app. It now looks like this.

 

 

Creating A First Windows 8 App : Hello World. Step 4: Create an event handler.

XAML elements can send messages when certain events occur. These event messages give you the opportunity to take some action in response to the event. You put your code to respond to the event in an event handler method. One of the most common events in many apps is a user clicking a Button.

Let's create an event handler for your button's Click event. The event handler will get the user's name from the nameInput TextBox control and use it to output a greeting to the greetingOutput TextBlock. 

Using events that work for touch, mouse, and pen input :

What event should you handle? Because they can run on a variety of devices, design your Windows Store apps with touch input in mind. Your app must also be able to handle input from a mouse or a stylus. Fortunately, events such as Click and DoubleTapped are device-independent. If you're familiar with Microsoft .NET programming, you might have seen separate events for mouse, touch, and stylus input, like MouseMove, TouchMove, and StylusMove. In Windows Store apps, these separate events are replaced with a single PointerMoved event that works equally well for touch, mouse, and stylus input. 

To add an event handler

1. In XAML or design view, select the "Say Hello" Button that you added to MainPage.xaml.
2. In the Properties Window, click the Events button ().
3. Find the Click event at the top of the event list. In the text box for the event, type the name of the function that handles the Click event. For this example, type "Button_Click".   
4. Press Enter. The event handler method is created and opened in the code editor so you can add code that's executed when the event occurs. . In the XAML editor, the XAML for the Button is updated to declare the Click event handler like this. 
   

   <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>

5. Add code to the event handler that you created in the code behind page. In the event handler, retrieve the user's name from the nameInput TextBox control and use it to create a greeting. Use the greetingOutput TextBlock to display the result.
   

   private void Button_Click(object sender, RoutedEventArgs e)
   {
        greetingOutput.Text = "Hello, " + nameInput.Text + "!";
   }

6. Press F5 to build and run the app. When you enter your name in the text box and click the button, the app displays a personalized greeting.
   
   
   
   

Creating A First Windows 8 App : Hello World. Step 3 : Modify your start page

What's in the files?

When you create a new project that uses the Blank App template, Visual Studio creates an app that contains a handful of files. To view and edit the files, double-click the file in the Solution Explorer. You can expand a XAML file just like a folder to see its associated code file. By default, XAML files open in a split view that shows both the design surface and the XAML editor.

In this tutorial, we work with just a few of the files listed previously: App.xaml, App.xaml.cs/.vb, MainPage.xaml, and MainPage.xaml.cs/.vb.

App.xaml is where you declare resources that are used across the app. This file contains a ResourceDictionary that has a reference to the StandardStyles.xaml ResourceDictionary located in the Common folder. StandardStyles.xaml provides a set of default styles that gives your app the Windows 8 look and feel.

 

App.xaml.cs/.vb is the code-behind file for App.xaml. Code-behind is the code that is joined with the XAML page's partial class. Together, the XAML and code-behind make a complete class. App.xaml.cs/.vb is the entry point for your app. Like all code-behind pages, it contains a constructor that calls the InitializeComponent method. You don't write the InitializeComponent method. It's generated by Visual Studio, and its main purpose is to initialize the elements declared in the XAML file. App.xaml.cs/.vb also contains methods to handle activation and suspension of the app.

In the MainPage.xaml file you define the UI for your app. You can add elements directly using XAML markup, or you can use the design tools provided by Visual Studio. The Basic Page template uses a LayoutAwarePage. This class extends the base Page class and provides methods for navigation, state management, and view management. The Basic Page also includes some simple content, like a back button and page title.

MainPage.xaml.cs/.vb is the code-behind page for MainPage.xaml. Here you add your app logic and event handlers. The Basic Page template includes 2 methods to where you can save and load the page state.

 public sealed partial class MainPage : HelloWorld.Common.LayoutAwarePage
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// Populates the page with 
        /// provided when recreating 
        /// </summary>
        /// <param name="navigationParameter">
        /// <see cref="Frame.Navigate(Type, Object)"/> 

         /// </param>
        /// <param name="pageState">
        /// session.  
        protected override void LoadState(Object navigationParameter, 

                  Dictionary<String, Object> pageState)
        {
        }

        /// <summary>
        /// Preserves state associated with this page in case the 
        /// page is discarded from the navigation cache.  
        /// requirements of <see cref="SuspensionManager.SessionState"/>.
        /// </summary>
        /// <param name="pageState">An empty dictionary to be populated 
      protected override void SaveState(Dictionary<String, Object> 

                      pageState)
      {
      }

Modify the start page

Let's add some content to your MainPage.xaml file. 

To modify the start page

1. Double-click MainPage.xaml in Solution Explorer to open it in the XAML editor.
2. To change the page title, select the AppName resource near the top of the page.
   Tip  Press Ctrl+F to open the Quick Find box, and search for "AppName" if you have trouble finding it.
3. Under Common in the Properties panel, click the property marker for the Text property. The property menu opens.
   Note  The property marker is the small box symbol to the right of each property value. The Text property marker is green to indicate that it's set to a resource.
4. In the property menu, select Edit Resource. The Edit Resource dialog opens.
5. In the Edit Resource dialog, change the value from "My Application" to "Hello, world!".
6. Click OK.Change the value from "My Application" to "Hello, world!".The XAML is updated like this.
   

       <x:String x:Key="AppName">Hello, world!</x:String>

   7. In the root Grid, immediately before the <VisualStateManager.VisualStateGroups>  tag,    add a StackPanel with a TextBlock that asks the user's name, a TextBox  element to accept the user's name, a Button, and another TextBlock element. 

        <StackPanel Grid.Row="1" Margin="120,30,0,0">
          <TextBlock Text="What's your name?"/>
          <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
           <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
           <Button Content="Say &quot;Hello&quot;"/>
          </StackPanel>
          <TextBlock x:Name="greetingOutput"/>
        </StackPanel> 

8. Press F5 to run the app. It looks like this.

 

Creating A First Windows 8 App : Hello World. Step 2 : Step 2: Start the app

At this point, we created a very simple app. If you want to see what it looks like, press F5 to build, deploy, and launch your app in debugging mode. The default splash screen appears first, and then your app appears. It contains a black screen and the title "My Application".

There's no button or command to close the app. You can use the close gesture or Alt+F4 to close it, but you typically don't close. Press the Windows key to go to the Start screen; notice that deploying the app adds its tile to the last group on the Start screen. To run the app again, tap or click its tile on the start screen, or press F5 in Visual Studio to run it in debugging mode.

It doesn't do much—yet—but congratulations, you've built your first Windows Store app!
To stop debugging the app, press Alt+Tab to return to Visual Studio. In Visual Studio, click Debug > Stop debugging to close the app. You can't edit in Visual Studio while you're debugging.

Creating A First Windows 8 App : Hello World. Step 1 : Create a new project in Visual Studio

This tutorial teaches you how to create a simple "Hello, world"Windows Store app using Extensible Application Markup Language (XAML) with Microsoft Visual Basic or C#. It's the first tutorial in a series that teach you what you need to know to build any type of Windows Store app you want.

Step 1: Create a new project in Visual Studio

1. Launch Visual Studio Express 2012 for Windows 8. The Visual Studio Express 2012 for Windows 8 start screen appears.
   (Going forward, we'll refer to Visual Studio Express 2012 for Windows 8 as just "Visual Studio".)
   
2. Select File > New Project. The New Project dialog appears. The left pane of the dialog lets you select the type of templates to display.
   
3. In the left pane, expand Installed, then expand Visual Basic or Visual C# and select the Windows Store template type. The dialog's center pane displays a list of project templates for Windows Store apps.
   
   
   

    For this tutorial, we use the Blank App template. The Blank App template creates a minimal    Windows Store app that compiles and runs, but contains no user interface controls or data. You add controls and data to the app over the course of these tutorials. 

1. In the center pane, select the Blank App template.
2. In the Name text box, enter "HelloWorld".
3. Click OK to create the project. Microsoft Visual Studio creates your project and displays it in the Solution Explorer.
   
   
   

Although the Blank App is a minimal template, it still contains a lot of files:

• A manifest file (package.appxmanifest) that describes your app (its name, description, tile, start page, and so on) and lists the files that your app contains.
• A set of large and small logo images (logo.png and smalllogo.png)to display in the start screen.
• An image (storelogo.png) to represent your app in the Windows Store.
• A splash screen (splashscreen.png) to show when your app starts.
• XAML and code files for the app (App.xaml and App.xaml.cs/.vb) .
• A start page (MainPage.xaml) and an accompanying code file (MainPage.xaml.cs/.vb) that run when your app starts.

These files are essential to all Windows Store apps using Visual Basic or C#. Any project that you create in Visual Studio contains them.

Replace the MainPage

The MainPage in the Blank App project template is based on the Blank Page template. It contains the minimum amount of XAML and code to instantiate a Page. The other project and Page templates in Visual Studio include some additional code and helper classes that help you get started with your Windows Store app. When you use the Blank App project template, you can replace the blank MainPage with one of the other Page templates to take advantage of the layout and helper classes they provide. In this example, you replace the default MainPage with the Basic Page template. Later tutorials in this series depend on the helper classes used by the Basic Page template.

To replace MainPage in the blank app

1. In Solution Explorer, right-click MainPage.xaml and select Delete.
2. Click OK to confirm the deletion.
3. Select Project > Add New Item. The Add New Item dialog box opens. It looks similar to the New Project dialog.
4. In the Installed pane, expand Visual C# or Visual Basic.
5. Pick the Windows Store template type.
6. In the center pane, select the type of page to add to your project. For this example, select Basic Page.
7. Enter a name for the page. For this example, enter "MainPage".
8. Click Add.The first time you add a new page to the Blank App template (other than a Blank Page), Visual Studio shows a dialog with a message that the addition depends on files that are missing from your project. Click Yes to add these files. Files for several utility classes are added to your project in the Common folder.
   The XAML and code behind files for your page are added to the project.
   
9. Press F7 to build the app. The new page will show an error in the designer until you build the helper classes it depends on.

Introducing Windows Store App Labs for app builders

Microsoft introduced Windows Store App Labs in more than 30 cities around the world for all app builders – developers, designers, and entrepreneurs. Windows Store App Labs are places where you can access the newest Windows 8 devices, get technical help from Windows experts, and receive design guidance from leading edge designers and digital agencies. All for free!

Check out and test the newest Windows 8 devices

 The labs are stocked with the latest Windows 8 devices in multiple form factors including Windows RT tablets like Microsoft Surface, Ultrabooks, All-in-Ones, and more. Come in and test your app on a variety of screen sizes, input methods, and architectures.

Get technical guidance from Windows 8 experts

Our Windows experts are on hand to review your app and offer you any technical advice you need. They can help you with coding tips, debugging, and prepping your app to submit to the Windows Store.

Get design guidance from leading edge design agencies

You can also meet with designers and digital agencies who can provide design tips that really make your app stand out. Designers are available to review your app mock-ups or your complete app and provide feedback on how you can improve your app’s layout, live tile, navigation, and other UI elements.

Where are the app labs located?

The Windows Store App Labs are located in 30 cities around the world in exciting design and tech hubs like RocketSpace in San Francisco, Modern Jago in London, Dark Side Bakery in Berlin, Launch Academy in Vancouver, and urban Microsoft locations around the world.
Go to www.windowsstore.com/applabs to find a lab near you and reserve time with Windows experts and designers. We look forward to seeing you and your apps at the Windows Store App Labs!

Privacy Policy

No user information are saved

Windows 8 Development History

Early announcements

Windows 8 development started before Windows 7 had shipped in 2009. In January 2011, at the Consumer Electronics Show (CES), that Microsoft announced that Windows 8 would be adding support for ARM Microprocessors in addition to the x86 microprocessors from Intel, AMD and VIA. On June 1, 2011, Microsoft officially unveiled Windows 8's new user interface as well as additional features at the Taipei Computex 2011 in Taipei (Taiwan) by Mike Angiulo and at the D9 conference in California (United States) by Julie Larson-Green and Microsoft's Windows President Steven Sinofsky. A month before the BUILD conference was held, Microsoft opened a new blog called "Building Windows 8" for users and developers on August 15, 2011.

 

Developer Preview

Microsoft unveiled new Windows 8 features and improvements on the first day of the BUILD conference on September 13, 2011. Microsoft released Windows 8 Developer Preview (build 8102) the same day, which included SDKs and developer tools (such as Visual Studio Express and Expression Blend) for developing applications for Windows 8's new interface. According to Microsoft, there were more than 500,000 downloads of the developer preview within the first 12 hours of its release. The Developer Preview introduced the Start screen. The Start button in the desktop opened the Start screen instead of the Start menu.
 

On 16 February 2012, Microsoft postponed the expiration date of the developer preview. Originally set to expire on 11 March 2012, this release is now set to expire on 15 January 2013

Consumer Preview

On 29 February 2012, Microsoft released Windows 8 Consumer Preview, the beta version of Windows 8, build 8250. For the first time since Windows 95, the Start button is no longer present on the task bar, though the Start screen is still triggered by clicking the bottom-left corner of the screen and by clicking Start on the Charm bar. Windows president Steven Sinofsky said more than 100,000 changes had been made since the developer version went public. The day after its release, Windows 8 Consumer Preview had been downloaded over one million times. Like the Developer Preview, the Consumer Preview is set to expire on January 15, 2013. 

Release Preview

At Japan's Developers Day conference, Steven Sinofsky announced that Windows 8 Release Preview (build 8400) would be released during the first week of June. On May 28, 2012, Windows 8 Release Preview (Standard Simplified Chinese x64 edition, not China-specific version, build 8400) was leaked online on various Chinese and BitTorrent websites. On May 31, 2012, Windows 8 Release Preview was released to the public by Microsoft.


Major items in the Release Preview included the addition of Sports, Travel, and News apps, along with an integrated version of Flash Player in Internet Explorer. Like the Developer Preview and the Consumer Preview, the release preview is set to expire on January 15, 2013.

Final version

On August 1, 2012, Windows 8 (build 9200) was released to manufacturing. Microsoft plans to hold a launch event on October 25, 2012 and release Windows 8 for general availability on the next day. However, only a day after its release to manufacturing, a copy of the final version of Windows 8 Enterprise N (produced for European markets) leaked to the web and several days later there were Pro and Enterprise leaks both x86 and x64. On August 15, 2012, Windows 8 was made available to download for MSDN and TechNet subscribers. Windows 8 was made available to Software Assurance customers on August 16, 2012. Windows 8 was made available for student downloads (with a DreamSpark Premium subscription) on August 22, 2012, earlier than advertised.


Relatively few changes were made from the Release Preview to the final version: New backgrounds for desktop, lock screen and start screen, as well as a tutorial are added. Windows Explorer is now called File Explorer. Finally, the start screen and included apps are slightly tweaked.