WPF 超入門　〜レイアウト編その参「グリッド〜その弐」

まえがき

今回もグリッドについて学びます。前回は行列の設定のみ行いましたが、今回はコントロールを配置しながらグリッドの使い方についてより詳しく学びたいと思います。

前回「 WindowsForms の TableLayoutPanel コントロールに近い」と書きましたが、使ってみるとかなり趣が違うのが判ります。この辺も合わせ、より実践的に学習してみましょう。

ログインダイアログ

今回はログインダイアログを作ります。いままで使ってきた「Layout」ソリューションにプロジェクトを追加しましょう。名前は「Layout03」プロジェクトにします。プロジェクトを追加したら、スタートアッププロジェクトに設定してください。

次に Window を設定します。以下の表のとおりに設定してください。

プロパティ	設定する値
Title	ログイン
Height	170
Width	300
WindowStartupLocation	CenterScreen

グリッドの設定

お次は、グリッドの行と列の設定です。まず列から設定しましょう。Grid を選択し、プロパティウィンドウの「ColumnDefinitions」を選択、右側のボタンをクリックし、「コレクションエディター」を表示します。

「追加」ボタンを7回クリックし、列を7個作成します。上の列から Width プロパティを以下のとおり設定してください。え？XAML で設定した方が早い？そりゃもちろんでんがな！ただしこれは「超入門」ですので、VB ユーザーに易しい仕様を心がけております。とうぶん XAML の話は置いときますのであしからず。(=ω=)
#もっとも説明できるレベルに到達してないという話もありますが・・・

1列目	12
2列目	60*
3列目	8
4列目	120*
5列目	8
6列目	75
7列目	12

ここで気になる「*」なんですが、読み方は Star だそうで、 MSDN の解説によると「加重比率」なるものを設定するんだそうです。・・・なんか訳語がしっくり来ない気がするのは私だけでしょうか？それはともかく * の前に設定した数値の比率を維持したまま動作します。完成後に動かしてみると、どういうことかよく判ると思います。

行の高さも同じように設定します。コレクションエディターを使い、上の行から以下のように設定してください。

1行目	30
2行目	20
3行目	8
4行目	20
5行目	*
6行目	23
7行目	12

たまには XAML も覗いてみましょうか。ここまで設定すると、以下のように XAML が生成されてます。

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ログイン" mc:Ignorable="d" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        Height="170" Width="300" WindowStartupLocation="CenterScreen" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="19" />
            <RowDefinition Height="8" />
            <RowDefinition Height="19" />
            <RowDefinition Height="*"/>
            <RowDefinition Height="23" />
            <RowDefinition Height="12" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="12" />
            <ColumnDefinition Width="60*" />
            <ColumnDefinition Width="8" />
            <ColumnDefinition Width="120*" />
            <ColumnDefinition Width="8" />
            <ColumnDefinition Width="75" />
            <ColumnDefinition Width="12" />
        </Grid.ColumnDefinitions>
    </Grid>
</Window>

コントロールの配置と設定

次はコントロールを配置しましょう。まずは TextBlock の配置です。ツールボックスから TextBlock を Grid に二つ配置し、それぞれ以下のように設定してください。

TextBlock1

プロパティ	設定する値
Grid.Column	1
Grid.Row	1
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Center
Text	ログインID
TextAlignment	Right

TextBlock2

プロパティ	設定する値
Grid.Column	1
Grid.Row	3
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Center
Text	パスワード
TextAlignment	Right

上の表をよく見ると判ると思うのですが、Grid.Column プロパティと Grid.Row プロパティで配置するセルを設定します。またセル内で横一杯に表示するには HorizontalAlignment プロパティに Stretch を設定するのが味噌ですね。

XAML を見てみましょう、先ほど設定した Grid.ColumnDefinitions の後に、以下のように XAML が生成されてます。

<TextBlock Grid.Column="1" Grid.Row="1" Height="Auto" 
           HorizontalAlignment="Stretch" Name="TextBlock1" 
           Text="ログインID" VerticalAlignment="Center" TextAlignment="Right" />
<TextBlock Grid.Column="1" Grid.Row="3" Height="Auto" 
           HorizontalAlignment="Stretch" Name="TextBlock2" 
           Text="パスワード" VerticalAlignment="Center" TextAlignment="Right" />

次は TextBox を配置します。TextBox をツールボックスから Grid に配置して、表のとおり設定してください。

