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