‫お帰りなさい｡
‫このビデオでは､ スタック､ パネルリスト､ ボックス､ そして論理ツリーと視覚ツリーについて説明します｡
‫ということで､ まずはこのグリッドを消してしまいましょう｡ まだグリッドを触っていないので､ グリッドを正しく使えていませんが､
‫次回のビデオで触る予定です｡
‫そこで､ グリッドの代わりに､ スタックパネルを使いたい｡
‫スタックパネルでは､ 要素を重ねて表示することができるので､ 例えばここにテキストブロックを追加することができます｡
‫そして､ Hello, worldのようなシンプルなテキストを書くことにしています｡
‫そして､ ご覧のように､ 私のテキストHello Worldがあります｡
‫また､ 水平方向のアライメントを調整したいので､ ここでは中央を使用することにします｡
‫そこで今度は､ ご覧のようにテキストを中央揃えにしました｡
‫これで､ テキストは中央に配置され､ また､ 全方向に向かって少し余白があり､ 20となっています｡
‫ご覧のように､ マージンを使って20と言うだけで､ 4方向すべてに20ピクセルの余白ができることになります｡
‫次に､ リストボックスを使用します｡
‫このリストボックスは現在空ですが､ リストボックスのアイテムを作成することで､ 簡単に変更することができます｡
‫それでは､ リストボックスの項目を作成してみましょう｡
‫そして､ その項目は､ 例えばcontentが項目1と等しいとすると､ contentを持つべきです｡
‫そして今度は､ オープニングとクロージングのタグの代わりに､ この短いバージョンを用意したいのです｡
‫そこで私は昨年これを使いましたが､ Visual Studioは賢いので､ 自動的に閉じタグを削除してくれました｡
‫それで､ 今このリストボックスにはこの項目が1つあり､ それを複数回コピー＆ペーストするだけです｡
‫だから､ アイテム1と2と3があるんだ｡
‫そして､ このリストボックスが横幅いっぱいに表示されるようになりました｡
‫見ての通り､ 親ごと持っていくので､ 必要な分だけ高くしたり､ 高くしたりすることができます｡
‫つまり､ その中の要素の高さ分のスペースしか必要ないということです｡
‫つまり､ かなり､ このアイテム1とアイテム2､ 3は､ それぞれ30ピクセルの高さだとします｡
‫つまり､ このボックス全体がちょうど90ピクセルの高さになるわけです｡
‫しかし､ 例えば高さを調整することで､ それを変えることができるのです｡
‫そして､ 高さは100でいいんです｡
‫見ての通り､ 以前のオブジェクトより高くなっています｡
‫そして､ 今度は横幅も100ピクセルにしましょう｡
‫これで､ この箱がかなり小さくなり､ ぴったりと収まったのがおわかりいただけると思います｡
‫わかりました｡
‫さて､ 四方八方に余白を持たせたい場合は､ この要素に余白を持たせることも可能です｡
‫しかし､ ご覧のように､ このHelloworldのテキストブロックは､ すべての方向に対して20のマージンがあるため､
‫ここにある2つのリスト要素､ またはリストボックスとテキストブロックの間にも距離があります｡
‫このコードを実行すると､ 小さなメイン・ウィンドウができ､ リスト・ボックスとその要素が表示されていることがわかります｡
‫このように､ テキストブロックにハローワールド､ そしてリスト要素をクリックすると､
‫ご覧のように選択することができます｡
‫しかし､ まだイベントのチェックアウトをしていないため､ それ以外のことは何も起こりません｡
‫ということで､ またまた閉じますね｡
‫そして､ ここで早速､ 論理ツリーと視覚ツリーの話をしましょう｡
‫つまり､ ここにあるのは論理ツリーであり､ XAMLで論理ツリーを見ることができます｡
‫つまり､ 論理ツリーはその中のウィンドウということになります｡
‫スタックパネルがあります｡
‫そのスタックパネルの内側｡
‫テキストボックスブロックとリストボックスがあります｡
‫そして､ リストボックスの中に､ 実際にリストボックス､ アイテム1リストボックスアイテム2､ 3があるのです｡
‫それがロジカルツリーなんですね｡
‫結構､ 複数の支店を持っているんですね｡
‫どんどん深くなっていきます｡
‫つまり､ ウィンドウはスタックパネルというブランチを持ち､ そのブランチは2つあり､ そのうちの1つはリストボックスで､
‫これもブランチなどを持っているのです｡
‫だから､ さっきも言ったように､ これがロジカルツリーなんです｡
‫では､ ビジュアルツリーを見てみましょう｡ 例えば､ ここにボタンを追加して､ すぐにそれが必要になるとします｡
‫そこで､ 新しいボタンを作成し､ その内容をClick Meとしました｡
‫そして､ 誰かがクリックするたびに呼び出されるメソッドをここに追加するつもりです｡
‫ここではclickを使い､ 新しいイベントハンドラを作成しています｡
‫その結果､ Button Clickという新しいメソッドが作成されました｡
‫今ここを見ると､ Button Clickというメソッドがあり､ Eというオブジェクトのsenderとルーティングされたイベントの引数を持っていることがわかります｡
‫つまり､ このメソッドが呼び出されるということです｡
‫ボタンをクリックすると､ このメソッドの中にあるものがすべて実行されます｡
‫では､ まだ使っていないメッセージボックスを使って､ そのメソッドshowを呼び出すとしましょう｡
‫単純にボックスを表示したり､ 小さなポップアップのようなボックスが表示され､ テキストが表示されます｡
‫つまり､ 「クリックしてくれてありがとう」というような文章と､ 「クリックしてください」という文章と､ まあこんな感じで出てくるわけです｡
‫メッセージボックスには､ Thanks for clicking meのような美しい文字が表示されます｡
‫このクリックミーボタンは､ リストボックスのすぐ下にあります｡
‫では､ 今度は少し距離を置いてみてください｡
‫わかりました｡
‫ぜひ挑戦してほしいですね｡
‫ボタンにマージンを与えることもできますし､ リストボックスにマージンを与えることもできます｡
‫でも､ ボタンにマージンを与えるのは全然問題ないはずです｡
‫このコードを実行すると､ このように美しいクリックミーボタンが表示されます｡
‫つまり､ hello worldがあり､ テキストなどがあり､ あるいはリストボックスがあるわけです｡
‫そして今､ 「Click Me」をクリックすると､ このメッセージボックスがポップアップしてチェックされます｡
‫Thanks for clicking me」のような言葉をかけて､ 「OK」をクリックすれば､ そのメッセージボックスを再び閉じることができます｡
‫では､ 開封してみましょう｡
‫ご覧のように､ 私をクリックしてくれてありがとう｡
‫これはメッセージボックスで､ テスト用のコンソールアプリケーションでコンソールライトラインを使用したのと同じような方法で使用することができます｡
‫イベントの後で何かを開きたい場合､ メッセージボックスを開くだけで､ 「よし､ うまくいった」とわかるので､
‫とてもクールです｡
‫それがボタンであり､ 私たちのロジカルスリーです｡
‫では､ ビジュアルツリーを見てみましょう｡
‫ですから､ ビジュアルツリーを得るためには､ 複数の方法があります｡
‫しかし､ 私が使うのは､ ここにポイントを追加することです｡ デバッグポイントです｡
‫そのため､ このコード行が実行されるたびにデバッグに走ることになります｡
‫それでは､ コードを開始､ またはプログラムを開始させてください｡
‫今､ 私がボタンをクリックすると､ プログラムが停止し､ デバッグモードになります｡
‫そして､ ここでWPFのツリービジュアライザーに移動することができます｡
‫これをクリックすると､ WPFビジュアライザーが開き､
‫ビジュアルツリーが表示されます｡
‫ご覧のように､ ボタンやリストボックスにはたくさんのプロパティがあり､
‫それらのプロパティの値もすべて教えてくれます｡
‫しかも､ 何一つ設定していないのです｡
‫まあ､ マージンは別かもしれませんが｡
‫でも､ それ以外に設定しているものはないんです｡
‫そして､ ご覧の通り､ 背景は白です｡
‫それはいつでもいいんです｡
‫だから､ コード上でも変更できる｡
‫ところで､ 今ここで重要なのは､ 私たちのビジュアルツリーです｡
‫そして､ ここにも私たちのロジカルツリーの一端を見ることができます｡
‫例えば､ メインウィンドウが見え､ スタックパネルが見え､ そこにテキストブロックのリストボックスとボタンが見えるとします｡
‫でも､ まだまだありますよ｡
‫ご覧のように､ メインウィンドウにはボーダーがありますが､ これは論理ツリーでは見られず､ 個別ツリーで見ることができます｡
‫そして､ 実際にコンテンツを表示するドナー・デコレーター､ コンテンツ・プレゼンター､ そしてスタック・パネルがあります｡
‫そして､ スタックパネルには､ テキストブロック､ ボーダーを持つリストボックス､ そしてこのボックスにはスクロールビューがあります｡
‫そのため､ 持っている高さでは表示しきれないほどの要素がある場合は､ スクロール機能を持たせることになります｡
‫そして､ そこには矩形を含むグリッドと､ アイテムプレゼンター視覚化スタックパネルを持つスクロールコンテンツプレゼンターがあります｡
‫そして､ その中にリストボックスのアイテム1があり､ これにもボーダーがあり､ コンテンツプレゼンターがあります｡
‫そして､ 最後にテキストブロックを見つけることができます｡
‫つまり､ この木はとても長い木で､ たくさんの枝があることがわかると思います｡
‫しかし､ 最終的に見つかるのは､ プログラムの中に視覚的に存在するさまざまな要素すべてです｡
‫そしてこれは､ 一般的にプログラムで表現されているもの､ 使用されているもの､ プログラムに追加したものについて､
‫より詳しく調べたい場合に非常に役に立ちます｡
‫でも､ ビジュアルツリーについては､ だいたいそれですべてがわかるんです｡
‫ご覧のとおり､ リストボックスの中にグリッドがありますが､ これは自分で設定したわけではなく､ ただそこにあるだけなんですね｡
‫そして､ そのグリッドをクリックすると､ 右側にそのグリッドのプロパティも表示されます｡
‫オッケイです｡
‫これで､ ビジュアルツリー､ ロジカルツリーはほぼ完成です｡
‫スタックパネルとリストボックスを使っています｡
‫今後､ 技術パネルをたくさん使っていきたいと思います｡
‫だから､ それに慣れること｡
‫そうそう､ 次のビデオでは､ イベントをチェックしますよ｡
‫では､ 現地でお会いしましょう｡