Hogyan skálázódik a Windows 8 a különböző képernyőkre és méretformátumokra
A Windows 8 Metro stílusú alkalmazásainál az egyik legfontosabb elvárás, hogy különböző képernyőkre és méretformátumokra (form factors) adaptálódjanak, azaz ne kelljen a fejlesztőknek annyi UI dizájnt készíteni ahány kombinációja van ezeknek a tényezőknek. Értelemszerűen a rendszer maga is eszerint működik, beleértve a ‘built-in control’ okat. Mindez igencsak aktuális szoftver kérdés, amire egy tegnapi tapasztalat kapcsán kellett rádöbbennem.
The official demo by Tami Reller from Microsoft at CES 2012.
Windows 8 is designed to work with touch and with a mouse and keyboard. So, no matter how large or how small your screen or screens, you have what you need. So, whether you have a 10-inch screen, or four 30-inch HD screens, Windows 8 is going to bring you that no-compromise experience.
Tami Reller, CFO and CMO, Windows and Windows Live Division
Great in multiple views & on multiple form factors
Apps use controls that support “fluid” layout, so content flows naturally and adapts to the available space on devices of the users’ choosing. The platform provides automatic scaling to make it easy to design for multiple resolutions and screen orientation. Learn more about Designing for different form factors.
Metro style app development (MSDN Dev Center)
Fluid, multiple views of your app
Windows Developer Preview puts users in charge. You want your app UI to shine on any device, in any orientation, in whatever circumstance the user decides to use it. When users change the orientation of their monitor or mobile device, your app gracefully re-flows in response. When you design your app UI with fluid views, you get this behavior for free. Windows takes care of the rest.
- Landscape Design for landscape first so your app looks good on all form factors.
- Portrait But remember some devices rotate! So optimize the layout of your content when in portrait view and retain functionality whenever possible.
The key to looking good in these views (as well as in snapped, fill, and fullscreen views) is defining layouts for the app in each view. When you plan ahead for each view, your app UI reflows automatically when a different view is triggered on the device.
If users can access your app on multiple form factors, does that mean you have to design a different UI for every potential screen size Windows works on? That’s a lot of different screen sizes! The answer is, not necessarily. Built-in scaling means your app and content always look great, whether on a small 7″ device or on a big 30″ monitor. You just need to use a fluid layout and make sure the graphics in your app look good when scaled.
For more info, see Guidelines for scaling.
Metro style app development (MSDN Dev Center)
[This documentation is preliminary and is subject to change.]
To provide the most flexible and adaptable user interface for the users of your Metro style app, you first need to decide on the layout mode most appropriate for your content and the views through which the content can be consumed. This topic describes the Cascading Style Sheets, Level 3 (CSS3) layout features supported by Metro style apps in Windows Developer Preview.
CSS3 Flexible Box layout
CSS3 Flexible Box (flexbox) is a layout mechanism where child elements are arranged and sized using a constraint-based system that supports both relative flexible sizing and intrinsic sizing. Flexible Box layouts can adapt to multiple screen sizes and enable digital newspaper, magazine, and other digital print media consumptive scenarios.
Flexbox layout is intended for laying out complex web pages, and is especially useful for making the relative position and size of elements stay constant, even as screen and browser window sizes vary and change. This can lessen the reliance on floats, which are more complicated to position and size correctly.
Flexbox layout takes the available space into account when defining box dimensions, which enables relative sizing and positioning. For example, you can ensure that extra whitespace in a browser window is equally distributed to the size of multiple child elements, and that those child elements are centered in the middle of the containing block.
With Flexbox layout, you can:
- Build a layout that is fluid—even by using different screen and browser window sizes—but contains elements (such as images or controls) that maintain their position and size relative to each other.
- Specify how excess space along the layout axis (horizontal or vertical) of a series of elements can be proportionately allocated to increase the size of given elements.
- Specify how excess space along the layout axis of a series of elements can be allocated to fall before, after, or between the series of elements.
- Specify how excess space perpendicular to the layout axis of an element can be shaped around the element—for instance, extra space above or below buttons that have been laid out side by side.
- Control the direction that elements are laid out on the page—for instance, top to bottom, left to right, right to left, or bottom to top.
- Reorder elements on the screen in an order that is different from how they are specified by the Document Object Model (DOM).
CSS3 Grid alignment
The Grid provides a mechanism for authors to divide available space for lay out into columns and rows using a set of predictable sizing behaviors. Authors can then precisely position and size the building block elements of their application by referencing the Grid Lines between the columns and rows, or by defining and referencing a Grid Cell, which is a rectangular space covering an intersection of columns and rows.
Like Flexbox, the Grid enables more layout fluidity than is possible positioning by using floats or script. It enables you to divide space for major regions of a webpage or web application, and to define the relationship between parts of an HTML control in terms of size, position, and layer. This removes the need to create a fixed layout, which cannot take advantage of available space within the browser window. Because the Grid enables you to align elements into columns and rows but has no content structure, it also enables scenarios that are not possible with HTML tables. By using the Grid in conjunction with media queries, you can enable your layout to seamlessly adapt to changes in device form factor, orientation, available space, and more.
CSS3 Multi-column layout
Multi-column layouts support content flow from one column to another for an arbitrary number of columns.
Multi-column layout enables content to be flowed into multiple columns, which retain a gap and an optional rule between them. It also makes it possible to vary the number of columns based on the size of the browser window. A multi-column element is defined by the W3C as an element whose column-width or column-count property is not auto and therefore acts as a container for multi-column layout. Multi-column layout introduces the column box, which is defined as a new type of container between the content box and the content. Column boxes contain rows, which are ordered in the direction of the multi-column element. Every column box has a column height and a column width. Adjacent column boxes are separated by a column gap, which can optionally contain a column rule.
CSS3 Connected Frames layout
Connected Frames provides a mechanism for authors to take a single content stream, and segment that stream into multiple empty containers in an HTML template. HTML templates are documents that are largely empty of original content, and are instead composed primarily of empty containers that are sized and positioned to give incoming content a specific layout.
Metro style app development (MSDN Dev Center)
A Windows 8 PC is really a new kind of device, one that scales from small, touch-only tablets to laptops and desktops. While reimagining Windows 8, we designed it to deliver a great experience regardless of the form factor or screen orientation.
As we designed the end-to-end experience on different form factors in Windows 8, we used the following principles:
- The experience tailors itself for all form factors: small screens, wide screens, laptops and desktops.
- The experience takes advantage of widescreen formats for multi-tasking and for full-screen video.
- The device can be held and interacted with in the way that is most comfortable.
- Developers have the opportunity to create one app that runs on all views and orientations across form factors with minimal effort.
In a future post, we’ll cover in depth how Windows 8 scales to different screens from a developer perspective, but it’s worth talking a little bit about screen size in the context of landscape and portrait orientations. Windows 8 will run on PCs with different sized screens and with different resolutions and different aspect ratios; from 4:3 screens that are closer to square, to widescreen 16:9 screens and everything in between. Our scaling platform enables Windows and apps to seamlessly adapt and reflow content to of these different screens and make use of the space. You can use many of these devices in either portrait or landscape. This diversity of choice is unique to Windows. You can choose the device and the orientation that best suits your needs and usage.
The minimum resolution that Windows 8 Metro style apps can run is 1024×768. We chose this size as it is a common size designed for use on the web, and a strong majority (i.e. 98.8%) of Windows users can run at this resolution or higher (see chart below).
We think it is important to have a minimum resolution for apps, as it allows all developers to design the smallest main view of their app without fragmentation across devices. This minimum also ensures that users do not see broken app layouts due to small screen sizes.
The resolution that supports all the features of Windows 8, including multitasking with snap is 1366×768. We chose this resolution as it can fit the width of a snapped app, which is 320px (also the width designed for many phone layouts), next to a main app at 1024×768 app (a common size designed for use on the web).
These limits will be enforced at runtime. We are breaking from past practices in not providing a workaround for this, given that the main motivation is to make sure Metro style apps are designed to function fully at a specific published resolution. In the Developer Preview we did not have any useful runtime warning beyond the communication on the download site, which we will of course address for the beta. We did notice that a set of folks running on 600×800 virtual machines or 1024×600 Netbooks were inconvenienced and we’re sorry about that. It is worth noting that the runrate of 1024×600 machines is very low as screen resolutions on the low end have moved to 1280×800, which supports Metro style apps without snap. This resolution is still a distant second to fully capable resolutions and we expect to see the shift to higher resolution screens continue as new PCs are brought to market.
Optimizing landscape and portrait orientations in Windows 8 [BuildingWindows YouTube channel, Jan 25, 2012]A Windows 8 PC is really a new kind of device, one that scales from small, touch-only tablets to laptops and desktops. While reimagining Windows 8, we designed it to deliver a great experience regardless of the form factor or screen orientation. Tablet devices allow for ergonomic flexibility, allowing you to hold the device in whichever orientation is most comfortable to you and best suits your content.
David Washington, Senior Program Manager, Windows User Experience Team
Davi Washington works on how Windows 8 scales for different screens and form factors.
Reach your customers’ devices with one beautiful HTML5 user interface [Channel 9 video record, BUILD session by Markus Mielke and David Washington, Sept 14, 2011]
Reach all your customer’s devices with one beautiful XAML user interface [Channel 9 video record, BUILD session by Tim Heuer, Sept 14, 2011]
Abstract: Windows runs on a broad array of devices and form factors. Get your app on all the devices your customers use by building a great user experience that adapts to different screen sizes, aspect ratios and pixel densities using XAML. Learn how your app can take advantage of new multi-tasking views and orientations and see how easy it is to build apps that look great on different screen sizes and on high pixel density screens.
BUILD session by Tim Heuer
Metro style apps using XAML: what you need to know [Channel 9 video record, BUILD session by Joe Stegman, Sept 14, 2011]
Abstract: If you are experienced with .NET or C++ and are already familiar with XAML, come learn everything you need to know to create a Metro style app for Windows 8. This session will cover updates to familiar features including basic controls, styling, and data-binding, and explore concepts that are new for Windows 8. Discover how you can build an amazing experience that is driven by touch, uses new Windows controls, and integrates well with Windows 8. This foundational session will show you how to turn your XAML skills into money making Metro style apps.
BUILD session by Joe Stegman
Stand out with styling and animation in your XAML app [Channel 9 video record, BUILD session by John Papa, Sept 14, 2011]
Abstract: Get all of the tips and tricks you need to infuse your distinct brand into your apps, while still taking advantage of the familiarity of Windows through styling and animations. Use Visual Studio Express and the power of XAML styling and templating to customize the look and feel of your apps and to more easily style the individual XAML controls. See how fast animations in the animation library and custom XAML animations bring your app to life and engage customers.
BUILD session by John Papa
Create Metro style apps quickly with built-in controls [Channel 9 video record, BUILD session by Paul Gusmorino and Sean Hume, Sept 14, 2011]
Ezen előadás részletes kivonatát a ELEMZÉS: WinRT/Metro .NET alapon (‘Szoftver aktualitások’, 2011. szeptember 27.) című bejegyzésemben megtalálni!
Abstract: Windows 8 introduces a new and ready-to-use set of user interface controls to help create beautiful Metro style apps quickly. Learn about these powerful and highly-flexible controls and how to use them to implement the common patterns that deliver great Windows 8 Metro style apps.
Abstract: At this session, learn exciting ways to expose collections of content using the ListView control, a fast and easy way to make collections take on the Windows 8 look and feel. Come and learn about the powerful capabilities of this control and best practices to make your app shine.
BUILD session by Ryan Demopoulos
Build polished collection and list apps using XAML [Channel 9 video record, BUILD session by Hamid Mahmood, Sept 15, 2011]
Abstract: Learn exciting ways to expose collections of data using the new XAML List controls, a fast and easy way to make collections take on the Windows 8 look and feel. Come and learn about the powerful capabilities of these controls and best practices to make your app really shine.
BUILD session by Hamid Mahmood
Abstract: Designing a new Metro style app with CSS3 can be intimidating at first. With such a large blank canvas at your disposal, it can be difficult knowing where to start. Come learn how to design your Metro style apps by using HTML5 and CSS3 features like regions, grid layout, flexible box layout, multiple columns, text-wrap around images and hyphenation.
BUILD session by Christian Stockwell