Windows 10 Summer DevCamp

Jimmy Engstroumlm Jessica Engstroumlmjimmyapeoholicsejessicacatoholicse apeoholic grytlappen

httpwindowsMicrosoftcom

Om oss

httpwindowsMicrosoftcom

Om oss

httpwindowsMicrosoftcom

Coding After Work

wwwCodingAfterWorkse

httpwindowsMicrosoftcom

AgendaIntroduktion

Ett Windows | flera enheter

Data bindningarTraditionellt | kompilerat

Adaptiv Design amp UIDesignspraringk | XAML UI

Adaptiv kod Anpassa koden

Labbar amp fri kodning Testa olika labbar || egna projekt

Introduktion

httpwindowsMicrosoftcom

AgendaEn plattform

Ett WindowsMassor med enheter

UtvecklarupplevelseVerktygenNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

Varje enhetsfamilj (SKU) laumlgger till funktioner

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops amp All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Om oss

httpwindowsMicrosoftcom

Coding After Work

wwwCodingAfterWorkse

httpwindowsMicrosoftcom

AgendaIntroduktion

Ett Windows | flera enheter

Data bindningarTraditionellt | kompilerat

Adaptiv Design amp UIDesignspraringk | XAML UI

Adaptiv kod Anpassa koden

Labbar amp fri kodning Testa olika labbar || egna projekt

Introduktion

httpwindowsMicrosoftcom

AgendaEn plattform

Ett WindowsMassor med enheter

UtvecklarupplevelseVerktygenNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

Varje enhetsfamilj (SKU) laumlgger till funktioner

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops amp All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Coding After Work

wwwCodingAfterWorkse

httpwindowsMicrosoftcom

AgendaIntroduktion

Ett Windows | flera enheter

Data bindningarTraditionellt | kompilerat

Adaptiv Design amp UIDesignspraringk | XAML UI

Adaptiv kod Anpassa koden

Labbar amp fri kodning Testa olika labbar || egna projekt

Introduktion

httpwindowsMicrosoftcom

AgendaEn plattform

Ett WindowsMassor med enheter

UtvecklarupplevelseVerktygenNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

Varje enhetsfamilj (SKU) laumlgger till funktioner

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops amp All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

AgendaIntroduktion

Ett Windows | flera enheter

Data bindningarTraditionellt | kompilerat

Adaptiv Design amp UIDesignspraringk | XAML UI

Adaptiv kod Anpassa koden

Labbar amp fri kodning Testa olika labbar || egna projekt

Introduktion

httpwindowsMicrosoftcom

AgendaEn plattform

Ett WindowsMassor med enheter

UtvecklarupplevelseVerktygenNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

Varje enhetsfamilj (SKU) laumlgger till funktioner

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops amp All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Introduktion

httpwindowsMicrosoftcom

AgendaEn plattform

Ett WindowsMassor med enheter

UtvecklarupplevelseVerktygenNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

Varje enhetsfamilj (SKU) laumlgger till funktioner

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops amp All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

AgendaEn plattform

Ett WindowsMassor med enheter

UtvecklarupplevelseVerktygenNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

Varje enhetsfamilj (SKU) laumlgger till funktioner

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops amp All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

Varje enhetsfamilj (SKU) laumlgger till funktioner

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops amp All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Windows CoreRefaktorerad gemensam kaumlrnaEn haringrdvaruplatformUniversiella haringrdvarudrivrutinerStandard naumltverk och IO

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

DesktopSKU

PhoneSKU

XboxSKU

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

Varje enhetsfamilj (SKU) laumlgger till funktioner

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops amp All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

Varje enhetsfamilj (SKU) laumlgger till funktioner

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops amp All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Ett Windows

DesktopSKU

PC

2 in 1

MobileSKU

Tablet

Phablet

Phone

XboxSKU

Xbox

IoTSKU

Band

IoT headless

SKU

Raspberry Pi

Home Automati

on

Surface HubSKU

Surface Hub

HolographicSKU

HoloLens

Varje enhetsfamilj (SKU) laumlgger till funktioner

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops amp All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Varje enhetsfamilj (SKU) laumlgger till funktioner

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops amp All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops amp All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Easy for users to get amp stay

current

Unified core and app platform

Resan till sammanslagning

Windows Phone 75

