Tim Heuer Program Manager Microsoft Corporation

Slides:



Advertisements
Similar presentations
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
Advertisements

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or.
Preface Demo A Quick Thank You How Did We Do It?
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or.
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
Feature: Reprint Outstanding Transactions Report © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product.
Feature: Purchase Requisitions - Requester © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names.
MIX 09 4/15/ :14 PM © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
Co- location Mass Market Managed Hosting ISV Hosting.
Windows 7 Training Microsoft Confidential. Windows ® 7 Compatibility Version Checking.
Multitenant Model Request/Response General Model.
Feature: Purchase Order Prepayments II © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are.
Announcing Demo Announcing.
Feature: OLE Notes Migration Utility
Feature: Web Client Keyboard Shortcuts © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are.
Feature: SmartList Usability Enhancements © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names.
Session 1.
Built by Developers for Developers…. © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names.
 Rico Mariani Architect Microsoft Corporation.
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or.
Feature: Assign an Item to Multiple Sites © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names.
WinHEC /22/2017 © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or.
Connect with life Connect with life
demo Receive Inventory Export Parse and Normalize.
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or.
Feature: Document Attachment –Replace OLE Notes © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product.
Feature: Customer Combiner and Modifier © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are.
Ian Ellison-Taylor General Manager Microsoft Corporation PC27.
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or.
demo Instance AInstance B Read “7” Write “8”

customer.
demo © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names.
demo Demo.
Feature: Void Historical/Open Transaction Updates © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product.
demo QueryForeign KeyInstance /sm:body()/x:Order/x:Delivery/y:TrackingId1Z
Feature: Suggested Item Enhancements – Analysis and Assignment © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and.
projekt202 © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are.
The CLR CoreCLRCoreCLR © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product.
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks.
© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or.

IoCompleteRequest (Irp);... p = NULL; …f(p);
MIX 09 4/17/2018 4:41 PM © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
6/10/ :23 PM TOOL-504T A deep dive into Visual Studio 11 Express for designing Metro style apps using XAML Joanna Mason & Unni Ravindranathan Program.
Возможности Excel 2010, о которых следует знать
Title of Presentation 11/22/2018 3:34 PM
Tips and tricks for developing Metro style apps using XAML
Deep dive on app data roaming
Metro style apps using XAML: What you need to know
Baseline: How Are We Doing Now?
Title of Presentation 12/2/2018 3:48 PM
1/3/2019 1:21 PM © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
Silverlight Debugging
8/04/2019 9:13 PM © 2006 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered.
4/27/17, Bell #8 What amount of net pay has been earned this period?
Виктор Хаджийски Катедра “Металургия на желязото и металолеене”
WINDOWS AZURE A LAP AROUND PLATFORM THE Steve Marx
PENSACOLA ENERGY WORK PLAN OCTOBER 10, 2016
Title of Presentation 5/12/ :53 PM
Шитманов Дархан Қаражанұлы Тарих пәнінің
Title of Presentation 5/24/2019 1:26 PM
5/24/2019 6:44 PM 1/8/18 Bell #10 In a world governed by the gods, is there any room for human will? Do human choices make a difference? EXPLAIN © 2007.
日本初公開!? Vista の新機能を実演 とっちゃん わんくま同盟 7/23/2019 9:09 AM
Title of Presentation 7/24/2019 8:53 PM
WCL425 App Compat for Nerds Chris Jackson.
5/6/19, Bell #6 12/11/2019 8:26 PM Explain the relationship between this picture and the events that took place in Chapter 7 in Animal Farm. © 2007 Microsoft.
Presentation transcript:

Tim Heuer Program Manager Microsoft Corporation 11/16/2018 1:02 PM APP-847T Reach all your customer's devices with one beautiful XAML user interface Tim Heuer Program Manager Microsoft Corporation © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Agenda Understanding Adaptability XAML Patterns for Managing Layout Providing unique views in Snapped state You’ll leave with examples of how to Ensure users will have a consistent/reliable experience with your app Understand the techniques to accomplish adaptability easily

Fundamentals of Layout demo Fundamentals of Layout

Windows allows users to choose the device that is right for them and their productivity

Screen sizes Minimum app resolution is 1024x768 Baseline resolution is 1366x768 Apps should behave consistently across screen sizes Apps take advantage of added screen real-estate

Fluid Layout in XAML Horizontal/Vertical Stretch modes Star-sizing on width/height

Fixed Layout in XAML <Grid x:Name="LayoutRoot" Background="Green"> <Grid.ColumnDefinitions> <ColumnDefinition Width="250" /> </Grid.ColumnDefinitions> <Rectangle Fill="Red" Grid.Column="1" /> </Grid>

