XAMLを編集！　プログラムで電卓を”描いて”みよう — 本当にガチの初めて(ド素人)でも理解できる超簡単wpf入門２

第一回→プロジェクト作成と実行
第二回→これ

---

---

---

---

---

第二回のポイント

1. 　「Label」は文字を表示する！
　　 「TextBox」は文字の記入欄（テキスト入力エリア）を作る！

２． 「Grid」を編集して格子をつくってきれいに整列しよう！

---

---

---

---

---

どうも！
WPF超初心者講座　第二回となります！

まずは今から作るアプリケーションの画像を見てください。

そう、電卓です！
今回は電卓のようなUIデザインを編集して作ります。
(計算機としての中身は次回に回すので、ボタン押しても動かないただのはりぼてです・・・笑)

XAMLってなんぞやって方は前回の記事を見返してください！
簡単に言うとＵＩの見た目、デザインの部分をいじるファイルです。HTMLとかＸＭＬとか知っている人は、そのイメージです。

今回の記事はこのサイトを参考にしました。（ぶっちゃけ向こうのサイトすごく分かりやすいし見やすいのでそっち見たほうがいいかもです　笑）

---

１．XAMLを開く
前回の記事でプロジェクトを作ってもらったと思います。その中に、”○○.xaml”　というファイルができたと思います。今回いじるのはこれです！開いて中を見てみてください。

多分VisualStudioで作ったデフォルトのXamlファイルは

‹Window　～いっぱいいろいろ書かれてる～
Title=”○○” Height=”○○” Width=”○○”>

‹Grid>
‹/Grid>

‹/Window>

って感じに書かれていると思います。
‹> というのがタグというものです。HTMLなどでおなじみのものです。

**

タグとは何ぞや？という方もいると思います。
適当に検索して、このサイトのようなところで勉強するのが早いかもしれないですが、一応説明します。
タグには、例えば「windows」とか「Grid」などというオプションがあって、そのパラメータを設定できます。

例えば、テレビゲームのオプション設定画面で、「サウンド」や「画質」というオプションがありますよね。
それに対してパラメータの「サウンド：大」や「画質：高」みたいにパラメータを設定できますよね。

タグ、というものはまさにこれと同じです。「Windows」　や「Grid」というオプションがあって、それぞれに対するパラメータをいろいろ設定できます。

‹オプション> ‹/オプション>
という書式ですが、/というのがタグの終了を示す記号です。この‹>と‹/>の間、あるいは最初の‹>の中にパラメータを書いていきます。各パラメータが‹>の外か中のどっちに書くべきなのか、というのは決まりがあるみたいなのでググってマニュアルか何かを読みましょう（笑）。

**

とりあえず、実際にいじくってみるのが早いでしょう。
ちょうど、Windowsのタグの中に、
Title = “○○”　Height = “○○” Width = “○○”
という欄があると思います。それぞれ、アプリの名前、ウインドウの高さ、ウインドウの幅　を表しています。
（高さと幅はドットという単位です。）
これを自分の好きな値に変えて、F5 でデバッグしてみてください。
（あるいは、前回説明したようにDebugフォルダやReleaseフォルダにある.exeファイルを実行してもいいです。）

今回はWindowsタグの中にある３つのパラメータを弄りましたが、自分でそもそものタグを増やしたり、あるいはそれに対して、まだ出てきていない新しいパラメータを設定したり、様々なことができます。

XAMLによるUIのデザインは、このように
タグ作成→パラメータ設定
を行っていくことが基本です。これをひたすら地道に行うだけで、それっぽいアプリのUIができます！

---

２．Labelタグを作って編集してみる

では、さっそくタグの編集をしてみましょう。
‹Grid>‹/Grid>
のタグの間に、

‹Grid>
‹Label Content = “HelloWorld!”>‹/Label>
‹/Grid>

上の緑色の行を記入して実行してみてください。

こんな感じに、文字が表示されたと思います。
‹Label>　というタグは文字を表示できます。

次に、この文字のフォントサイズ、色、フォント、位置などのパラメータを変えてみましょう！
上の緑色の行を、以下のように変更してみてください。

‹Label Content=”Hello World!” FontSize=”20″ Foreground=”Aqua” FontFamily=”Times New Roman” VerticalAlignment=”Bottom” HorizontalAlignment=”Center” > ‹/Label>

これを実行すると・・・

このようになります！　各パラメータを設定して、自在に文字を修飾できるんですね。
今回は、５つのパラメータを追加しました。
「FontSize」=フォントサイズ
「Foreground」=文字の色
「FontFamily」=フォント
「VerticalAlignment」=垂直、縦方向の位置
「HorizontalAlignment」=水平、横方向の位置

私は５つ追加しましたが、何個か消してみたり、あるいはリファレンスを読んでほかのパラメータを追加してみてください！
このように、好きなようにいろいろ設定できるのがタグです。

さて、わかりやすいかと思って私はオプションとかパラメータとか言ってきましたが、これらにはちゃんとした正式な名前があります。
検索する際にも不便なのでこの際覚えてしまいましょう。
‹要素名　属性名=”属性“>　‹/要素名>

要素(element)と属性(attribute)　という単語です。これからどんどん使っていきます！

