phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.
-
Upload
hilda-sims -
Category
Documents
-
view
219 -
download
0
Transcript of phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.
![Page 1: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/1.jpg)
![Page 2: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/2.jpg)
From 4 to 40 inches: Developing Windows Applications across Multiple Form-FactorsPeter Torr, [email protected] Program Manager (Developer Platform)
WIN-B322
![Page 3: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/3.jpg)
phones
phablets
tablets
laptops
two-in-ones
all-in-ones
desktops
digital whiteboards
televisions
![Page 4: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/4.jpg)
bigger screen more pixels more content
higher dpi more pixels nicer graphics
![Page 5: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/5.jpg)
DEMO: Silverlight 8.1
Preserving your investment in Silverlight apps
![Page 6: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/6.jpg)
Friction-free upgradesOpt-in to supporting larger screens
http://aka.ms/wpsllarge
Only available on Windows Phone OS
Windows Phone Silverlight 8.1
![Page 7: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/7.jpg)
Layout Assets
Positioning UI objects on the screen
Images, videos, and other graphics
![Page 8: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/8.jpg)
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
Mastering
![Page 9: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/9.jpg)
40”
30”24”
18”14”
10”
8”
6”
4”
to scale
Size (not resolution) matters
![Page 10: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/10.jpg)
Shape (not orientation) matters
widetall
square
![Page 11: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/11.jpg)
DEMO: Universal app
TIC TAC TOE – Part 1
![Page 12: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/12.jpg)
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
Mastering
![Page 13: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/13.jpg)
4K TV:3840 x 2160
But I just “upgraded”to a 4K TV!
If a 4” phone is 800 pixels wide, does that mean a 40” monitor is
8,000?
![Page 14: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/14.jpg)
Far-away objects appear smaller than they are
xy
2x
2y
θ
that’s an eye…
![Page 15: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/15.jpg)
~4” phone at 10 feet
Far-away objects appear smaller than they are
~40” screen at 10 feet
~4” phone at 1 foot Same angle
of view
![Page 16: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/16.jpg)
Layout Assets
Physical Size & Shape
Effective Resolution
Detail Level
Scale Factors
Mastering
Viewing Distance
![Page 17: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/17.jpg)
Effective resolution embraces viewing distance
~40” screen at 10 feetSame effective
resolution
~4” phone at 1 foot
X × Y effective pixels X × Y effective pixels
Same angle of view
![Page 18: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/18.jpg)
40”
30”24”
18”14”
10”
8”
6”
4”
to scale
Size (not resolution) matters
![Page 19: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/19.jpg)
2560 x 1440
1920 x 1080
1366 x 768450 x 800
to scale
Effective resolution (not size) matters
384 x 683
![Page 20: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/20.jpg)
DEMO: Universal app
TIC TAC TOE – Part 2
![Page 21: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/21.jpg)
Build shared UI componentsCombine them into platform-specific pagesAdjust layout based on available size & shape
Clean separation of view and model won’t hurt…
Building adaptive apps for Windows
![Page 22: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/22.jpg)
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
Mastering
![Page 23: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/23.jpg)
![Page 24: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/24.jpg)
Effective asset size determines detail level
dvd_large.png dvd_small.png
![Page 25: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/25.jpg)
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
Mastering
![Page 26: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/26.jpg)
Relative density (not DPI) is important
Also known as “scale factor” or “resolution scale”
2× as dense
![Page 27: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/27.jpg)
Ignore this setting!
![Page 28: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/28.jpg)
DEMO: Assets
Detail level and scale factors
![Page 29: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/29.jpg)
Determine desired layout size (in effective pixels)Output your asset at that size (Shared project)Multiply the layout size by 2.4Output your asset at that size (Phone-only)View the result on target devices
Emulator / simulator insufficient for asset verification
If it looks good, you’re done!If not, try an additional scale factor (eg, 1.4 or 1.8)
Steps to generating assets
![Page 30: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/30.jpg)
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
Mastering
![Page 31: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/31.jpg)
Ideally, use a vector formatOtherwise, bitmaps >= 400% scaleExport at target scale factors as needed
Don’t forget about the detail level!Don’t worry if you only have a low-res asset
Master at highest practical resolution
![Page 32: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/32.jpg)
Layout Assets
Physical Size & Shape
Viewing Distance
Effective Resolution
Detail Level
Scale Factors
Mastering
![Page 33: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/33.jpg)
DisplayInformation.GetForCurrentView()
Where’s the code?
Property Description
ResolutionScale Scale factor (enum) – Windows
RawPixelsPerViewPixel Scale factor (double) – Windows Phone
RawDpiX, RawDpiY Ignore unless measuring real-world objects (ruler, hardware, etc.)
LogicalDpi Avoid unless working with Direct2D or legacy code that assumes 96 DPI
![Page 34: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/34.jpg)
Windows Phone Developers
Important information when migrating from Silverlight to XAML
![Page 35: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/35.jpg)
~10” tablet~5” phone
768px high(effective)
384px high(effective)
2× size
½× resolution
![Page 36: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/36.jpg)
Minimum effective resolution for Phones
Lumia 920 Physical resolution
Scale Factor
Effective Resolution
Silverlight (8.x) 768 x 1280 1.6 480 x 800
XAML / HTML 768 x 1280 2.0 384 x 640
multiply existing constants by 0.8
![Page 37: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/37.jpg)
Use the right words!Good: effective resolution / shape / scale factorBad: physical resolution / orientation / DPI
Architect for a flexible layoutPrefer component parts vs. monolithic pagesLet the layout system work for you
Focus on the right set of assetsStart with high-resolution mastersGenerate only the scale factors you need (eg, 100% and 240%)Ensure detail level is appropriate
Wrap-up & call to action
![Page 38: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/38.jpg)
FDN05: The Microsoft Application Platform for Developers: Create Applications That Span Devices and Services
WIN-B363: Build for Both: Building Shared Apps for Windows Phone and Windows 8.1
DEV-B340: Building Beautiful Applications Using Blend and Visual Studio for XAML Applications
DEV-B333: Sharing Code and UI with Universal Projects and Windows Library for JavaScript (WinJS)
Related content – breakout sessions
![Page 39: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/39.jpg)
Silverlight large-screen support: http://aka.ms/wpsllarge
LayoutRules code sample: http://bit.ly/1kUy0rO
Optimum emulator sizes: http://bit.ly/1oo9gJa
Related content – online & in-person
Find Me Later: Expo Hall, 12:30 – 3:[email protected]
![Page 40: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/40.jpg)
Windows Enterprise windows.com/enterprise windowsphone.com/business
Windows Track Resources
Windows Springboard microsoft.com/springboardMicrosoft Desktop Optimization Package (MDOP)
microsoft.com/mdop Windows To Go microsoft.com/windows/wtg
Windows Phone Developer developer.windowsphone.com
![Page 41: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/41.jpg)
Resources
Learning
Microsoft Certification & Training Resources
www.microsoft.com/learning
msdn
Resources for Developers
http://microsoft.com/msdn
TechNet
Resources for IT Professionals
http://microsoft.com/technet
Sessions on Demand
http://channel9.msdn.com/Events/TechEd
![Page 42: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/42.jpg)
Complete an evaluation and enter to win!
![Page 43: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/43.jpg)
Evaluate this session
Scan this QR code to evaluate this session.
![Page 44: phones phablets tablets laptops two-in-ones all-in-ones desktops digital whiteboards televisions.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f385503460f94c5455e/html5/thumbnails/44.jpg)
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.