1 / 20

Creating Windows Store Apps

Creating Windows Store Apps. Contents. Overview of Windows Store applications Worked example Adding controls and event handlers. 1. Overview of Windows Store Applications. What is Windows Store? Options for developing Windows Store apps Roadmap for this chapter.

Download Presentation

Creating Windows Store Apps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related