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

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

【C# GUI】UI作成 part4-6【WPF XAML】

calendar

reload

【C# GUI】UI作成 part4-6【WPF XAML】

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

今回は前回紹介した内容を元に,UIを作成していきます.

UI作成

準備

前回中断した,WPF_RandomNumberプロジェクトを開きます.

一旦,Grid内の要素を全て削除します.

 

Gridを設定する

2行3列のGridを設定します.

Gridの1行目と2行目に「auto」を,

1列目に「auto」,2列目と3列目の比率を2:5に設定します.

潰れている部分がありますが,UI要素を配置する時に自動的に調整されます.

 

UI要素の追加

最初に,TextBlockとTextBoxを追加します.

TextBlockは1行1列目に,

TextBoxは1行2列目に追加します.

TextBlockにはTextプロパティを使って「文字数」と表示します.Contentプロパティではないので注意.

次に,1行3列目にボタンを追加します.

名前はContentプロパティを使って「数字列生成」と表示します.

次に,TextBoxを2行1列目に追加します.

追加するTextBoxは1列目~3列目の範囲に配置します.

範囲を指定するにはColumnSpanプロパティを使います.(行の場合は,RowSpanプロパティを使います.)

Contentプロパティの値は長さです.今回は1列目~3列目なので3を設定します.

Gridのautoに設定している行と列は,UI要素に応じて自動的に大きさが決まりますが,UI要素が小さすぎる為,下部分が大きく空いてしまいました.

ウィンドウの設定をして整えましょう.

 

ウィンドウの設定

ウィンドウのサイズ

ウィンドウの初期サイズはWindow要素のHeightプロパティとWidthプロパティで設定します.

Heightを100,Widthを400に設定します.

 

ウィンドウの名前

ウィンドウの名前を変更します.

Window要素のTitleプロパティの値を「数字列作成」に変更します.

 

その他装飾

余白を設定

ボタンの左側の余白を設定します.

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

次に,2行目のテキストボックスの上側の余白を設定します.

 

ウィンドウのサイズ変更の制限

ウィンドウのサイズ変更の制限には,MaxHeight,MaxWidth,MinHeight,MinWidthプロパティで最大,最小の高さと幅を設定します.

実行してみると,制限されている事が確認できます.

ちなみに,サイズ変更を無効にするには,ResizeModeプロパティを使って,値を「NoResize」に設定します.

 

テキストを右揃えにする

1行目のテキストボックスの入力値のテキストを右揃えにします.

文字の配置はTextAlignmentプロパティを使います.

実行して,入力した値が右揃えになっているかどうか確認します.

 

色を変更する

最初にテキストブロックの文字の色を変更します.

文字の色の変更には,Foregroundプロパティを使います.

次に,ボタンの文字の色と背景色を変更します.

背景色の変更には,Backgroundプロパティを使います.

 

最後に実行して確認してみましょう.

処理を書いていないので,ボタンを押してもまだなにも反応しません.

次回は,今回作ったUIにMVVMで機能を追加していきます!

 

今回記述したコードを貼っておきます.