Tamir DresherSenior Software ArchitectJanuary 27, 2014

Building Your First Store App using XAML

About Me

• Software architect, consultant and instructor• Software Engineering Lecturer @ Ruppin Academic Center• Technology addict• 10 years of experience• .NET and Native Windows Programming

@tamir_dreshertamirdr@codevalue.nethttp://www.TamirDresher.com.

3

Agenda

• Windows 8.1 platform (briefly)• Basic XAML • Your First Store App

4

Agenda

• Windows 8.1 platform (briefly)• Basic XAML • Your First Store App

5

Windows 8 Platform

Modern UI Apps

HTMLJavaScrip

t

CC++

C#VB

Desktop Apps

Win32

.NET / SL

Internet Explore

r

Communication

& Data

Application Model

Devices & Printing

WinRT APIsGraphics &

Media

Syst

em

Serv

ices

JavaScript(Chakra)

CC++

C#VB

XAML HTML / CSSVie

wM

odel

Contr

olle

r

Windows Core OS ServicesCore

6

Windows Store app life cycle

App Excecution

appsuspended

suspendApp

terminatedLow

resources

Code ExecutionNo code

excecutionApp not running

resume

App gets 5s to handle suspend

App is not notified before

termination

Apps are notified when they have been resumed

Start app

Splash screen

Process status

Logic state of the apphttp://msdn.microsoft.com/en-us/library/windows/apps/hh464925.aspx

App Manifest (.appxmanifest)

• It declares explicitly endpoints for integration of the app• File (music/images/videos/documents…)• Device (webcam, microphone, location, …)• Network and identity (internet, private network,

credentials)• File associations• App contracts (search, share, etc.)

7

8

Agenda

• Windows 8/8.1 platform (briefly)• Basic XAML • Your First Store App

9

What is XAML?

• Extensible Application Markup Language• Technology developed by Microsoft• Markup language for definition of UI, it maps directly CLR

object instances into markup• Used by Silverlight, WPF... and now for Win 8 apps, too• Easy to use for who knows HTML or XML technologies

10

Basic XAML Syntax (1)

• Elements

• Attributes

<StackPanel> <Button>Click me!</Button>

</StackPanel>

<Button Background="Blue" Content="This is a button"/>

11

Basic XAML Syntax (2)

• Property Element Syntax<Button>

<Button.Background><SolidColorBrush Color="Blue"/>

</Button.Background><Button.Foreground>

<SolidColorBrush Color="Red"/></Button.Foreground><Button.Content>

This is a button</Button.Content>

</Button>

12

Basic XAML Syntax - Events

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

<Button Click="Button_Click">Click Me!</Button>

</Page>

13

Basic XAML Syntax – Markup Extensions

<Page.Resources> <SolidColorBrush x:Key="MyBrush" Color="Gold"/> <Style TargetType="Border" x:Key="PageBackground">

<Setter Property="Background" Value="Blue"/> </Style> ...</Page.Resources><StackPanel>

<Border Style="{StaticResource PageBackground}">...

</Border></StackPanel>

14

Agenda

• Windows 8/8.1 platform (briefly)• Basic XAML • Your First Store App

15

Step 1: Creating the project & understand solution’s layout

Tip: Replace always Blank Page with Basic Page.Basic Page adds some basic layouts and useful helpers

Step 1: Creating the project & understand solution’s layout

Identifies that app is targeted for Windows 8.1

Step 1: Creating the project & understand solution’s layout

References WinRT

Step 1: Creating the project & understand solution’s layout

Folder for assets of the app

Step 1: Creating the project & understand solution’s layout

Typically created by a wizard, common classes to be shared across the project

Step 1: Creating the project & understand solution’s layout

Starting point of the application. It can be changed into Package.appxmanifest

Step 1: Creating the project & understand solution’s layout

Main Page of the project. I advice to replace it always with a Basic Page, instead of using a Blank Page.

Step 1: Creating the project & understand solution’s layout

Appxmainfest.Configure the permissions, Capabilities and other about the App

Step 1: Creating the project & understand solution’s layout

Certificate for development & test

24

The Main View

25

The Main View

(0,1)(0,0)

(1,0) (1,1)

26

The Main View

(0,1)(0,0)

(1,0) (1,1)

<Grid><Grid.RowDefinitions>   <RowDefinition Height="*"></RowDefinition>   <RowDefinition Height="Auto"/></Grid.RowDefinitions>Grid.ColumnDefinitions>   <ColumnDefinition/>   <ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions> <!--Your Elements Goes Here --><!--Grid.Row="<RowNumber>"  --><!--Grid.Column="<ColumnNumber>" --><!--Grid.RowSpan="<RowsAmount>" --><!--Grid.ColumnSpan="<ColumnAmount>" --><!--Declares The Element Position -->

</Grid>

27

Demo

Creating The View

Model

The MVVM Pattern

• Model – View – ViewModel• Separation of concerns• Natural pattern for XAML based applications

– Data binding is key• Enables developer-designer workflow• Increases application testability and readability

View ViewModel

Commands,Properties

Events Events

Methods,Properties

ModelModel

29

ToDoItem

30

DataBinding

• the mechanism for establishing a connection between the UI element and a Data source

• DataContext – Contains the default data source object

<Element Property=“{Binding Path=PropName}“/>

31

DataBinding

• <GridView ItemsSource=“{Binding Items}” />

MainPage

GridView

MainPageViewModel

ToDoItems

32

DataBinding

• <GridView ItemsSource=“{Binding Items}” />

MainPage

GridView

MainPageViewModel

Items

TODO1 TODO2TODOView

TODOView

33

Demo

Creating the Binding

34

DataTemplate

• Configure the visual appearance of a data item• Set the ItemTemplate For ItemsControls like: ListBox,

ComboBox, ListView, GridView etc.• Default template (in case you don’t override) is just a TextBlock• For complex objects – ToString() will be called

35

DataTemplate

<GridView ItemsSource="{Binding Items}"> <GridView.ItemTemplate>    <DataTemplate>        <!--Your Elements Goes Here-->    </DataTemplate></GridView.ItemTemplate>

</GridView>

36

Demo

Creating the DataTemplate

37

ICommand

• Enables binding to an operation

• RelayCommad – implements ICommand and gives a generic way to create command using delegates

interface ICommand} bool CanExecute(object parameter); void Execute(object parameter); event EventHandler CanExecuteChanged;}

38

Demo

Adding a New Item

39

Search

• Search Charm

40

Search – Add Capability

41

Search – Set the Logic

1) Get the search pane and attach to it

 var searchPane = SearchPane.GetForCurrentView();searchPane.SuggestionsRequested += OnSearchPaneSuggestionsRequested; 

42

Search – Set the Logic

2) Implement the search logic

A

void OnSearchPaneSuggestionsRequested(SearchPane sender,  SearchPaneSuggestionsRequestedEventArgs e){ var request = e.Request; ... // Your Search Logic  ...          // Add suggestion to Search Pane – SearchPane can show up to 25 result request.SearchSuggestionCollection.AppendQuerySuggestion(<Result String>); }

43

Search – Handle the selected value

• in your App class override the method: void OnSearchActivated(SearchActivatedEventArgs args)

• args.QueryText contains the string that was entered/selected in the SearchPane

44

Demo

Integrating Search

45

What have we seen

• Developing Windows 8/8.1 App is Fun • Basic XAML• Basic Binding• Creating View and ViewModel• Adding Search Capability

Presenter contact detailsc: +972-52-4772946t: @tamir_dreshere: tamirdr@codevalue.netb: TamirDresher.comw: www.codevalue.net