Template designed by

What's new in Windows Phone

Matteo Paganiinfo@qmatteoq.com - @qmatteoqhttp://www.qmatteoq.com

Template designed by

brought to you by

Software Engineer @ Funambol

Microsoft MVP – Windows Phone Development

Nokia Developer Champion

Autore dei libri «Sviluppare applicazioni per Windows Phone 8» e «Windows Phone 8 Development Succinctly»

Membro della community DotNetLombardia e fondatore di WPDev Fusion

chi sono

Universal app

Cosa cambia per lo sviluppatore?

• La gestione del layout

• I nuovi controlli XAML

• La navigazione

• La gestione dello storage

Quale percorso?

agenda

Windows Developer Platform in 8.1

Windows Runtime API Set

Graphics Audio Media

Networking File System Input

Commerce

Sensors

.NET CLRWindows Runtime (WinRT)

DirectX(C++)

Windows PhoneSilverlight(C# | VB)

Windows XAML

(C# | VB | C++)

WinJS(HTML + JS)

App Model Services

Navigation

Packaging

Contracts

Background

Store(s)

Push

Roaming

Windows Kernel

App Data Backup

Legend

Windows Phone Only

Windows OnlyWindows + Windows Phone

Convergenza delle API

6

WinRT API comuni

WinRT API specifiche di Windows Phone

WinRT API specifiche di

Windows

Il Windows Runtime (WinRT) è la piattaforma che consente di condividere il runtime e le API usate dalle Store app (telefono e tablet / pc)

Convergenza quasi totale in 8.1• L’obiettivo è la convergenza al 100% per gli

scenari di sviluppo• 8.0 aveva circa il 30% di API convergenti• 8.1 ha più del 90% di API convergenti

• Due applicazioni separate per le due piattaforme

• Un progetto comune, che permette di condividere:• Codice

• Controlli XAML

• Asset grafici

• Template basato sul meccanismo dei linked files: i file è come se fossero presenti in entrambi i progetti, ma fisicamente sono memorizzati in una sola posizione

Welcome Universal Windows app

dem

o Universal app

Il layout

La gestione del layout – WP 8.0

1.0x 1.6x 1.5x 2.25x

480x800 480x800 480x853 480x853

La gestione del layout – WP 8.1

7”

6”

5”

4.5”

canvas virtualmente infinito

Limiti superiori di X, Y vengono calcolati a seconda del dispositivo utilizzando • dimensione del

display• risoluzione dello

schermo Funziona sia per i device attuali che per quelli futuriStesso approccio di Windows 8.1y

La gestione del layout – WP 8.1

12:38

larghezza

alt

ezz

a

“raw” pixels

12:38

larghezza

alt

ezz

a

“view” pixels

diviso per ilfattore discala

Stessa dimensione, diverse risoluzioni

12:38

540

96

05.5”

12:38

5.5”

720

12

80

12:38

5.5”

1080

19

20

450

800

“view” pixels

aumento fattore di scala

Stessa risoluzione, diverse dimensioni

12:38

4.7”

1080

19

20

“view” pixels 368x686

12:38

5.5”

1080

19

20

450x800

12:38

6”

1080

19

20

491x873

diminuzione del fattore di scala

• In alcuni scenari (ad esempio, un gioco) non è possibile mostrare più contenuto

• Il controllo ViewBox consente di applicare il vecchio approccio di 8.0

• Il contenuto all’interno del controllo viene semplicemente scalato

Il controllo ViewBox

dem

o Gestire il layout

I controlli

Convergenza dei controlli

80% XAML condiviso 20% personalizzato

Common SignatureOptimized

DatePickerTimePicker

CommandBar

Button

CheckBox

RadioButton

ProgressBar

Slider

ToggleSwitch Hub

PivotListViewGridViewSysTray

• Il controllo Panorama è stato sostituito dal controllo Hub

• E’ composto da HubSection per definire le varie sezioni

• Principale differenza con il controllo Panorama: le sezioni sono definite da un DataTemplate

Panorama

<Hub>

<HubSection Header="Prima sezione">

<DataTemplate>

<Image Source="/Assets/small-logo.jpg" />

</DataTemplate>

</HubSection>

<HubSection Header="Seconda sezione">

<DataTemplate>

<StackPanel>

<TextBlock Text="Contenuto della seconda sezione" />

</StackPanel>

</DataTemplate>

</HubSection>

</Hub>

Il controllo Hub

Il controllo ApplicationBar è stato sostituito dal controllo CommandBar

ApplicationBar

 <Page.BottomAppBar>        <CommandBar x:Name="commandBar">            <CommandBar.PrimaryCommands>                <AppBarButton Label="edit" Icon="Edit" />             <AppBarButton Label="favorite" Icon="Favorite" />             <AppBarSeparator />             <AppBarToggleButton Label="play" Icon="Play" />            </CommandBar.PrimaryCommands>             <CommandBar.SecondaryCommands>                <AppBarButton Label="help" Icon="Question" />            </CommandBar.SecondaryCommands>        </CommandBar>    </Page.BottomAppBar>

Il controllo CommandBar

Windows Phone

Windows

• E’ stato sostituito dai controlli GridView e ListView

• Il controllo GridView è ottimizzato per una visualizzazione a griglia

• Il controllo ListView è ottimizzato per una visualizzazione a lista

• Entrambi non richiedono più di creare una classe ad hoc per gestire il raggruppamento

Il controllo LongListSelector

ListView e GridView

Semantic Zoom

<SemanticZoom> <SemanticZoom.ZoomedInView> <!-- ListView or GridView --> <!-- ItemsSource binds to CollectionViewSource --> </SemanticZoom.ZoomedInView> <SemanticZoom.ZoomedOutView> <!-- ListView or GridView --> <!-- ItemsSource bound to CollectionViewSource, Path=CollectionGroups --> </SemanticZoom.ZoomedOutView></SemanticZoom>

dem

o ListView e GridView

E’ stata sostituita dal controllo StatusBar e non può essere gestito dallo XAMLMostra la Status BarWindows.UI.ViewManagement.StatusBar.GetForCurrentView().ShowAsync();

Nascondi la Status BarWindows.UI.ViewManagement.StatusBar.GetForCurrentView().HideAsync();

Imposta il colore di Background della Status BarWindows.UI.ViewManagement.StatusBar.GetForCurrentView().BackgroundColor = Colors.Red;

Imposta l’opacità della Status BarWindows.UI.ViewManagement.StatusBar.GetForCurrentView().BackgroundOpacity = 0.4;

Ottieni la grandezza della Status Bar Windows.UI.ViewManagement.StatusBar.GetForCurrentView().OccludedRect;

SystemTray

I flyout sostituiscono i controlli ContextMenu e ListPicker

Flyout

<Button Content="Show Menu Flyout" Margin="20, 20, 100, 20"> <Button.Flyout> <MenuFlyout> <MenuFlyoutItem Text="Option 1" /> <MenuFlyoutItem Text="Option 2" /> <MenuFlyoutSeparator /> <ToggleMenuFlyoutItem Text="Toggle Option 1" IsChecked="True" /> <ToggleMenuFlyoutItem Text="Toggle Option 2" /> </MenuFlyout> </Button.Flyout></Button>

MenuFlyout

<Button> <Button.Flyout> <ListPickerFlyout x:Name="ListPickerFlyout" ItemsSource="{Binding Path=Comics}"> <ListPickerFlyout.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding Title}" /> </StackPanel> </DataTemplate> </ListPickerFlyout.ItemTemplate> </ListPickerFlyout> </Button.Flyout></Button

ListPickerFlyout

La navigazione

Il nuovo approccio

Window

La Window contiene un singolo Frame, che occupa il 100% dell’area.Il Frame contiene le Page, anche loro di solito dimensionate al 100% dell’area disponibile.Nelle Windows Store App per Tablet/PC, le applicazioni potrebbero avere più di una Window mentre sul telefono ne hanno solo una.

Frame

PageWindow

• Si usa il metodo Navigate() della classe Frame

• E’ richiesto il tipo della pagina e non l’url

• Ora è supportato il passaggio di oggetti complessi

private void Comics_OnSelectionChanged(object sender, SelectionChangedEventArgs e)

{

Comic selectedComic = Comics.SelectedItem as Comic;

Frame.Navigate(typeof (DetailPage), selectedComic);

}

Navigazione tra le pagine

• La classe Frame sostituisce il NavigationService• BackStack per accedere allo stack delle pagine

• GoBack() per tornare alla pagina precedente

• CanGoBack per sapere se ci sono pagine nello stack

• Di default viene sempre restituita una nuova istanza della pagina

• E’ possibile controllarlo tramite la proprietà NavigationCacheMode

Gestione dello stack delle pagine

Gestire lo stato della pagina

Scenario comune: L’utente naviga su una pagina che permette l’inserimento di dati (Page 2). La prima volta la pagina è nuova, nessun dato è stato inserito. L’utente interagisce con la pagina e riempie i campi con dei dati. Poi naviga in avanti su una nuova pagina (Page 3) per poi tornare indietro (Page 2).

Quello che si aspetta di trovare è la pagina (Page 2) nello stesso stato di quando l’ha lasciata.Con NavigationCacheMode.Disabled, viene sempre creata una nuova istanza della pagina e quindi lo stato originale della pagina viene perso. Con NavigationCacheMode.Enabled o Required, la pagina memorizzata nella cache è riutilizzata cosicché lo stato originale della pagina venga mantenuto. Ma questo vale anche per la navigazione in Avanti sullo stesso tipo di pagina.

Page 1

Page 2

Page 3

new

new

?

• Nuovo comportamento predefinito per allinearsi a Windows 8: il pulsante Back porta all’applicazione precedente

• Tutti i template di Visual Studio (tranne Blank App) contengono la classe NavigationHelper che include la logica per mantenere il comportamento tradizionale

• E’ possibile modificarlo pagina per pagina sottoscrivendosi all’evento Windows.Phone.UI.Input.HardwareButtons.BackPressed

Il pulsante Back

Esempio di gestione del pulsante Back

E tanto altro ancora

Email with Attachment

s

SL XAML/ Direct3D

enhancements

FileOpenPicker,

FileSavePicker

Read/Write access to SD

card

Easier NFC secure

payment

Wallet cards New application

lifec

Appointments/Calendar

API enhancement

s

Appointments/Calendar brokered UI

New background Transfer API

Sensors: Acceleromete

r, light, magnet …

Data Sense 2 WinRT HttpClient

Storage API enhancement

s

Graphics enhancements D2D/DWrite

Social RT AtomPub, Http,

Syndication (Windows.We

b)

Advertising ID

Data.XML Audio effects

Attenzione!

• Alcune feature non sono ancora supportate dal Windows Runtime

• Non esiste un processo di conversione automatico da un progetto già esistente

• Le librerie e i toolkit per Windows Phone 7.x / 8.0 non sono compatibili con le Windows Phone Store app

Windows Phone Store app

• Migliori performance e minor consumo di memoria

• Possibilità di condividere la maggior parte del codice con Windows 8 e, in futuro, Xbox One

• Possibilità di sfruttare tutte le novità introdotte in Windows Phone 8.1

Ma…

• Molte librerie hanno già una versione compatibile con il Windows Runtime (Caliburn Micro, MVVM Light, JSON.NET, ecc.)

• I principali produttori di toolkit sono al lavoro per supportare le Universal Windows app:• Telerik -> Beta disponibile su richiesta: universalwindows@telerik.com 

• Syncfusion

• Infragistics

Ma…

Grazie a tutti per la partecipazione

Riceverete il link per il download a slide e demo via email nei prossimi giorni

Per contattarmi

info@qmatteoq.com

@qmatteoq

Grazie