Windows Phone 8Windows Phone 81

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 81

Windows 10

ConvergedOS kernel

Convergedapp model

httpwindowsMicrosoftcom

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops amp All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Phone Small Tablet

2-in-1s(Tablet or Laptop)

Desktops amp All-in-OnesPhablet Large Tablet

Classic Laptop

Xbox IoTSurface Hub

Holographic

Windows 10

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Universal Windows AppsMultipla enhetsfamiljer

PC XBoxMobile Surface Hub

HoloLensDevices +IoT

En Store +Ett Dev Center

Aringteranvaumlnd existerande kod

En SDK + utvecklingsmiljouml

AdaptivtUser Interface Naturliga

Anvaumlndarinmatningar

En Universell Windows Plattform

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Universal Windows PlatformETT API-rdquokontraktrdquoEn garanterad samling av kontraktSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

ltTargetPlatform Name=MicrosoftUniversal minVersion=100100690

maxVersionTested=100101900gt

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Universella Windows-plattformen kan uppdatera i egen takt

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Windows app

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Windows appEn binaumlrKan koumlra paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

UtvecklarupplevelseiOS iPhone amp iPad

Android Enheter som har stoumld

Windows 8 Respektive enhet (telefon amp dator)

Windows 10 Alla enheter

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

DEMO

205

Hello devices

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

PlattformstillaumlggEnhetsspecifika APIFamilje-specifika funktionerKompatibla oumlver alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

Windows App

Phoneextension

Xboxextension

Desktop

extension

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Traditionell Microsoft teknologi aumlr inte det enda saumlttet att skapa Windows appar

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Windows 10operativsystem

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Windows 10operativsystem

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Windows 10operativsystem

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

ObjCiOS

Universal Windows Platform

WWAC++amp CX

Netlanguages

HTMLDirectX

XAML

C++

Netlanguages

MFCWFWPF

Netruntime

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Bridges kommer att faring fler appar till Windows Plattformen

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Adaptiv designResponsiv designFlexibel layout som reagerar paring smaring aumlndringarMaringnga kontroller hanterar responsivitet automatiskt

Adaptiv designSmart layout som reagerar paring stora foumlraumlndringarAnvaumlnd Visual states

Skraumlddarsydd designEnhetsspecifik designVissa enheter har ett specifikt designspraringk

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Continuum for Convertibles and Phones

Continuum

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Adaptiv kodEn kompatibel binaumlr foumlr olika enheterUniversiellt api med enhetsspecifik kod

Aumlndra din app baserat paring egenskaperFraringga om din app har stoumld foumlr funktioner och namespaces

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

En enkel enad utvecklingmiljouml

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Visual Studio IDEAlla projekttyperDesktop Windows Telefon Service Webb Spel mmhellip

Alla utvecklaruppgifterEditera kod Arikitekt design UX design Debug Profilering Utvaumlrdering Test mmhellip

Alla spraringkC++CX C Visual Basic JavaScript XAML HTML mmhellip

Visual Studio OnlineKaumlllkodshantering projekthantering sparingra buggar mmhellip

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Blend foumlr Visual StudioXAML utvecklingmiljoumlAlltid en del av Visual studioAnvaumlnder Visual studio-skalFull auto-complete amp intellisensebull Validationbull Snippetsbull PeekFil amp solution-manageringResurs-manageringData-manageringAnimationerStates

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Visual Studio 2015 versionerEnterprisearkitektmodelering Diagnostics VSOALM amp Release Management

ProfessionalArchitecture Validation VSOALM amp Feedback Management

Community EditionsVisual Studio Professional Edition

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Developer unlock

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Uteckla varWindows 10Kraumlver Visual Studio 2015

Windows 81 amp Windows Server 2012 R2Visual studio designer fungerar inteDebugging kraumlver en Windows 10 enhet eller Remote Debugging-verktyg

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Managed spraringk aumlr baumlttre aumln naringgonsin

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

NET NativeNaumlsta generation kompilator i molnetAlla windows appar endast Windows appar (just nu)

Appar avaumlnder sig av standrard C++ optimeringNet natives prestanda foumlrbaumlttras i takt med C++ optimizer

Appar med Net bootstrapperInkluderar garbage collection

Ingen runtimeDetta aumlr maskinkod

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Alla Windows appar kommer bli kompilerade till Net Native

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Uppsidorna med Net Native50 snabbare uppstartstid

