This is an excerpt from an internal email at CODE (June 2012):

Metro-Style Control Margins and Layout

We have made a minor but important change in how views are positioned in Metro. Consider the following screen shot:

clip_image001

Note that there is quite a bit of spacing to the left of the blue area (116 pixels to be exact, which is Metro standard).

In the past, this was achieved by setting the margin on the view’s style. Now, the margin on the view itself should not be set anymore. Instead, the Shell (main window) positions loaded views using that margin. So do not set that margin in custom view styles, otherwise you will end up with a double margin.

Note that the new approach is also a bit smarter about how it applies the margin. In Windows 8, Metro apps are always at least 1024 pixels wide. Metro style WPF apps can be made smaller. When they are smaller, the “waste” of those 116 pixels starts to hurt. Our style is thus smart and starts to reduce that margin when the window is realized smaller. So this is kind of another type of “elasticity”. Here’s what the same screen looks like when the window is smaller.

clip_image002

Note that the margin on the left has now disappeared.

On another, related change, I have now changed the way tiles scroll horizontally. In the past, there was always a left margin even when scrolling like this:

clip_image003

Note how the scrollbar at the bottom has a left margin and tiles will never scroll over all the way to the left edge. This has now been changed. While tiles should start out with a left margin of 116 pixels in Metro start screens, they are supposed to scroll all the way over once the user scrolls manually. This is now implemented correctly:

clip_image004

Last edited Jun 28, 2012 at 8:20 PM by meggereps, version 2

Comments

No comments yet.