Creating Windows Store Apps

1. Overview of Windows Store applications 2. Worked example 3. Adding controls and event handlers Contents 2

What is Windows Store? Options for developing Windows Store apps Roadmap for this chapter 1. Overview of Windows Store Applications 3

Windows 8 introduces a new type of application: the Windows Store app Windows Store apps have a completely new look and feel They run on a variety of devices You can sell them on the Windows Store What is Windows Store? 4

For Web developers: Create Windows Store apps using HTML5, CSS3, and JavaScript For.NET, WPF, and Silverlight developers: Create Windows Store apps using XAML and C#/VB/C++ For DirectX developers: Create DirectX Windows Store apps using native C++ and HLSL, to take full advantage of graphics hardware Options for Developing Windows Store Apps 5

We'll go through the process of creating a simple Windows Store app using XAML and C# We'll create a simple Windows Store app We'll take a look at the generated project artefacts We'll run the application and describe how to interact with it Then we'll add some GUI controls and event-handler code Roadmap for this Chapter 6

Creating a Windows Store app Getting a developer license Understanding the project contents Limitations of the generated main page Replacing the main page Building and running the application Managing the application life cycle 2. Worked Example 7

In Visual Studio, create a new Windows Store App as follows: Creating a New Windows Store App 8

Visual Studio informs you that you need a developer license for Windows 8 (!!!) Just agree! Note: You have to sign-in with a Microsoft account You can sign-up for free within VS Getting a Developer License 9

The project contains the following files: A manifest file (package.appxmanifest) that describes your app 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) A start page (MainPage.xaml) and an accompanying code file (MainPage.xaml.cs) that run when your app starts Understanding the Project Contents 10

The main page in the Blank App project template is based on the Blank Page template Contains the minimum XAML/code to instantiate a Page object However, even the simplest Windows Store app must be more sophisticated: Adapt to different layouts and views Save its state when suspended Restore its state when resumed The other project/page templates in VS include additional code to help you with view and state management When you use the Blank App project template, you typically replace the blank main page with one of the other page templates Limitations of the Generated Main Page 11

Delete the main page and replace it with a Basic Page: VS asks if you want to add various files to the project Click Yes Replacing the Main Page 12

Ctrl-F5 as usual Congratulation – your first Windows Store app! Building and Running the Application 13

Notice 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 Windows Store apps! 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 VS to run it in debugging mode Managing the Application Life Cycle 14

Understanding Windows Store GUIs Adding controls to the main page Handling events Running the application 3. Adding Controls and Event Handlers 15

You will typically create Windows Store GUIs using XAML Hooray! You can also create Windows Store GUIs programmatically Using C# or Visual Basic code Understanding Windows Store GUIs 16 … Label TextBox RadioButton CheckBox Button … Label TextBox RadioButton CheckBox Button

Add the following markup to the main page Just before tag Adding Controls to the Main Page 17

Implement the Click event on the button as follows: Handling Events 18 namespace HelloWindowsStore { public sealed partial class MainPage : HelloWindowsStore.Common.LayoutAwarePage { … private void Button_Click_1(object sender, RoutedEventArgs e) { this.messageBlock.Text = "Your fav swan is " + this.playerInput.Text; } namespace HelloWindowsStore { public sealed partial class MainPage : HelloWindowsStore.Common.LayoutAwarePage { … private void Button_Click_1(object sender, RoutedEventArgs e) { this.messageBlock.Text = "Your fav swan is " + this.playerInput.Text; }

Here's how it looks when I run the app Running the Application 19

Any Questions? 20 Lab ideas Investigate GUI controls Investigate loading and restoring state