14 mindre minne

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

ldquoTemplate 10rdquoNy tom mallInneharingller faring filer och tomma mappar foumlr att hjaumllpa till med konventioner

Liknar MVC-mallenTillaumlgg kommer att loumlsa vanliga problem

Loumlser 90Koden loumlser 90 av alla anvaumlndarfall

Levereras med Windows 10Mallen finns paring Github och aumlr under konstruktion

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Bidra till Template10httpakamstemplate10

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

SummeringEn plattform

Ett WindowsFlera olika enheter

UtvecklarupplevelseWindows verktygNet Native

Template 10httpakamstemplate10

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Databindingar

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Databindningar

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

AgendaKlassiska bindningar

Kompilerade bindingar

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Straumlngar

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Dynamisk DataAnvaumlnd databindningar foumlr att haumlmta dynamisk data

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Uppdatera graumlnssnittetINotifyPropertyChangedImplementera i en vymodellKoumlrs paring en vymodell om en egenskap foumlraumlndras

INotifyCollectionChangedImplementeras i ObservableCollectionltTgt och ReadOnlyObservableCollectionltTgtKoumlrs naumlr en kollektion foumlraumlndras

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameter

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueMode (OneTimeOneWayTwoWay)UpdateSourceTrigger(ExplicitDefaultPropertyChanged )

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

DEMO

Klassisk binding

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Kompilerad binding

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Klassisk

Binding

KompileradBindi

ng

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

xBindKompilerad bindingBindingar kompileras

Starkt typade bindingarDuck-binding stoumlds inte

Standard aumlr OneTimeOneWay och TwoWay finns fortfarande

Standard bindingssaumlttINotifyPropertyChanged IObservableVector INotifyCollectionChanged

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Data context foumlr xBind aumlr den bakomliggande koden

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

SyntaxltTextBox Text=Binding

ConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

ltTextBox Text=xBindConverterConverterLanguageConverterParameterElementNameFallbackValueModePathRelativeSourceSourceTargetNullValueUpdateSourceTrigger

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Syntax skillnaderpublic HeroViewModel ViewModel get set

public HeroView()

thisInitializeComponent()thisDataContextChanged +=

HeroView_DataContextChanged

private void HeroView_DataContextChanged(FrameworkElement sender DataContextChangedEventArgs args)

ViewModel = (HeroViewModel)thisDataContext

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Syntax skillnader ltGridView ItemsSource=Binding Herosgt ltGridViewItemTemplategt ltDataTemplategt

ltTextBlock Text=Binding AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

ltGridView ItemsSource=xBind ViewModelHeros xmlnsm=usingBindingDemoModelsgt ltGridViewItemTemplategt ltDataTemplate xDataType=mHerogt

ltTextBlock Text=xBind AlterEgoNamegt ltDataTemplategt

ltGridViewItemTemplategt ltGridViewgt

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

ResourceDictionaryltResourceDictionary

xClass=MyNamespaceMyTemplates

xmlnsmodel=usingxBindSampleModelgt

ltDataTemplate

xKey=MyTemplate

xDataType=modelEmployeegt

ltTextBlock Text=xBind Name gt

ltDataTemplategt

ltResourceDictionarygt

namespace MyNamespace public class MyTemplates public MyTemplates() InitializeComponent()

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Referera till en DictionaryltUserControlResourcesgt

ltResourceDictionarygt

ltResourceDictionaryMergedDictionariesgt

ltlocalMyTemplatesgt

ltResourceDictionary Source=filename

gt

ltResourceDictionaryMergedDictionariesgt

ltResourceDictionarygt

ltUserControlResourcesgt

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Anvaumlnd BindingsUpdate()foumlr asynkron data

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Bindning foumlr haumlndelserltButton Click=PokeEmployeeldquogtPoke Emplo

ltButton Click=xBind ViewModelPokeldquogtPoke Employee

SignaturUtan parametrar- void Poke()Matcha eventparametrar - void Poke(object sender RoutedEventArgs e)

Alla event garingr att anvaumlndaKan ersaumltta ICommand amp EventToCommandNotera Inkluderar inte parmetrar eller CanExecute

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

BindingsStopTracking()pausar kompilerad bindning

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Vanliga fraringgestaumlllningarRelativeSource = Self amp ElementNameReferera element med namn Text=xBind MyElementText

