Creating Windows Store Apps

1. Creating Windows Store Apps

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

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

4. What is Windows Store? • 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 4

5. Options for Developing Windows Store Apps • 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 5

6. Roadmap for this Chapter • 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 6

7. 2. Worked Example 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 7

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

9. Getting a Developer License • 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 9

10. Understanding the Project Contents • 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 10

11. Limitations of the Generated Main Page • 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 pagetemplates 11

12. Replacing the Main Page • 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 12

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

14. Managing the Application Life Cycle • 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 14

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

16. Understanding Windows Store GUIs <common:LayoutAwarePage… > … <Label>Label</Label> <TextBox>TextBox</TextBox> <RichTextBox … /> <RadioButton>RadioButton</RadioButton> <CheckBox>CheckBox</CheckBox> <Button>Button</Button> </common:LayoutAwarePage> • You will typically create Windows Store GUIs using XAML • Hooray! • You can also create Windows Store GUIs programmatically • Using C# or Visual Basic code 16

17. Adding Controls to the Main Page <StackPanelGrid.Row="1" Margin="120,30,0,0"> <TextBlock Text="Who's your favourite Swans player?"/> <StackPanel Orientation="Horizontal" Margin="0,20,0,20"> <TextBox x:Name="playerInput" Width="300" HorizontalAlignment="Left"/> <Button Content="OK" Click="Button_Click_1"/> </StackPanel> <TextBlock x:Name="messageBlock"/> </StackPanel> • Add the following markup to the main page • Just before <VisualStateManager.VisualStateGroups> tag 17

18. Handling Events 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; } } } Implement the Click event on the button as follows: 18

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

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