TextBox1

プロパティ	設定する値
Grid.Column	3
Grid.Row	1
Grid.ColumnSpan	3
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Center

次は PasswordBox を Grid に配置します。WindowsFroms の TextBox なら PasswordChar プロパティを使ってパスワード用の入力ボックスを設定するわけですが、WPF の場合、コントロールが完全に独立してるのですね。驚きました。

PasswordBox1

プロパティ	設定する値
Grid.Column	3
Grid.Row	3
Grid.ColumnSpan	3
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Center

TextBox と PasswordBox にそれぞれ Grid.ColumnSpan = 3 と設定しました。これはコントロールが 3 行にまたがって表示されるようにした設定です。

最後は Button コントロールを配置します。ツールボックスから Button を Grid に二つ配置し、以下のように設定してください。なお Button には名前を付けています。以下の図を参考に名前を変更して下さい。

btnLogin

プロパティ	設定する値
Content	ログイン
Grid.Column	3
Grid.Row	5
Height	23
Width	75
HorizontalAlignment	Right
VerticalAlignment	Bottom

btnCancel

プロパティ	設定する値
Content	キャンセル
Grid.Column	5
Grid.Row	5
Height	23
Width	75
HorizontalAlignment	Right
VerticalAlignment	Bottom

以下の図のように配置できたでしょうか？

実行してみる

全て設定が完了すると XAML は以下のようになると思います。(見やすいように適当に改行を加えてます)

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ログイン" mc:Ignorable="d" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        Height="170" Width="300" WindowStartupLocation="CenterScreen" >
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="19" />
            <RowDefinition Height="8" />
            <RowDefinition Height="19" />
            <RowDefinition Height="*"/>
            <RowDefinition Height="23" />
            <RowDefinition Height="12" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="12" />
            <ColumnDefinition Width="60*" />
            <ColumnDefinition Width="8" />
            <ColumnDefinition Width="120*" />
            <ColumnDefinition Width="8" />
            <ColumnDefinition Width="75" />
            <ColumnDefinition Width="12" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="1" Grid.Row="1" Height="Auto" 
                   HorizontalAlignment="Stretch" Name="TextBlock1" 
                   Text="ログインID" VerticalAlignment="Center" TextAlignment="Right" />
        <TextBlock Grid.Column="1" Grid.Row="3" Height="Auto" 
                   HorizontalAlignment="Stretch" Name="TextBlock2" 
                   Text="パスワード" VerticalAlignment="Center" TextAlignment="Right" />
        <TextBox Grid.Column="3" Grid.Row="1" Grid.ColumnSpan="3"
                 Height="Auto" HorizontalAlignment="Stretch" 
                 Name="TextBox1" VerticalAlignment="Center" />
        <PasswordBox Grid.Column="3" Grid.Row="3" Grid.ColumnSpan="3" 
                 Height="Auto" HorizontalAlignment="Stretch" 
                 Name="PasswordBox1" VerticalAlignment="Center" />
        <Button Content="ログイン" Grid.Column="3" Grid.Row="5" 
                Height="23" Width="75" HorizontalAlignment="Right" Name="btnLogin" 
                VerticalAlignment="Bottom"/>
        <Button Content="キャンセル" Grid.Column="5" Grid.Row="5" 
                Height="23" Width="75" HorizontalAlignment="Right" Name="btnCancel" 
                VerticalAlignment="Bottom"/>
    </Grid>
</Window>

ついでですが「ドキュメントアウトライン」を表示してみます。メニューから「表示」→「その他のウィンドウ」→「ドキュメントアウトライン」をクリックしてください。XAML の構造通りにアウトラインが表示されます。アイテムを選択すると、プレビューが表示されると同時に、XAML とプロパティウィンドウの編集対象が変わるのがわかると思います。ドキュメントアウトラインも、使い方を覚えると後々大変便利そうですね。

では「F5」キーを押して実行してみましょう。以下のように表示されたら完成です。

マウスで画面のサイズを色々変えてみましょう。TextBlock と TextBox が、列に設定した加重比率どおりに伸縮するのがわかると思います。また固定サイズに設定した行と列はサイズ変更されないのが確認できるでしょう。Button は固定サイズですので伸縮しませんが、HorizontalAlignment = Right・VerticalAlignment = Bottom で設定したとおりに、セルの右下の位置に固定されます。