UpdateSourceTrigger = PropertyChangedDet finns inte UpdateSourceTrigger med xBind

Source DataContextLaumlgg till en Viewmodel i din code-behind

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

xBind aumlr inte foumlr alla laumlgen (aumln)

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Naumlr anvaumlnder man klassisk bindingDuck TypingText=ldquoBinding Agerdquo fungerar foumlr baringde PersonModel amp WineModel

OtypatAnvaumlnd Binding med JSON eller andra otypade objekt

Code-behind bindingKan inte laumlgga till eller ta bort xBind vid koumlrning

Anvaumlnd i stylexBind Kan inte anvaumlndas vid Style-settersxBind Kan anvaumlndas i en DataTemplate som aumlr definerad i en style

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

xBind Kan anvaumlndas i de flesta fall

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

SummeringKlassisk binding

Kompilerad binding

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv Design amp UI

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Adaptiv design amp UI

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

AgendaMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Microsoft Designspraringk

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Microsoft designspraringk principerKeep it Simple

Think Universal

Design as One

Make it Personal

Create Delight

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Typeography

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

2px

Iconography

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Minimera tomrum mellan element

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Fyra aumlr ett magiskt nummer

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Faumlrgramper

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Faumlrgramper

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Adaptiv design

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Tre saumltt att anpassaResponsiv designAumlndra storlek paring ditt inneharingllAumlndra floumlde paring ditt inneharingll

Adaptiv designPositionera om ditt inneharingllDesigna om ditt inneharingll

Skraumlddarsydd design

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Aumlndra storlek

>

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Aumlndra floumlde

>

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Aumlndra position

>

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Aumlndra design

>

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Adaptiv design

Phone (portrait)

Tablet (landscape) Desktop

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Skraumlddarsydd designBygg sidorkod foumlr respektive enhets-familj

Graumlnsnitt foumlr en hand

if (physical_diagonal_size lt= 7)

optimized for one-handed operation

rootFrameNavigate(typeof(MainPage_OneHanded) eArguments)

else

rootFrameNavigate(typeof(MainPage) eArguments)

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Skraumlddarsydd design

Phone (portrait)

Tablet (landscape) Desktop

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Kombinera teknikerna foumlr just din design

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

>

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Adaptiva kontroller

>

>

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Intelligent input

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Skalningsalgoritm

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Fysiska pixlar vs effektiva pixlar

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

4rdquo Mobil480x854

5rdquo Mobil720x1280

6rdquo Mobil1080x1920

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Effektiv pixel

Effektiv Pixel

Fysisk Pixel

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Ignorera skalning upploumlsning amp dpiDesigna med Effektiva Pixlar

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Designupplaumlgg

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Planera din design

MobilerLaumlsavstaringnd 163rdquo

Plattor och 2-i-1Laumlsavstaringnd

20rdquo

Smaring och stora LaptopparLaumlsavstaringnd

245rdquo

Smaring och stora stationaumlra bildskaumlrmarLaumlsavstaringnd

28rdquo

TVLaumlsavstaringnd

84rdquo

5rdquo

8rdquo

13rdquo

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Brytpunkter

phablet amp platta

stationaumlr pc

telefonbull Begraumlnsat stoumld foumlr

landscapebull En ldquoframerdquo i tagetbull Systemfaumlltet till vaumlnsterbull Steering wheel on the

rightbull 4+ kommandon laumlngst

nerbull Flikar centrerade

bull Begraumlnsat stoumld foumlr landscape

bull En bildruta I tagetbull Systemfaumlltet till vaumlnsterbull steering wheel on the

rightbull 4+ actions laumlngst nerbull Enskild kolumn slutar

skalabull Flikar centrerade

bull Fullt stoumld foumlr landscapebull Tvaring ldquoframesrdquobull Kommandon oumlverstbull ldquohelliprdquo visas hela tiden-

TBDbull Flikar vaumlnsterjusteradebull Visa soumlkfaumlltet om det

tidigare bara var en ikon paring en mindre enhet

bull Fullt stoumld foumlr landscapebull Tre ldquoframesrdquobull Kompakt

navigationspanelbull Kommandon oumlverstbull ldquohelliprdquo visas hela tidenbull Flikar vaumlnsterjusterade

