皆さんこんにちは。まいてぃです。
今回はWPF入門の第二回ということで、Gridコントロールを触っていきたいと思います。
コントロールというのはGUIを構成する部品のことで、
Gridコントロールは画面(ウィンドウ)を格子状に区切って整列させる部品のことです。
今回はGridコントロールでウィンドウを４つに分割し、分割したウィンドウに
ボタンやラベルなどの子コントロールを配置していきたいと思います。
Gridコントロールは親コントロールにあたります。
本当はもっと一気に紹介したいのですが、画像が増えすぎてしまうので細かく区切って説明していきたいと思います。
それでは早速まいりましょう。
Gridコントロールを作成する
プロジェクト作成
VisualStudio2017を起動し、「新規作成」→「プロジェクト」を選択します。
「LayOutApp」などと、適当な名前をつけて、WPFアプリのプロジェクトを作成します。
Dock操作
ツールボックスから、Gridを選択して、真ん中上方の画面にドラッグ＆ドロップします。
すると、以下のようにGridコントロールが真ん中上方の画面にある「ウィンドウ」に張り付いているのが分かると思います。
画面右下にあるプロパティウィンドウから、WidthプロパティとHeightプロパティを選択し、Autoに設定します。
WidthプロパティとHeightプロパティは、コントロールの幅と高さを設定するプロパティです。
今回は幅/高さを自動の設定にします。
HorizontalAlignmentとVerticalAlignmentプロパティを「Stretch」にします。
この二つは、横と縦の「整列」を決定するプロパティです。
どうコントロールを配置するかを表します。Stretchというのは、伸ばすという意味で、
横と縦いっぱいに広げることを意味します。
しかし、これだけでは画面いっぱいにはなりません。
なぜかというと、Mergin(余白)が設定されているからですね。
ということで、Merginプロパティを０に設定します。
MerginプロパティはHTML/CSSなどを触っている人は頻繁に利用しているはずで、よく知っていると思います。
これを０にすることで、余白を無くし、画面いっぱいまでコントロールを広げることができます。
ここまでがDock(ドック)と呼ばれる操作です。
Gridコントロール以外のコントロールでも非常によく使うので、必ず手順を覚えておきましょう。
Dockをすると、各種コントロールを画面いっぱいにまで広げることができます。
ウィンドウを格子状に分割する
ここからは画面を４つに分割していきます。
まず、ColumnDifinitionプロパティの右側にある「…」のボタンをクリックします。
Columnというのは、「列」のことです。
Gridコントロールを４分割すると、２行×２列の表(テーブル)となります。
ここではこの「列」の定義を決定していきます。
「…」のボタンをクリックすると、上図のようにColumnDifinitionコレクションエディターが開きますね。
ColumnDifinitionコレクションエディターの下方にある追加をクリックしましょう。
[0]ColumnDifinitionというのが追加されました。同じようにもう一回追加を押します。
今度は[1.]ColumnDifinitionというのが追加されましたね。
ColumnDifinitionコレクションエディター右側のプロパティウィンドウ(右下のプロパティウィンドウとは別です)のWidthプロパティを2に設定します。
こうすると、[0]ColumnDifinitionと、[1.]ColumnDifinitionの比が１：２になります。
すなわち、１行目と２行目の比が１：２となります。
RowDifinitionプロパティについても、VisualStudio右下のプロパティウィンドウから、
ColumnDifinitionと同じ手順で設定をします。(説明はColumnDifinitionと同じなので割愛します)
ちなみにRowは「行」という意味です。
そうすると、以下のようにGridコントロールが２行×２行の４つに分割されました。
この１個１個に対し子コントロールを配置することができます。
以下はButtonコントロールとLabelコントロールを格子状に配置した例です。
Gridコントロールの便利さがよく分かりますね♪
まとめ
いかがでしたでしょうか。
Gridコントロールは画面を格子状に分割する非常に優秀なコントロールで、
大規模プロジェクトなどでもよく使用されているのを見かけるコントロールです。
よく覚えておき、日々の仕事で使えるようにしておきましょう。
ここではWPFの書籍を紹介していきたいと思います。
WPFの本は少ないのですが、以下はおそらく最も有名なWPFの書籍です。
WPFを勉強するならこの本が良いと思います。
