CSS-like viewport relative units.

Feature Suggestions
1

What

CSS-like viewport relative units that would work side-by-side with the the current units; percentage, px, points

  • vw - relative to the viewport’s width
  • vh - relative to the viewport’s height

Why

In many cases there’s going to be the need to size something relative to the screen estate. Although the current percentages (%) does a part of this, it does not replace the functionality of viewport relative units. It also allows for the width to be the same as the height - but still responsive.

Example

Square grid cells

<Grid ColumnCount="2">
    <Rectangle Width="50vw" Height="50vw"/>    <Rectangle Width="50vw" Height="50vw"/></Grid>

Here, each cell has an height and width of 50% of the width of the screen.

2

Hi!

What does 50vw mean here? 50% of the screen/window size?

3

Yes, exactly. No matter where it’s used it’s sized relative to the screen size, not available space.

4

On a mobile platform the concept of “viewport size” is a bit tricky to define in terms useful for layout. There is sometimes a status bar at the top/bottom which consumes size, but can also be drawn behind. It may have a popup keyboard or picker at the bottom, but also consumes size, but you may not expect it to alter the size of your viewport relative controls.

There are a variety of ways to do layout in Fuse. If you could explain more fully your use-case I’m sure I can tell you how to achieve it.

Note the specific idea of maintaining an asepct, on top of other layout, is a pending feature that is part of what I’m working on now.

5

That’s a great comment, I didn’t quite think of that. What I’d most likely use this for is having equal widths and heights:

Square cells

<Grid ColumnCount="2">
  <Rectangle Width="50vw" Height="50vw"/>  <Rectangle Width="50vw" Height="50vw"/></Grid>

But I suppose this will be covered by what you’re working on now then?

6

Yes :slight_smile: You will be able to set an aspect on your elements, forcing them to be square or whatever aspect you want