548 720 1024320epx

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Floumlda inte storlek

My UI My UI My UI

My UI My UI

My UI

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Kolla varianter

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Naumlr du designar1 Anpassa till storleksfoumlraumlndringar

2 Anpassa till inputsaumltt

3 Bygg foumlr effektiva pixlar

4 Raumlkna med skalningsalgoritmen

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Adaptiva verktyg

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Visual StatesDefinera XAML vyerUnik layout foumlr specifika states

Foumlrekla animationLaumlgg automatiskt till state transitions

Bygg i BlendDesigna och foumlrhandsgranska states och transitions

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Visual States

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Visual States

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

ldquoVisual statesrdquo laringter designersdefinera flera utseenden paring en vy

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Skraumlddarsydda adaptiva triggersBygg foumlr att hantera specialfallpublic class DeviceFamilyTrigger StateTriggerBase private string _deviceFamily public string DeviceFamily get return _deviceFamily set var qualifiers = WindowsApplicationModelResourcesCore ResourceContextGetForCurrentView()QualifierValues if (qualifiersContainsKey(DeviceFamily)) SetActive(qualifiers[DeviceFamily] == (_deviceFamily = value)) else SetActive(false)

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt med

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

SummeringMicrosoft design language

Adaptiv design

Designupplaumlgg

Adaptiva verktyg

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Q amp A

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Vi fortsaumltter strax med Adaptiv kod

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Adaptiv Kod

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

AgendaWindows 81 en tillbakablick

Plattform Extension SDKs

Adaptiv kod

Adaptiv kod och API Versioner

Delade Projekt

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Vad aumlr Adaptiva ApparWindows appar anpassar sig till olika

Plattformsversioner

Enhetstyper

Skaumlrmstorlekar

ldquoAdaptivt UIrdquo hanterar olika skaumlrmar

ldquoAdaptivt kodrdquo kan aktivera din app saring den bara koumlr kod naumlr det koumlr paring en specifik enhet ocheller specifik version av plattformenhets specifika APIer

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Tillbakablick paring Windows 81

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Windows 81 UniversalDelad kod tvaring binaumlrer

WindowsBinary Phone

Binary

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Alla APIer fanns inte oumlverallt

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Compilation directivesC Syntax

if WINDOWS_PHONE_APPWindowsPhoneUIInputHardwareButtonsBackPressed += HardwareButtons_BackPressedendif

C++ Syntax

if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtonsBackPressed += ref new EventHandler

ltBackPressedEventArgs^gt (this ampNavigationHelperHardwareButton_BackPressed)

endif

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Blickar framaringt till UWP

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Windows universal

DesktopPC

2 in 1

Mobile

Tablet

Phablet

Phone

Xbox

Xbox

IoT

Band

IoT headless

Raspberry Pi

Home Automati

on

Surface Hub

Surface Hub

Holographic

HoloLens

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Universal Windows PlatformEN API-graumlnsnittsytaEn garanterad graumlnssnittsytaSamma paring alla enheter

PhoneDevice

XboxDevice

DesktopDevice

Windows Core

Universal Windows Platform

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Enhetsfamilj beroende

Beroende paring en enhets familjltDependenciesgt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Mer aumln enltDependenciesgt ltTargetDeviceFamily Name=WindowsDesktop minVersion=100100690 maxVersionTested=10500 gt ltTargetDeviceFamily Name=WindowsUniversal minVersion=100100690 maxVersionTested=10500 gtltDependenciesgt

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Platform Extension SDKs

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Adding extensions

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Extension SDKs

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Extension SDKs

UWP

Windows Core Windows Core Windows Core Windows Core

UWP UWP UWP

Desktop Mobile Xbox Morehellip

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

WindowsFoundationMetadataApiInformation

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Test capabilities at runtime

var api = WindowsPhoneUIInputHardwareButtonsif (WindowsFoundationMetadataApiInformationIsTypePresent(api))

WindowsPhoneUIInputHardwareButtonsCameraPressed += CameraButtonPressed

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

ApiInformation APIt testar efter egenskaper vid koumlrning

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Vilka Extension SDKs behoumlver jagMaringnga appar behoumlver inte Extension SDK alls

Anvaumlnd Extension SDKs foumlr att utmaumlrka din app naumlr den koumlr paring en specifik enhets-familj

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Hantera back utan extension

