Gridにコントロールを配置する

新規に作成したウィンドウのxamlを見るとGridというタグがある。

<Window x:Class="AddressBook.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        ~略~
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

デザイナーでウィンドウにコントロールを配置すると自由にコントロールを配置できるのでWPF始めた直後はこういうものか~としか思わなかったが、実はGridは自由にコントロールを配置するだけのコンテナーではない。

フォームアプリのTableLayoutPanelのようにコントロールを配置できるのだ。

Gridにコントロールを配置したところ

ColmunとRowの幅や高さの自由度も高いし当然入れ子にもできるのでレイアウトの自由度はかなり高い。

比で作成しておけばウインドウサイズや解像度の変化にも対応しやすい。ウインドウサイズ可変で同様のことをフォームアプリでやろうとするとAnchorやTableLayoutPanelを駆使してかなり面倒くさいことをしないといけないことを考えると素晴らしい。

GridのColmunとRowの設定

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="2*"/>
    </Grid.RowDefinitions>
</Grid>

上記のコードでは3列2行のGridになる。幅と高さは数値と*(アスタリスク)で指定する。数値を指定するとピクセル数となり、数値の後に*を指定すると比の指定となる。比は小数点も使用できるので微調整がラクチン。また、*のみ指定するとコンテナサイズの残り全てが割り当てられる。帳票の最終列以外を固定して最終列を可変の備考にするなどの使い方ができる。

Gridにコントロールを配置する

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="2*"/>
    </Grid.RowDefinitions>
</Grid>

Gridへの配置はGrid.ColumnとGrid.Rowを使用する。複数の列に配置するときはGrid.ColumnSpan、行はGrid.RowSpanを指定する。

Marginを指定するとコンテナの内側にマージンが設けられるのでコントロールのサイズは実質マージンで指定する。

トップページ

コメント

タイトルとURLをコピーしました