How to useenhanced features of Windows 8.1 Store Apps

2014/03/18

Microsoft MVP for Visual Basic

Akira Hatsune

知って得するWindows ストアアプリ開発の8.1 強化ポイント

Agenda

1. Major changes of the Windows 8.1 Store app

2. Enhanced point of the new template

3. Changed point of traditional template

4. Enhanced point of Blend 2013

Major changes of the Windows 8.1 Store app

Points!

1. ViewState

2. In-app search method

3. New API

Obsolete of Viewstate8.0:ViewState property

• Value

– FullScreenLandScape

– FullScreenPortrait

– Filled

– Snapped

8.1:ApplicationView Class

• Property

– IsFullScreen

– Orientation

– AdjacentToLeftDisplayEdge

– AdjacentToRightDisplayEdge

Impact on the application implementation• 8.0：Full/Fill/Snapped • 8.1：

Snapped Fill AdjacentToLeftDisplayEdge AdjacentToRightDisplayEdge

Changes in-app search method8.0: Search charm 8.1: SearchBox Control

SearchBox ControlSearch Charm

Search logic Search logic

CALL

CALL

New APIUser interface

Fundamentals

Devices Graphics and media Communications and data Services

Geo-location

Proximity

Direct3D Direct2DDirectWrite

PlayTo

Contracts

Bing

AzureMobile

HTML5/CSS XAMLInput Controls

Authentication

Bluetooth

USB

HID WiFi direct

Point of service

3Dprinting

Scanning

WebGL

HTTP

Contacts

Appoint-ments

PDF

Speech synthesis

Diagnostics

Portable

Sensors Playback Capture

Printing

SVGCanvas

Local storage

SMS

StreamsBackground

transfer

Syndication Networking

XML and JSON

Skydrive

Live tiles and toast

Accessibility Data binding

Application services

Threading timers

Memory management

Globalization Cryptography

Xbox Live

NEW

New APIUser interface

Fundamentals

Devices Graphics and media Communications and data Services

Geo-location

Proximity

Direct3D Direct2DDirectWrite

PlayTo

Contracts

Bing

AzureMobile

HTML5/CSS XAMLInput Controls

Authentication

Bluetooth

USB

HID WiFi direct

Point of service

3Dprinting

Scanning

WebGL

HTTP

Contacts

Appoint-ments

PDF

Speech synthesis

Diagnostics

Portable

Sensors Playback Capture

Printing

SVGCanvas

Local storage

SMS

StreamsBackground

transfer

Syndication Networking

XML and JSON

Skydrive

Live tiles and toast

Accessibility Data binding

Application services

Threading timers

Memory management

Globalization Cryptography

Xbox Live

NEW

Enhanced to Device Connectivity

Connection to EV3, use Bluetooth LE

Bluetooth LELEGO

MINDSTORMEV3

WindowsStoreApps

1. Obsolete of Viewstate

2. Changes in-app search method

3. Add New API

Enhanced point of the new template

New template

• Hub App Template

Hub App template• 2012 Template • 2013 Template

NEW !

by using Hub... Hub

Point 1 - Multi SectionSection 1 Section 2 Section 3

Point 2 - Different designs for each section

Image Map Listbox

Point 3 - Both Scroll (vertical scroll for each section)

Horizon Scroll

vert

ical

Scr

oll

vert

ical

Scr

oll

vert

ical

Scr

oll

asynchronous

Changed point of traditional template

Template that exists from VS2012

• Grid App Template

• Split App Template

2013 TemplateMainPage.xaml.vb

2012 TemplateMainPage.xaml.vb

LayoutAwarePage Class

Inherits base class of MainPage has changed

DefaultViewModel

ObservableDictonary

Page Class

DefaultViewModel

ObservableDictonary

Page Class

IN base classCan not delete

OUT of base classCan delete(e.g. don’t use)

How to save the state has changed2012 Template

• Overrides LoadState

• Overrides SaveState

2013 Template

• NavigationHelper_LoadState

• NavigationHelper_SaveState

LayoutAwardPageLoadStatemethod

SaveStatemethod

Inh

erit

s

ove

rrid

es

ove

rrid

es

NavigationHelper

even

t

even

t

LoadState SaveState

• The developer can make the application that was fitted with Windows 8.1 with Hub App Template.

• The traditional template, performance can be improved and have been shape-up in VS2013 Template.

• You make an application in the new template.

Enhanced point of Blend 2013

Blend for Visual Studio 2013

Blend 2012 Blend 2013

Behavior none ✔

Create sample data none ✔

サポートされているBehaviorclass description

CallMethodAction Represents an action that calls a method on a specified object when invoked.

ChangePropertyAction Represents an action that will change a specified property to a specified value when invoked.

ControlStoryboardAction Represents an action that will change the state of the specified Storyboard when executed.

GoToStateAction Represents an action that will transition a FrameworkElement to a specified VisualState when executed.

InvokeCommandAction Executes a specified ICommand when invoked.

NavigateToPageAction Represents an action that switches the current visual to the specified Page.

PlaySoundAction Represents an action that will play a sound to completion.

DataTriggerBehavior Represents a behavior that performs actions when the bound data meets a specified condition.

EventTriggerBehavior Represents a behavior that listens for a specified event on its source and executes its actions when that event is fired.

IncrementalUpdateBehavior Represents a behavior that allows incremental updating of ListView and GridView contents to support faster updating.

If you can use the Behaviors....<mediaelement x:name="myME" source="ms-appx:///Video/Through.mp4">

<button content="play">

<interactivity:interaction.behaviors>

<core:eventtriggerbehavior eventname="Click">

<core:callmethodaction targetobject="{Binding ElementName=myME}"

methodname="Play"/>

</core:eventtriggerbehavior>

</interactivity:interaction.behaviors>

</button>

adding interactivity to your apps.

Sample data can be created by generated from an existing class

SampleDataDesignInstance orStatic Resource

• Store Application Developers can design Apps with the motion/animation (such as animated buttons.) only defining XAML as well as using the Behavior.

• Sample data generation function allows developers to design Apps even while writing the code, run, deploy, App design fix, with Sample data.

• Developers, Let's try Blend 2013 and find/feel enhanced function to design XAML. Visual Studio is useful but Blend 2013 is more superior!

See you...