SystemNavigationManagerGetForCurrentView()BackRequested

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Identifiera Extension SDKMSDN docs

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Utforska API Kontrakt

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Adaptiv kod och API versioner

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Anvaumlnd en specifik version av ett APIAdaptiv kod inte bara foumlr att hantera enhetsfamilj-specifik kod

Skriv din kod mot en bas UWP version

Hantera uppdateringar

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Anvaumlndning av uppdaterade APIervar contract = DevicesScannersScannerDeviceContractint majorVersionRequired = 3

if (WindowsFoundationMetadataApiInformation IsApiContractPresent(contract majorVersionRequired ))

Call the API that is present in V3 and above else Your original code supporting users who havenrsquot upgraded yet

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Men delade projekt daring

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Men delade projekt daringDelade projekt delar kod och anvaumlnder pre-compilation

IF1 WINDOWS_APP2 WINDOWS_PHONE_APP3 WINDOWS_UAP (ny)4 WINDOWS_UWP

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Anvaumlnd adaptiv kod i delade projektif WINDOWS_PHONE_APP Processing for Windows Phone 81 only

WindowsPhoneUIInputHardwareButtonsCameraPressed += thisCamera_Pressed

elif WINDOWS_UAP

Processing for Windows UWP ndash Desktop AND Mobile if (WindowsFoundationMetadataApiInformation IsTypePresent(WindowsPhoneUIInputHardwareButtons))

But this is only for UWP AND Mobile WindowsPhoneUIInputHardwareButtonsCameraPressed

+= thisCamera_Pressed

endif

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

SummeringWindows 81 tillbakablick

Platform Extension SDKs

Adaptiv Kod

Adaptiv kod och API Versioner

Delade Projekt

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

Q amp A

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

Microsoft Developer NetworkDokumentationhttpmsdnMicrosoftcomhttpdevWindowscom

OumlvningskurserhttpmseventsMicrosoftcomhttpMicrosoftVirtualAcademycom

httpwindowsMicrosoftcom

SummeringIntroduktion

Data bindningar

Adaptiv Design amp UI

Adaptiv kod

Windows 10 Summer DevCamp

Jimmy Engstroumlm Jessica EngstroumlmjimmyapeoholicseJessicacatoholicse apeoholic grytlappen

Windows 10 Summer DevCamp

Jimmy Engstroumlm Jessica EngstroumlmjimmyapeoholicseJessicacatoholicse apeoholic grytlappen

Labbtajm

