WPF

世界一分かりやすいC#.NETによるWPF入門第二回(Gridコントロール)

猫画像

皆さんこんにちは。まいてぃです。

今回はWPF入門の第二回ということで、Gridコントロールを触っていきたいと思います。

コントロールというのはGUIを構成する部品のことで、

Gridコントロールは画面(ウィンドウ)を格子状に区切って整列させる部品のことです。

今回はGridコントロールでウィンドウを4つに分割し、分割したウィンドウに

ボタンやラベルなどの子コントロールを配置していきたいと思います。

Gridコントロールは親コントロールにあたります。

本当はもっと一気に紹介したいのですが、画像が増えすぎてしまうので細かく区切って説明していきたいと思います。

それでは早速まいりましょう。

Gridコントロールを作成する

プロジェクト作成

VisualStudio2017を起動し、「新規作成」→「プロジェクト」を選択します。

wpf画像

「LayOutApp」などと、適当な名前をつけて、WPFアプリのプロジェクトを作成します。

wpf画像

Dock操作

ツールボックスから、Gridを選択して、真ん中上方の画面にドラッグ&ドロップします。

wpf画像

すると、以下のようにGridコントロールが真ん中上方の画面にある「ウィンドウ」に張り付いているのが分かると思います。

wpf画像

画面右下にあるプロパティウィンドウから、WidthプロパティとHeightプロパティを選択し、Autoに設定します。

WidthプロパティとHeightプロパティは、コントロールの幅と高さを設定するプロパティです。

今回は幅/高さを自動の設定にします。

wpf画像

HorizontalAlignmentとVerticalAlignmentプロパティを「Stretch」にします。

この二つは、横と縦の「整列」を決定するプロパティです。

どうコントロールを配置するかを表します。Stretchというのは、伸ばすという意味で、

横と縦いっぱいに広げることを意味します。

しかし、これだけでは画面いっぱいにはなりません。

なぜかというと、Mergin(余白)が設定されているからですね。

wpf画像

ということで、Merginプロパティを0に設定します。

MerginプロパティはHTML/CSSなどを触っている人は頻繁に利用しているはずで、よく知っていると思います。

これを0にすることで、余白を無くし、画面いっぱいまでコントロールを広げることができます。

wpf画像

ここまでがDock(ドック)と呼ばれる操作です。

Gridコントロール以外のコントロールでも非常によく使うので、必ず手順を覚えておきましょう。

Dockをすると、各種コントロールを画面いっぱいにまで広げることができます。

ウィンドウを格子状に分割する

wpf画像

ここからは画面を4つに分割していきます。

まず、ColumnDifinitionプロパティの右側にある「…」のボタンをクリックします。

Columnというのは、「列」のことです。

Gridコントロールを4分割すると、2行×2列の表(テーブル)となります。

ここではこの「列」の定義を決定していきます。

wpf画像

「…」のボタンをクリックすると、上図のようにColumnDifinitionコレクションエディターが開きますね。

ColumnDifinitionコレクションエディターの下方にある追加をクリックしましょう。

wpf画像

[0]ColumnDifinitionというのが追加されました。同じようにもう一回追加を押します。

wpf画像

今度は[1.]ColumnDifinitionというのが追加されましたね。

wpf画像

ColumnDifinitionコレクションエディター右側のプロパティウィンドウ(右下のプロパティウィンドウとは別です)のWidthプロパティを2に設定します。

こうすると、[0]ColumnDifinitionと、[1.]ColumnDifinitionの比が1:2になります。

すなわち、1行目と2行目の比が1:2となります。

RowDifinitionプロパティについても、VisualStudio右下のプロパティウィンドウから、

ColumnDifinitionと同じ手順で設定をします。(説明はColumnDifinitionと同じなので割愛します)

ちなみにRowは「行」という意味です。

wpf画像

そうすると、以下のようにGridコントロールが2行×2行の4つに分割されました。

この1個1個に対し子コントロールを配置することができます。

wpf画像

以下はButtonコントロールとLabelコントロールを格子状に配置した例です。

Gridコントロールの便利さがよく分かりますね♪

wpf画像

まとめ

いかがでしたでしょうか。

Gridコントロールは画面を格子状に分割する非常に優秀なコントロールで、

大規模プロジェクトなどでもよく使用されているのを見かけるコントロールです。

よく覚えておき、日々の仕事で使えるようにしておきましょう。

WPFの書籍の紹介

ここではWPFの書籍を紹介していきたいと思います。

WPFの本は少ないのですが、以下はおそらく最も有名なWPFの書籍です。

WPFを勉強するならこの本が良いと思います。