パネルの基本、Grid編１

前回はパネルの一覧を挙げましたが、今回はその中でも結構自由がきくイケてるやつであるGridにて紹介と簡単な使い方を説明したいと思います。


Gridとは・・・イメージで描くと

です。

□のマス1つ1つが領域になっています。

つまり、１つの領域を好きな形で分割してそこにコントロールを配置できる感じです。

また、絵に描いた通り、隣同士で結合できますし、縦にも結合できます。

イメージとしてはExcelのセルのような感じですね。

まぁ文字で説明するより、実際やってみた方が分かりやすいですね。

では、さっそくWPFアプリケーションを作成してみましょう。

当分はC#のコードはいじらず、MainWindowのXAMLのみいじっていきます。

新しいプロジェクトを作成すると、空のMainWindowが開きます。

XAMLは以下のような感じですね。
（WpfApplication1の部分はプロジェクト名になります）

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
 
    </Grid>
</Window>

見て頂くとわかりますが、最初からWindow要素内にGridが配置されています。

ではここに以下のようにボタンを置いてみましょう。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Button"/> 
    </Grid>
</Window>

普通にボタンをドラッグして配置すると、Marginとかいろんなプロパティが設定されてしまいますが、上記のようにContentのみ指定した状態にします。


そしてビルドして実行すると・・・

なんと！ウィンドウ全部が1個のボタンに！？

何でこんな事になるのかと言うと。。。

Gridは何も指定しないと、分割を行いません。

つまり、今回の例だと、ウィンドウ内全体が1つのマスになっている感じです。

そして、Grid内に配置した直下の物は領域いっぱいに自動で伸縮されるという仕組みになっています。

なるほど、そういう事か！

だから領域（ウィンドウ全体）に引き伸ばされてるんだね！


・・・あれ？でもボタンを普通にドラッグして配置した時って普通のサイズなような…


実は、そうなんです。

普通に画面にドラッグした場合は以下のようになります。

この時のコードですが、前の記事でも書きましたが

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Button"
                Margin="213,145,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Width="75" />
    </Grid>
</Window>

みたいになっています。

違う点として、ボタンに色んなプロパティが設定されています。

一つずつ説明していきましょう。

Margin…領域の境界からの余白です。左,上,右,下と時計回りに余白を設定します。

HorizontalAlignment…水平方向の位置です。例では左寄せされてます。

VerticalAlignment…垂直方向の位置です。例では上寄せされています。

Width…コントロールの横幅です。

つまり、領域の境界、今回の例ではウィンドウの領域から、左に213、上に145の余白を取った状態で、左寄せし、上寄せしています。

Grid内では伸縮されると書きましたが、HorizontalAlignmentやVerticalAlignmentを設定すると、その設定どおり寄せるため、伸縮されません。

むしろ、そのコントロールが寄せる方向に対して縮められるまで縮められます。

今回の場合、Contentに”Button”という文字列を指定している＆Widthを75と指定しているので横幅は75、高さはButtonという文字が表示される最小限のサイズで表示されていますが、もしContentやWidthが設定されていない場合、ボタンが、下の画像のように点みたいなものになります…

まぁこういう理由があって、ドラッグしたときは良い感じにプロパティが設定されてピッタリな感じで見えます。

うーん、長くなってしまった。。。

今回はここまでにして、次の記事で実際に領域を自由に区切ってみましょう！