• Windows 10 Summer DevCamp
• Om oss
• Om oss (2)
• Coding After Work
• Slide 5
• Introduktion
• Slide 7
• Windows Core
• Windows Core (2)
• Slide 10
• Slide 11
• Varje enhetsfamilj (SKU) laumlgger till funktioner
• Resan till sammanslagning
• Resan till sammanslagning (2)
• Slide 15
• Slide 16
• Universal Windows Platform
• Slide 18
• Universella Windows-plattformen kan uppdatera i egen takt
• Windows app
• Windows app (2)
• Utvecklarupplevelse
• Hello devices
• Plattformstillaumlgg
• Tillaumlgg goumlr inte att binaumlren slutar fungera paring andra enheter
• Traditionell Microsoft teknologi aumlr inte det enda saumlttet att sk
• Slide 27
• Slide 28
• Slide 29
• Slide 30
• Bridges kommer att faring fler appar till Windows Plattformen
• Adaptiv design
• Adaptiv design (2)
• Continuum for Convertibles and Phones
• Adaptiv kod
• En enkel enad utvecklingmiljouml
• Visual Studio IDE
• Blend foumlr Visual Studio
• Visual Studio 2015 versioner
• Developer unlock
• Uteckla var
• Managed spraringk aumlr baumlttre aumln naringgonsin
• NET Native
• Alla Windows appar kommer bli kompilerade till Net Native
• Uppsidorna med Net Native
• ldquoTemplate 10rdquo
• Bidra till Template10 httpakamstemplate10
• Slide 48
• Slide 49
• Databindningar
• Slide 51
• Straumlngar
• Dynamisk Data
• Dynamisk Data (2)
• Uppdatera graumlnssnittet
• Syntax
• Syntax (2)
• Syntax (3)
• Klassisk binding
• Kompilerad binding
• Slide 61
• xBind
• Data context foumlr xBind aumlr den bakomliggande koden
• Syntax (4)
• Syntax skillnader
• Syntax skillnader (2)
• Syntax skillnader (3)
• Syntax skillnader (4)
• ResourceDictionary
• Referera till en Dictionary
• Anvaumlnd BindingsUpdate() foumlr asynkron data
• Bindning foumlr haumlndelser
• BindingsStopTracking() pausar kompilerad bindning
• Vanliga fraringgestaumlllningar
• xBind aumlr inte foumlr alla laumlgen (aumln)
• Naumlr anvaumlnder man klassisk binding
• xBind Kan anvaumlndas i de flesta fall
• Slide 78
• Q amp A
• Slide 80
• Adaptiv design amp UI
• Slide 82
• Microsoft Designspraringk
• Microsoft designspraringk principer
• Microsoft designspraringk principer (2)
• Microsoft designspraringk principer (3)
• Microsoft designspraringk principer (4)
• Microsoft designspraringk principer (5)
• Microsoft designspraringk principer (6)
• Typeography
• Foumlr text anvaumlnder vi mest 15 epx Segoe UI Regular
• Iconography
• Minimera tomrum mellan element
• Fyra aumlr ett magiskt nummer
• Faumlrgramper
• Faumlrgramper (2)
• Adaptiv design (3)
• Tre saumltt att anpassa
• Tre saumltt att anpassa (2)
• Tre saumltt att anpassa (3)
• Aumlndra storlek
• Aumlndra floumlde
• Aumlndra position
• Aumlndra design
• Adaptiv design (4)
• Skraumlddarsydd design
• Skraumlddarsydd design (2)
• Skraumlddarsydd design (3)
• Kombinera teknikerna foumlr just din design
• Slide 110
• Adaptiva kontroller
• Intelligent input
• Skalningsalgoritm
• Skalningsalgoritm (2)
• Slide 115
• Slide 116
• Slide 117
• Slide 118
• Fysiska pixlar vs effektiva pixlar
• Fysiska pixlar vs effektiva pixlar (2)
• Effektiv pixel
• Ignorera skalning upploumlsning amp dpi Designa med Effektiva Pix
• Designupplaumlgg
• Planera din design
• Planera din design (2)
• Planera din design (3)
• Brytpunkter
• Brytpunkter (2)
• Brytpunkter (3)
• Floumlda inte storlek
• Floumlda inte storlek (2)
• Kolla varianter
• Kolla varianter (2)
• Naumlr du designar
• Adaptiva verktyg
• Visual States
• Visual States (2)
• Visual States (3)
• Visual States (4)
• Visual States (5)
• Visual States (6)
• ldquoVisual statesrdquo laringter designers definera flera utseenden paring en
• Skraumlddarsydda adaptiva triggers
• Utvecklare har maringnga verktyg att bygga ett adaptivt graumlnssnitt
• Slide 145
• Slide 146
• Q amp A (2)
• Slide 148
• Adaptiv Kod
• Slide 150
• Vad aumlr Adaptiva Appar
• Tillbakablick paring Windows 81
• Windows 81 Universal Delad kod tvaring binaumlrer
• Alla APIer fanns inte oumlverallt
• Compilation directives
• Blickar framaringt till UWP
• Slide 157
• Universal Windows Platform (2)
• Enhetsfamilj beroende
• Platform Extension SDKs
• Adding extensions
• Extension SDKs
• Extension SDKs (2)
• Extension SDKs (3)
• Testing for capabilities
• Test capabilities at runtime
• ApiInformation APIt testar efter egenskaper vid koumlrning
• Vilka Extension SDKs behoumlver jag
• Vilka Extension SDKs behoumlver jag (2)
• Hantera back utan extension
• Identifiera Extension SDK
• Utforska API Kontrakt
• De enhets-familjer du vaumlljer avgoumlr vilka apier du kan anvaumlnda
• Adaptiv kod och API versioner
• Anvaumlnd en specifik version av ett API
• Anvaumlndning av uppdaterade APIer
• Men delade projekt daring
• Men delade projekt daring (2)
• Men delade projekt daring (3)
• Anvaumlnd adaptiv kod i delade projekt
• Slide 181
• Q amp A (3)
• Microsoft Developer Network
• Slide 184
• Windows 10 Summer DevCamp (2)
• Slide 186