‫お帰りなさい｡
‫さて､ いよいよGridを使うときが来ました｡
‫また､ 以前からスタックパネルやラックパネルの使い方をご覧いただいており､ それらをうまく積み重ねてラップしています｡
‫まず､ 2×2のグリッドを使用します｡
‫まず最初に､ グリッドを作成するための列と行の定義が必要です｡
‫サンプルファイルを開き､ グリッド内にグリッドドット列の定義を作成します｡
‫そして､ ここで様々なカラムを定義することができます｡
‫ですから､ まず､ 列の定義､ 複数が必要です｡ そして､ 個々の列の定義を作成していきます｡
‫例えば､ ここに作ってきてください｡
‫一行でシンプルに､ そんな感じです｡
‫そして､ ここで定義したいのは､ 単純に幅と横幅です｡
‫例えば100にして､ もう一つ列を作り､ これも100の幅にすることができます｡
‫今はまだ十分ではありません｡
‫また､ 行も必要です｡ ただし､ 行は1つだけとします｡
‫まずは1行だけで､ 最初にボタンを作成します｡ このボタンは､
‫「こんにちは」というような内容のもので､ グリッドのドットカラム0に表示されるはずです｡
‫そして､ 2つ目のボタンを作成します｡ これは､ グリッドのカラム1となるはずです｡
‫さて､ デザインを見てみると､ 2つのボタンがあるのがわかりますね｡
‫こんにちは｡
‫このコードがどのように見えるかを確認するために､ このコードを実行してみましょう｡
‫ちなみに､ このように横幅は100ピクセルまでしかありません｡
‫つまり､ ここに合計値を入れれば､ それを単純に幅のピクセル数として使うことができるのです｡
‫ここにあるように､ 列の幅はこれくらいです｡
‫もちろん､ ここにさらにいくつかの列を簡単に入れることができると言うこともできます｡
‫まあ､ それはできることなので､ 後でやりましょう｡
‫でも､ その前に､ とても大切なものをお見せしたいと思います｡
‫XAMLをここにドラッグすると､ UIの違いを直接見ることができるので､ 実際に便利です｡
‫そして､ 横幅を100からautoに変更したいのです｡
‫そして､ ご覧の通り､ 自動が行うこと｡
‫要素内にあるすべてのコンテンツを収めるために必要な幅だけを自動的に取得します｡
‫つまり､ 私たちの場合､ ボタンにはHi thereというテキストがあり､ Hi thereが必要とする､ あるいは必要とするスペースはその程度ということです｡
‫そして､ ボタンの幅もこれくらいになります｡
‫そして､ ご覧の通り､ 最初の列の定義用です｡
‫最初の列の定義では､ 私たちのボタンがそこにあるのは､ どのように変更されるボタンであるかということです｡
‫今はご覧のように59に変わっています｡ 5ピクセル｡
‫さらにテキストを追加すると､ 153まで広がっているのがわかると思います｡ 5ピクセル｡
‫だから､ 実際に必要なスペースに応じて､ すべてを正しく収めたい場合は､ 簡単に先に進み､ よく自動を使用することができます｡
‫しかし､ 列の幅を全く同じにしたい場合はどうすればよいのでしょうか｡
‫もちろん､ ここで完全な値や固定値を使うこともできますが､ 星を使うこともできます｡
‫そして､ 星が何をするかというと､ もしすべての人が星を持っていたら､ 「よし､ すべてのスペースを占めよう」と言うでしょう｡
‫そしてこの場合､ この特定の列が持っている空きスペースだけで､ 他の列と全く同じになるのです｡
‫だから､ 今はウェイトがあるんです｡
‫だから､ これの重さは1､ あれの重さも1なんです｡
‫つまり､ 同じように幅を持たせているわけです｡
‫もしこれを変更したい場合､ 例えばこの2つ目のボタンを1つ目のボタンの2倍の幅にしたい場合､
‫ダブルスターを使うことができます｡
‫だから今度は､ 最初のものの2倍の幅になるんです｡
‫例えば私が､ 左手に5分の3､ 右手に5分の2をその幅にしたい場合｡
‫このように､ シンプルにこの方法を使うことができるんです｡
‫だから､ 星3倍､ 星2倍｡
‫つまり､ 実際にすべてを足し合わせて､ ここに設定されている複数の秒数を取るだけなのです｡
‫では､ 3と2があるとしましょう｡
‫それでどうなるかというと､ 「よし､ これで合計5つだ」となるわけです｡
‫使えるユニット､ その3/5を取る｡
‫今なら､ 100点満点のようなこともできるかもしれません｡
‫だから､ これは100かかると見ていい｡
‫そして､ これだけでは2人分しか取れません｡
‫だから､ そうやって幅を変えて遊ぶことができるんです｡
‫また､ 高さについても同様です｡
‫では､ 次に行の定義を作成してみましょう｡
‫だからグリッドドットローの定義｡
‫そして､ この中に行の定義を作成することができます｡
‫では､ 最初の1枚ですが､ こちらも1列のようにシンプルにします｡
‫そして､ これには高さが必要です｡
‫だから､ いい加減､ 星の高さを揃えたいんです｡
‫そして今度は､ 2列目にまた同じものを使います｡
‫そして､ ご覧のように2列になっています｡
‫だから､ 1つはここで､ 2つ目は一番下に｡
‫そしてご覧の通り､ 2行目にはまだ何もコンテンツがありません｡
‫それでは､ まずこのボタンを一番下に配置することで変更してみましょう｡
‫そうですね｡
‫そして､ どうすればいいのか？
‫つまり､ グリッドドット列を使えば､ 1行目に表示されることになります｡
‫さて､ なぜ1なのか､ と思われるかもしれません｡
‫なぜ2つではないのですか？
‫さて､ プログラミングでは､ すでにご存知の方も多いと思いますが､ ゼロからカウントを始めます｡
‫つまり､ 1列目は0､ 2列目は1ということです｡
‫さて､ 高い位置にあるのが2列目､ つまり1行目です｡
‫では､ さらに2つのボタンを作成し､ その名前も､ 実際の情報を表すようなものに変えてみましょう｡
‫そこで､ これを1行目の0列目に入れ､ 0
‫1に戻すと1 1になり､ 実際にはこのように1列目と0行目になります｡
‫これですべてのボタンが揃い､ その1つが1つになるわけです｡
‫その1つがボタン2､ ボタン3､ ボタン4となる｡
‫素晴らしい｡
‫では､ それを始めると､ ご覧のようになります｡
‫まあ､ UI自体もカウントされるんですけどね｡
‫だから､ 1､ 2､ 3､ 4｡
‫わかりました｡
‫さて､ グリッドの列と行の使い方はおわかりいただけたと思いますので､ 少しチャレンジしてみましょう｡
‫ここに3×3のグリッドを作って､ 8つのボタンを作ってください｡
‫つまり､ 1〜8はボタン､ 9の位置はボタンであるべきなのです｡
‫そのため､ 右下の位置やグリッド要素はテキストブロックにする必要があります｡
‫ですから､ ビデオを一時停止してやってみてください｡
‫わかりました｡
‫ぜひ試してみてください｡
‫これから行うのは､ ここに列の定義を追加して別の列を追加し､ 幅も高さも同じにすることです｡
‫等身大になるんです｡
‫そして､ ご覧のようにボタンが､ ちょっと変な感じになっていますね｡
‫でも､ それは私がそうでないだけです｡
‫まだズームアウトした状態｡
‫だから､ 今､ 正しく見ることができるのです｡
‫これで､ ゼロイチなどのボタンができました｡
‫そこで､ このボタンをコピーして､ 2列目に配置することにします｡
‫つまり､ 0行目､ 2列目｡
‫もちろん､ 行から始めて列を入力する方が理にかなっているという意見もあるでしょう｡
‫まあ､ それはそれでいいんですが､ 私の場合は逆なんです｡
‫結局､ 大事なのは､ どちらも正しく使うことです｡
‫これで､ 上部の3つのボタンが揃いました｡
‫それでは､ 2行目の作成､ または2行目の確定を行います｡
‫そして､ これがコラム2です｡
‫そして､ それを3回､ 実は2回で十分なのですが､ コピーします｡
‫そして､ その1つは､ 行から位置0､ 行2､ 位置1または列1になります｡
‫さて､ 当然ですが､ 値を変更する必要があります｡
‫だから､ 1､ 2､ 3､ 4､ 5､ 6､ 7､ 8｡
‫そして､ 先ほど申し上げたように､ 左下にはテキストブロックを設けたいと考えています｡
‫つまり､ テキストブロックもグリッドと同じ考え方をしているわけです｡
‫列と行が必要です｡
‫だから､ これは2列目とグリッド2行目も同じようにすると言うことです｡
‫これで､ 左または右の一番下になりましたので､ 先に進み､ テキストを入力します｡
‫とか､ テキストみたいなことを言うんです｡
‫今､ あなたは､ ああ､ 嫌だなあと言うかもしれません｡
‫テキストは左上です｡
‫まあ､ ここで水平方向のアライメントと使用センターのようなものを入力すれば､ 簡単に変更できます｡
‫これで水平方向の中央揃えになったわけです｡
‫見えるように拡大してみましょう｡
‫わかりました｡
‫そして､ 縦方向にもセンタリングしたい場合は､ 単に垂直方向の配置を使用し､ ここでもセンタリングを使用します｡
‫これでボタンは完全に中央に配置され､ さらにフォントサイズも変更できるようになりました｡
‫そして､ 3×3のグリッドに8つのボタンとテキストがあることがおわかりいただけると思います｡
‫これで､ メインウィンドウとグリッドにあるウィンドウのすべての種類の要素を整列させることができます｡
‫それがグリッドを使うことの良さなんですね｡
‫そして､ ご覧いただいたように､ いろいろなものを積み重ねることができるのです｡
‫複数のグリッドでスタックパネルを作り､ さらに間にテキストを挟むとか､ そんな感じです｡
‫つまり､ ここで使う要素は1つに限定されないということですね｡
‫ご覧のように､ これをスタックパネルに入れることができます｡
‫そんな風にパネルを積み重ねる｡
‫そこで､ グリッドをドラッグしてみます｡
‫今見てわかるように､ ウィンドウの例では､ メインウィンドウは最初の1つしか知らないので､ 文句を言っているのです｡
‫だから､ 今､ 私たちの外観をチェックする場合､ それは唯一のSTACKパネルが表示されます｡
‫実際に停止してみると､ 無効なマークアップと表示されることがわかります｡
‫そこで､ スタックパネルの中にグリッド全体を取り込むと､ ご覧のようにグリッドが存在し､ テキストが表示されます｡
‫だから､ 底には十分なスペースがあるのです｡
‫ここで､ 別のボタンを追加して､ これが可能であることを確認します｡ これは､
‫高さが100になるようにします｡
‫そして今､ ご覧のように上部に積み重なっているのです｡
‫しかも､ この高さは全部同じというのがあるにもかかわらず､ この文章はそれを無視するほどスペースが必要だったんです｡
‫だから､ フォントサイズが大きすぎるのです｡
‫だから､ 16に戻しても､ まだ大きすぎるんです｡
‫今､ 仮に12とすると､ もっとそれらしく見える｡
‫だから､ このスターで行定義を使うときは､ いつも注意が必要です｡
‫もし､ ある要素が余分なスペースを必要とするならば､ それはオーバーフローすることになります｡
‫わかりました｡
‫つまり､ 2つのグリッドですね｡
‫そこにあった美しい標準的なグリッドに戻るんです｡
‫そして一般的に､ このようなものを見た後､ そしてこのようなものを学んだ後､ 私がいつもお勧めしているのは､
‫どうぞ遊んでみてくださいということです｡
‫いろいろな種類の要素で遊んでみてください｡
‫すでにいくつかご覧になっていると思いますが､ この後､ さらに多くのコントロールについて見ていきます｡
‫そこで､ これまで使ってきたものは､ 主にボタン､ 右､ テキストブロックですが､ 今後の動画では､
‫さまざまな美しいコントロールを使う予定です｡
‫では､ 現地でお会いしましょう｡