半人前プログラマーの技術談議

開発した物と,C#を入門者向けに解説した記事を書いています!

【C# GUI】Grid part4-5【WPF XAML】

calendar

reload

【C# GUI】Grid part4-5【WPF XAML】

こんにちは!シロウです!

今回もWPFを紹介していきます!

ウィンドウ

ウィンドウの背景色

ウィンドウの背景色を変更します.

背景色の変更には,Backgroundプロパティを使います.ボタンと同じですね.

Windowタグの最後の行に追加しましょう.

 

ウィンドウの余白

ボタンがウィンドウの枠にくっついているので,ウィンドウの余白を設定します.

余白の設定には,Marginプロパティを使用します.

MarginプロパティはGridタグ内に追加します.

今回は10ptの余白を設定します.

今設定した余白は,外側の余白です.

Grid要素の外側の余白なので,Window要素とGrid要素の間に10ptの余白ができます.

今回は使いませんが,内側の余白の設定にはPaddingプロパティを使います.

また,MarginプロパティとPaddingプロパティの値の設定にはいくつかパターンがあります.

 

テキストボックスの追加

TextBoxをGrid要素内に追加します.

このままだと,ボタンにテキストボックスが重なってしまうので,サイズを調整します.

 

実行して,ウィンドウのサイズを変えてみると,ボタンにテキストボックスが重なってしまいます.

これは,テキストボックスの位置はGridに対して相対的に決まるからです.

この問題を解消する為に,Gridについて取り上げていきます.

 

Grid

Gridの行と列

そもそもGridはレイアウト用のUI要素です.

Gridは,任意の行数と列数を設定して使用します.

練習用のWPFプロジェクトを新規作成します.

最初にGridの行数を設定します.

行数の設定には,RowDefinitionsプロパティを使用します.

RowDefinitionsプロパティに設定できる値はRowDefinitionです.

今回は4つ設定します.

次にGridの列数を設定します.

列数の設定には,ColumnDefinitionsプロパティを使います.

ColumnDefinitionsプロパティに設定できる値はColumnDefinitionです.

今回は4つ設定します.

上部のデザインエリアで,4行4列のGridになっていることが確認できればOKです.

 

Gridにボタンを配置する

先ほど設定したGridのセルにUI要素を配置します.

最初に,Gridタグ内にボタンを追加します.

デフォルトの状態だと,左上のセルに配置されます.

位置の設定にはGrid要素のRowプロパティとColumnプロパティを使います.

2番目の行,4番目の列にボタンを配置します.

 

TextBlockを追加する

TextBlockは,Windowsフォームアプリケーションのラベルと同じ役割を持つUI要素です.

WPFにもLabelというUI要素がありますが,通常はTextBlockを使います.

Textプロパティを使って,「Hello, World!!」と表示させてみます.

 

Grid要素の行の高さを設定

Gridの行の高さは,デフォルトでは均等になっています.

行の高さを指定したい時はRowDefinition要素のHeightプロパティを使います.

これがWPFのメリットで,ウィンドウのサイズの変更に対して動的に対応できます.Heightプロパティの値にautoを設定します.

Heightプロパティにautoを設定すると,その行に配置されているUI要素の高さに合わせて自動的に高さが設定されます.

続いて,2行目もautoに設定します.

 

ボタンが小さくなったのは,この高さが本来のボタンの高さだからです.

ボタンの高さをHeightプロパティで50に設定します.

次に3行目と4行目を例に,比率によって高さを設定してみます.

比率の設定には「*」を使います.

今回は1:3に設定します.

上部のデザインエリアでも,1*と3*になっていることが確認できます.

ちなみに,Heightプロパティを設定しない場合は「Height=”1*”」を指定した事になります.

この状態で,4行3列目にボタンを追加してみます.名前は「Button2」にします.

先に追加したボタンの名前を「Button1」に変更しましょう.

Heightプロパティを設定していないので,行の高さがボタンの高さになります.

 

Grid要素の列の幅を設定

Gridの列の幅も,行の高さと同様にデフォルトでは均等になっています.

列の幅の設定にはColumnDefinition要素のWidthプロパティを使います.Z

設定方法は行の高さの設定と同じです.

1列目の幅をauto,

2列目の幅を「1*」,

3列目の幅を「2*」,

4列目の幅を「3*」を設定します.

この状態で,4行4列目にボタンを追加します.

名前は「Button3」,高さは50設定します.

Heightプロパティを設定した場合,Gridの行の高さの影響を受けません.その場合はセルの中央に表示されます.(Widthと列でも同様です.)

セル内で表示位置を設定する場合は,前回紹介した,HorizontalAlignmentプロパティとVerticalAlignmentプロパティを使います.

今回はセル内の上端にボタンを配置します.

最後に今回作ったUIを確認してみます.

実行してウィンドウのサイズを変更してみましょう.

比率を設定した箇所は,サイズを変更しても比率が保たれている事がわかります.

 

まとめ

今回はGridに関して紹介しました.

ウィンドウのサイズの変更に対して動的に対応できるのがWPFのメリットの1つです.

次回は今回紹介した内容を元に,アプリケーションのUIを作成していきます.