XAMLとHTMLのMetroスタイルアプリで同じことをやってみる -Grid編-

Metro style apps 

<UserControl x:Class="XAMLGridLayout.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="768" d:DesignWidth="1366"

    FontSize="64" FontFamily="Meiryo">
    <Grid x:Name="LayoutRoot" Background="#FF0C0C0C" ShowGridLines="True">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition/>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="100"/>

            <RowDefinition Height="1*"/>

            <RowDefinition Height="2*"/>

        </Grid.RowDefinitions>
        <TextBlock Grid.ColumnSpan="2" Margin="10"

                 VerticalAlignment="Center" HorizontalAlignment="Center"

                 Text="高さ固定（100ピクセル）"/>

        <TextBlock Grid.Row="1" Grid.RowSpan="2" VerticalAlignment="Center"

                 Text="幅が自動" Margin="10" FontSize="64"/>

        <Border Grid.Row="1" Grid.Column="2"

                 Margin="10" BorderThickness="10" BorderBrush="White">

            <TextBlock Text="高さ1の比率" TextAlignment="Center"/>

        </Border>

        <Border Grid.Row="2" Grid.Column="2"

                 Margin="10" BorderThickness="10" BorderBrush="White">

            <TextBlock Text="高さ2の比率" TextAlignment="Center"/>

        </Border>

    </Grid>
</UserControl>





　XAMLでレイアウトの基本となっているGridを使ったレイアウトは、HTML版のMetroスタイルアプリケーションではCSSのCSS Grid Layout Module Level 1を使ってほぼ同じように再現することができます。なお、現在Grid LayoutはIE10でしか実装されていないということもあり、ベンダープリフィックス「-ms」を付ける必要があります。


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta charset="utf-8" />

    <title>WinJsGridLayout</title>

    <!-- WinJS references -->

    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />

    <script src="/winjs/js/base.js"></script>

    <script src="/winjs/js/wwaapp.js"></script>

    <!-- WinJsGridLayout references -->

    <link rel="stylesheet" href="/css/default.css" />

    <script src="/js/default.js"></script>

	<style type="text/css">

		#ms-grid {

			display: -ms-grid;

			width: 100%;

			height: 100%;

			-ms-grid-rows: 100px 1fr 2fr;

			-ms-grid-columns: auto 1fr;

		}

	</style>

</head>

<body>

	<div id="ms-grid">

		<div style="-ms-grid-column-span: 2; -ms-grid-column-align: center; white-space: nowrap;">高さ固定（100ピクセル）</div>

		<div style="-ms-grid-row: 2; -ms-grid-row-span: 2; -ms-grid-row-align: center;">幅が自動</div>

		<div style="-ms-grid-column: 2; -ms-grid-row: 2; -ms-grid-column-align: stretch; -ms-grid-row-align: stretch; border: 10px solid white; margin: 10px; text-align: center;">高さ1の比率</div>

		<div style="-ms-grid-column: 2; -ms-grid-row: 3; -ms-grid-column-align: stretch; -ms-grid-row-align: stretch; border: 10px solid white; margin: 10px; text-align: center;">高さ2の比率</div></div>

</body>

</html>