Grid Line

TextBox-1-1 TextBox-2-1 TextBox-3-1
TextBox-1-2 TextBox-2-2 TextBox-3-2
Grid Line を設定して TextBox を整然と並べて表示します。

前田稔の超初心者のプログラム入門

プログラムの説明

  1. Metro Stile では、多くのタイル(アイコンやツール)を格子状に並べることが良くあります。
    Grid を設定すると、これらを規則正しく整然とならべることが簡単に出来ます。
    ここでは Grid Line を設定して TextBox を整然と並べて表示する方法を説明します。
  2. Visual Studio for Windows 8 を起動して Blank App(XAML) を App1 の名前で構築します。
    AppN(N=1,2,...) は、プロジェクトを構築したときの規定値です。
    MainPage.xaml をダブルクリックしてレイアウトウインドウを表示します。
    ウインドウの左縦枠をポイントすると黄色の Grid Line が表れます。
    1本目は、上部の余白です。
    1本目と2本目の間が1行目です。
    2本目と3本目の間が2行目です。
  3. 同様にウインドウの上横枠をポイントすると縦の Grid Line が表れます。
    格子状に2行3列の枠を設定して下さい。
    Grid Line は後から幾らでも調整することが出来るので、適当でかまいません。
  4. 2行3列の枠の中に TextBox を配置します。
    Grid Line に沿って、左上の位置をぴったり合わせて下さい。
    TextBox のサイズを大きくします。
    サイズは後から調整するので、適当でかまいません。
  5. TextBox を選択して、プロパティから [Arrange by:Category][Text] を設定します。
    別に何でも構わないのですが、TextBox-1-1 ~ TextBox-3-2 とタイプしてみました。
    TextBox-1-1 TextBox-2-1 TextBox-3-1
    TextBox-1-2 TextBox-2-2 TextBox-3-2
  6. MainPage.xaml を直接編集して Grid と TextBox を整えます。
    <Page
        x:Class="App1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20*"/>
                <ColumnDefinition Width="200*"/>
                <ColumnDefinition Width="200*"/>
                <ColumnDefinition Width="200*"/>
                <ColumnDefinition Width="800*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="20*"/>
                <RowDefinition Height="60*"/>
                <RowDefinition Height="60*"/>
                <RowDefinition Height="400*"/>
            </Grid.RowDefinitions>
            <TextBox Grid.Column="1" HorizontalAlignment="Left" Grid.Row="1" TextWrapping="Wrap" 
                Text="TextBox-1-1" VerticalAlignment="Top" RenderTransformOrigin="0.653,0.751" Height="60" Width="200"/>
            <TextBox Grid.Column="2" HorizontalAlignment="Left" Grid.Row="1" TextWrapping="Wrap" 
                Text="TextBox-2-1" VerticalAlignment="Top" Height="60" Width="200"/>
            <TextBox Grid.Column="3" HorizontalAlignment="Left" Grid.Row="1" TextWrapping="Wrap" 
                Text="TextBox-3-1" VerticalAlignment="Top" Height="60" Width="200"/>
            <TextBox Grid.Column="1" HorizontalAlignment="Left" Grid.Row="2" TextWrapping="Wrap" 
                Text="TextBox-1-2" VerticalAlignment="Top" Height="60" Width="200"/>
            <TextBox Grid.Column="2" HorizontalAlignment="Left" Grid.Row="2" TextWrapping="Wrap" 
                Text="TextBox-2-2" VerticalAlignment="Top" Height="60" Width="200"/>
            <TextBox Grid.Column="3" HorizontalAlignment="Left" Grid.Row="2" TextWrapping="Wrap" 
                Text="TextBox-3-2" VerticalAlignment="Top" Height="60" Width="200"/>
    
        </Grid>
    </Page>
    
  7. 右三角アイコンでコンパイル&実行します。
    TextBox が整然と並んで表示されます。
    Windows8 Sample Program では、良く Grid が使われています。
    必ずしも使う必要は無いのですが、ページの体裁を整えるときは便利な機能です。
    Width, Height に設定される "200*" は、幅や高さに対する Column(Row) ごとの比率のようです。

超初心者のプログラム入門(C# Frame Work)