Presentation is loading. Please wait.

Presentation is loading. Please wait.

Lars Klint Adaptive UX - A Single UI for Everything MOB234.

Similar presentations


Presentation on theme: "Lars Klint Adaptive UX - A Single UI for Everything MOB234."— Presentation transcript:

1

2 Lars Klint Adaptive UX - A Single UI for Everything MOB234

3 Fragmentation - A Developer’s Nightmare

4 http://opensignal.com/reports/2015/08/android-fragmentation/

5

6

7 24,093 Distinct Android devices 37.8% are Samsung's devices 1,294 Device brands

8 http://opensignal.com/reports/2015/08/android-fragmentation/

9

10

11 PhoneSmall Tablet 2-in-1s (Tablet or Laptop) Desktops & All-in-Ones PhabletLarge Tablet Classic Laptop XboxIoTSurface HubHolographic Windows 10

12

13 13

14

15

16 Adaptive Interfaces - Bringing Sanity Back

17

18 .NET Native is a precompilation technology for building and deploying Windows apps. It automatically compiles apps that target the.NET Framework and Windows 10 to native code..Net -> IL -> Native code.Net -> Native code

19

20

21 Effective Pixels

22

23

24

25

26

27

28

29 Building Adaptive UX - Target all the things!

30

31 Relative Panel A new XAML layout control, which arranges its children by declaring relationships between them.

32 Relative Panel <Rectangle x:Name="BlueRect" Fill="Blue" MinHeight="100" MinWidth="100" RelativePanel.RightOf="RedRect" /> <!-- Width is not set on the green and yellow rectangles. It's determined by the RelativePanel properties. --> <Rectangle x:Name="GreenRect" Fill="Green“ MinHeight="100" Margin="0,5,0,0" RelativePanel.Below="RedRect" RelativePanel.AlignLeftWith="RedRect" RelativePanel.AlignRightWith="BlueRect"/> <Rectangle Fill="Yellow" MinHeight="100" RelativePanel.Below="GreenRect" RelativePanel.AlignLeftWith="BlueRect" RelativePanel.AlignRightWithPanel="True"/>

33

34

35 VisualStateManager - Old public MainPage() { this.InitializeComponent(); this.SizeChanged += (s, e) => { var state = "VisualState000min"; if (e.NewSize.Width > 500) state = "VisualState500min"; else if (e.NewSize.Width > 800) state = "VisualState800min"; else if (e.NewSize.Width > 1000) state = "VisualState1000min"; VisualStateManager.GoToState(this, state, true); }; }

36 VisualState - Adaptive triggers

37

38 XAML View Setting custom device specific XAML pages

39

40 Speed Develop for more devices, faster Capitalise on your work

41 Maintenance Less Code, Less Mess (hopefully) More time to build features

42

43

44

45 Continue your Ignite learning path Visit Microsoft Virtual Academy for free online training visit https://www.microsoftvirtualacademy.com Visit Channel 9 to access a wide range of Microsoft training and event recordings https://channel9.msdn.com/ Head to the TechNet Eval Centre to download trials of the latest Microsoft products http://Microsoft.com/en-us/evalcenter/

46


Download ppt "Lars Klint Adaptive UX - A Single UI for Everything MOB234."

Similar presentations


Ads by Google