また、初めの ‹> のことを開始タグといい、
終わりの ‹/> のことを終了タグといいます。
一緒に覚えてしまいましょう。

---

３．Textboxタグで文字の記入フォームを作ってみる

先ほど使ったLabelというのは、文字を表示する要素でした。
XAMLには、Label以外にも非常に多くの要素が存在します！ほかの要素も使ってみましょう。

次に使うのは、、「TextBoｘ」です！

‹Grid>
‹Label Content=”Hello World!” FontSize=”20″ Foreground=”Aqua” FontFamily=”Times New Roman” VerticalAlignment=”Bottom” HorizontalAlignment=”Center” />
‹TextBox Height=”20″ VerticalContentAlignment=”Center” HorizontalAlignment=”Stretch” />
‹/Grid>

上記のように、Gridタグの間に入れてみてください。

文字の記入フォームができました！
こんな感じで、要素を使いこなしていきましょう。

ちなみに、今回終了タグを使っていません。実は開始タグの最後に　/ という記号を入れると終了タグを省略できます。便利なので使っていきましょう。

---

３．GridタグとButtonタグを使って電卓のUIを作成！

では、電卓のUIを実際に作ってみましょう！まずは表示されているウインドウを等分割して、画面にグリッド、つまり格子を作ります。
要素名は
‹Grid.ColumnDefinitions>
‹Grid.RowDefinitions>
です。Columnは列、Rowは行の英語です。それぞれ列方向の分割と行方向の分割を行えます。
とりあえず、下のコードをコピーして実行してみてください。

‹Grid>

‹Grid.ColumnDefinitions>
‹ColumnDefinition Width=”*”/>
‹ColumnDefinition Width=”*”/>
‹ColumnDefinition Width=”*”/>
‹ColumnDefinition Width=”*”/>
‹/Grid.ColumnDefinitions>

‹Grid.RowDefinitions>
‹RowDefinition Height=”2*”/>
‹RowDefinition Height=”*”/>
‹RowDefinition Height=”*”/>
‹RowDefinition Height=”*”/>
‹RowDefinition Height=”*”/>
‹RowDefinition Height=”*”/>
‹RowDefinition Height=”*”/>
‹/Grid.RowDefinitions>

‹Label Content=”Hello World!” FontSize=”20″ Foreground=”Aqua” FontFamily=”Times New Roman” VerticalAlignment=”Bottom” HorizontalAlignment=”Center” />
‹TextBox Height=”20″ VerticalContentAlignment=”Center” HorizontalAlignment=”Stretch” />
‹/Grid>

結果

こんな感じで、画面が分割され、左上のマスに先ほどの画面が表示されます。
列方向、行方向にそれぞれ何分割するか？は　コードの中の「*」 という記号の数で決めます。先ほどのコードをじっくり見て納得してください。今回は７行４列ですね。

ちなみに「2*」という記号は、「*」2個分の長さを意味しています。

ポイントは、分割されたそれぞれの画面の中で文字の位置を中央や端っこといったように設定できる　ということです。

つまりこの分割された画面の中央に文字を書いていけば、電卓のUIを綺麗に作れます！

実際にやってみましょう。
１．Windows要素のHeight属性とWidth属性を変えて画面全体を縦長にしてください。
例）Title=”MainWindow” Height=”525″ Width=”350″

２．次に、各要素に文字を入れます。今回はボタンとしてクリックできる”Button”タグを使います。

どのグリッドを使うかの指定ですが、座標　(行番号. 列番号)で指定します。一番左上のマスが(0.0)です。
(0,0) (0,1) (0,2)
(1,0) (1,1) (1,2)
(2,0) (2,1) (2,2)
といった感じです。

例えば「÷」という記号のマスを２行目３列目に設定したいときは、

‹Button
Content=”÷”
FontSize=”25″
Margin=”5″
Grid.Row=”2″
Grid.Column=”3″
/>

のように設定してください。Content属性は表示したい文字、Margin属性はボタンの余白を表しています。

また、グリッドをまたいで位置を設定することもできます。例えば計算結果の表示に１行目すべて使いたいなら・・・

‹Label
Content=”0″
FontSize=”60″
HorizontalAlignment=”Right”
VerticalAlignment=”Bottom”
Grid.ColumnSpan=”4″
/>

のように、Grid.ColumnSpan属性を使うと結合できます。
マスを結合して、HorizontalAulignment属性で水平方向の位置を指定（Right）、VerticalAlignment属性で垂直方向の位置を指定(Bottom)することで、文字の位置を調整しています。

コピペではなく、自分で手を動かしてコーディングすることは非常に良い練習になるので、ぜひ自分なりに試行錯誤して作ってみてください！
うまく作れたら、下の画像のようなUIができると思います。

よくわからない、という方は
以下に私のコードを載せておくので参考にしてください！

↓今回私の作ったXAMLプログラム。MainWindow.xamlです。参考にどうぞ。

---

とりあえず見た目の部分の作り方、つまりXAMLの編集についてはなんとなく掴めたでしょうか。

次回は電卓の中身の部分、つまりボタンを押したときの動作を組み立てていきます！

今回特に参考にしたサイト→
ここ。コードパクりました（笑）。めっちゃわかりやすい。ほんとにおすすめ
タグの正式名称とかそういうもの
スクロールする枠の参考。ブログでも使えてうれしい。