Fluid Layout in XAML (Star-sizing) <Grid x:Name="LayoutRoot" Background="Green"> <Grid.ColumnDefinitions> <ColumnDefinition Width="250" /> <ColumnDefinition Width="250*" /> </Grid.ColumnDefinitions> <Rectangle Fill="Red" Grid.Column="1" /> </Grid>

Fluid Layout in XAML (Stretch) <Grid x:Name="LayoutRoot" Background="Green"> <Grid.ColumnDefinitions> <ColumnDefinition Width="250" /> <ColumnDefinition Width="250*" /> </Grid.ColumnDefinitions> <Button Content="Hello World" Grid.Column="1" HorizontalAlignment="Stretch" /> </Grid>

Snapped Apps Snapped is always 320px wide User is in control of when an app is snapped and all apps are snap-able Apps retain context in continuous experiences Apps can be tailored to the snap view For tailored views use navigation framework and pass state Scrolling patterns change in Snapped

Grid Template Normal

Grid Template Snapped

Grid Template Snapped

Grid Template Snapped :( FAIL

Orientation Windows supports portrait for devices that can be rotated Apps behave consistently in orientation changes Apps can be tailored to in specific orientations Apps can prefer (and/or lock) an orientation No snapped apps in Portrait

InitialRotation and Preferred Orientation … <Application …> <VisualElements DisplayName="Application18" Logo="Images\Logo.png" SmallLogo="Images\SmallLogo.png" Description="Application18" ForegroundText="light" BackgroundColor="#222222" InitialRotationPreference="landscapeAndFlipped">

InitialRotation and Preferred Orientation protected override void OnLaunched(LaunchActivatedEventArgs args) { DisplayProperties.AutoRotationPreferences = DisplayOrientations.Landscape | DisplayOrientations.LandscapeFlipped; Window.Current.Content = new MainPage(); Window.Current.Activate(); }

Layout versus Resize Resize Layout Orientation Window events…you will still get them Layout View “state” changes: FullScreen, Filled, Snapped Orientation Portrait  Landscape changes

FullScreen

Snapped Filled

VisualStateManager Use VisualStates for each layout FullScreen (this is ‘normal’ and Landscape) Filled Snapped Portrait VisualStateManager.GoToState() helps easy switching

demo -Layout and Orientation Events -Using VisualStateManager -Tailoring Snapped Views using Navigation -Sudoku Demonstration

VisualStateManager with Layout States <Grid x:Name="LayoutRoot"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="OrientationStates"> <VisualState x:Name="FullScreen" /> <VisualState x:Name="Filled" /> <VisualState x:Name="Snapped" /> <VisualState x:Name="Portrait" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid>

Orientation Helpers public static string GetViewState() { var orientation = DisplayProperties.CurrentOrientation; // portrait if (orientation == DisplayOrientations.Portrait || orientation == DisplayOrientations.PortraitFlipped) return "Portrait"; // else return what it is for landscape return ApplicationLayout.Value.ToString(); }

Pixel Density Problem: as pixel density increases, things get too small to touch With scaling, touch targets are maintained and things get crisper on screen 10.6” 1366x768 10.6” 1920x1080

Pixel Density Windows scales to pixel density to maintain touchability Layouts, text and images are crisper on higher pixel densities Three scale percentages 10.6” 1366x768 148 dpi 10.6” 1920x1080 208 dpi 10.6” 2560x1440 277 dpi 100% 140% 180%

Pixel Density in XAML Avoiding bitmap when vector is available For bitmap provide different images for each scale Structure your application at the source Listen for PPI notifications

Image Source Example <Grid x:Name="LayoutRoot" Background="#FF0C0C0C"> <Image Source="Assets/product.png" Width="100" Height="100" /> </Grid>

Recap Set up app infrastructure for adaptability from the start Listen for specific layout/orientation changes over resize Use Navigation framework and VisualStateManager for transitions Favor vector over bitmap when possible for free scaling

When you design for adaptability in all cases your users will be delighted

Related sessions [APP-207T] Reach your customers’ devices with one beautiful HTML5 user interface [APP-494T] Stand out with styling and animation in your XAML app [PLAT-781T] Using location & sensors in your app [APP-737T] Metro style apps using XAML: what you need to know [APP-741T] Metro style apps using XAML: Make your app shine [HOL] Using Windows 8 templates for building Metro style Apps

dev.windows.com

thank you Feedback and questions http://forums.dev.windows.com Session feedback http://bldw.in/SessionFeedback

11/16/2018 1:02 PM © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.