technodesigner

Digital design

Olivier Dewit
Windows Store Apps : XAML and HTML controls layout

Windows Store Apps : XAML and HTML controls layout

Article written for Windows 8 Consumer Preview and Visual Studio 11 beta.

Metro includes a layout system, which defines the visual layout of controls on a page in several modes:

Used techniques vary depending on the language, but are based on similar principles. The XAML/WinRT layout API is almost identical to that of Silverlight (and partially that of WPF). The layout for HTML 5 is in turn defined using CSS.

The CSS examples use inline syntax for comparison with XAML.

Explicit positioning

In XAML/WinRT, the explicit positioning of controls in absolute coordinates is done by means of Canvas container and attached property Canvas.Top and Canvas.Left.

<Border ...>
    <Canvas Width="240" Height="240"> 
        <Button Canvas.Top="40" Canvas.Left="40" Content="40, 40"/>
        <Button Canvas.Left="60" Canvas.Top="90" Content="60, 90"/>
    </Canvas>
</Border>

XAML/WinRT Canvas

In HTML, the positioning in absolute coordinates is done by means of CSS (2.1).

<div 
    style="
        position: absolute; 
        width: 240px; 
        height: 240px;                        
        border:2px solid; 
        border-radius:25px;
        border-color: white; 
        padding: 10px;">
    <button style="position: absolute; top: 40px; left: 40px">40, 40</button>
    <button style="position: absolute; top: 90px; left: 60px">60, 90</button>
</div>

HTML/CSS explicit positioning

Stacking

Controls can be stacked under WinRT using the StackPanel container. By default, the stack is vertical. The Orientation property lets specify a horizontal stack. several StackPanel containers can be nested.

<Border ...>
    <StackPanel Width="360" Height="240">
        <StackPanel 
            Margin="10">
            <Button />
            <Button />
            <Button />
            <Button />
        </StackPanel>
        <StackPanel 
            Orientation="Horizontal"
            Margin="10">
            <Button />
            <Button />
            <Button />
            <Button />
        </StackPanel>
    </StackPanel>
</Border>

XAML/WinRT StackPanel

For HTML, controls stacking is obtained by means of the CSS3 Flexbox container (or flexible box). It is defined using the display:-ms-box attribute. By default, the stack is horizontal. The -ms-box-orient attribute lets specify a vertical stack. Several Flexbox containers can be nested. The elements of the stack can be automatically dimensioned on the space available using the -ms-box-flex attribute. For example, all elements whose value of this attribute is 1 each occupy the same part of the remaining space. An element with an attribute value of 2 will have a size twice bigger, etc.

Each browser family defines its own vendor prefix to implement the not finished CSS3 specifications or experiments : -ms-, -o-, -webkit- and -moz-.

<div 
    style=" 
        width: 480px; 
        height: 480px;
        display: -ms-box; 
        -ms-box-orient: horizontal;  
        border:2px solid; 
        border-radius:25px;
        border-color: white; 
        padding: 10px;">
    <div 
        style=" 
            display: -ms-box; 
            -ms-box-flex: 1;
            -ms-box-orient: vertical;  
            -ms-box-direction: normal; 
            margin: 5px;
            ">                    
        <button id="button1">flex 0</button>
        <button id="button2" style="-ms-box-flex: 1;">flex 1</button>
        <button id="button3" style="-ms-box-flex: 1;">flex 1</button>
        <button id="button4" style="-ms-box-flex: 2;">flex 2</button>
    </div>
    <div 
        style=" 
            display: -ms-box; 
            -ms-box-flex: 2;
            -ms-box-orient: vertical;  
            -ms-box-direction: reverse; 
            margin: 5px;
            ">                    
        <button id="button5">flex 0</button>
        <button id="button6" style="-ms-box-flex: 1;">flex 1</button>
        <button id="button7" style="-ms-box-flex: 1;">flex 1</button>
        <button id="button8" style="-ms-box-flex: 2;">flex 2</button>
    </div>
</div>

HTML5/CSS3 Flexbox

Tabular positioning

The tabular positioning is obtained by means of a dummy grid dividing in columns and rows the surface of the container.

In XAML/WinRT, the container is a Grid, and the cells are defined by ColumnDefinition and RowDefinition objects respectively defined by the ColumnDefinitions and RowDefinitions properties. The cell size can be set using ColumnDefinition.Width and RowDefinition.Height properties. Star value specifies an automatic distribution of sizes depending on the available space.

An element indicates the cell it occupies through the Grid.Column and Grid.Row attached properties (indices are zero-based). Attached properties Grid.ColumnSpan and Grid.RowSpan let specify a range of multiple cells.

<Border ...>
    <Grid Width="480" Height="240">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Name="button1" Grid.Column="0" Grid.Row="0">0, 0</Button>
        <Button Name="button2" Grid.Column="1" Grid.Row="1">1, 1</Button>
        <Button Name="button3" Grid.Column="2" Grid.Row="2" Grid.ColumnSpan="2">2, 2, ColumnSpan 2</Button>
    </Grid>
</Border>

XAML/WinRT Grid

The principle is similar for HTML. The CSS3 Grid container is defined using the display:-ms-grid attribute, and cells are defined using -ms-grid-columns and -ms-grid-rows attributes. The fr suffixed values ??let specify an automatic distribution of sizes depending on the available space.

An element indicates the cell it occupies through the -ms-grid-column and -ms-grid-row attributes (indices start at offset 1). The -ms-grid-column-span and -ms-grid-row-span attributes let specify a range of multiple cells.

<div 
    style="display: -ms-grid; 
        -ms-grid-columns: 1fr 2fr 1fr 1fr; 
        -ms-grid-rows: 1fr 1fr 1fr; 
        width: 480px; 
        height: 240px;
        border:2px solid; 
        border-radius:25px;
        border-color: white; 
        padding: 10px;">
    <button id="button1" style="-ms-grid-column: 1; -ms-grid-row: 1;">1, 1</button>
    <button id="button2" style="-ms-grid-column: 2; -ms-grid-row: 2;">2, 2</button>
    <button id="button3" style="-ms-grid-column: 3; -ms-grid-row: 3; -ms-grid-column-span: 2;">3, 3, column-span 2</button>
</div>

HTML5/CSS3 grid



Powered by the Perspective WebApp - © Olivier Dewit - Lyon, Paris, France - Legal informations