‫お帰りなさい｡
‫このビデオでは､ zemoを詳しく見ていきます｡ zemoはXML言語の一種であり､ この下にあるように､
‫例を挙げたいと思うかもしれません｡
‫そして､ 実はさらに引きずることになるのです｡
‫つまり､ 例によってUIを書くことができるので､ 先にすべての要素をUIにドラッグして､
‫そこで調整する必要はないのです｡
‫そのすべてをコードで行うことができるのです｡
‫今､ あなたは､ ああ､ 私はもっとビジュアルが好きなんだ､ と言うかもしれません｡
‫物を引きずって行きたいので､ それでいいと思います｡
‫まあ､ それはそれでいいんですが､ それだとドラッグするだけに限定されてしまいます｡
‫データバインディング､ プロパティ､
‫依存性プロパティなど､ exampleでできることを見ていきましょう｡
‫それで､ ここに見えるのは､ まずこのウィンドウです｡
‫ですから､ 一般的には､ 開始タグと終了タグがあります｡
‫HTMLをご存知の方なら､ よくご存じかもしれませんね｡
‫コーナーブレースも､ 同様に閉じているんですね｡
‫つまり､ 小なりと書いて大なりと読む｡
‫そして､ 窓とここにも同じものがあるのがおわかりいただけると思います｡
‫そして､ 1つ目のクロージングでは､ 単語の直前にスラッシュも入っていますね｡
‫つまり､ これはグリッドでもウィンドウでも何でも同じなのです｡
‫ですから､ 例えばボタンを使いたい場合は､ そのようにすればいいんです｡
‫また､ 大なり記号を使うと､ 自動的に終了タグが作成されます｡
‫このように､ すべての調整を開始タグの内側で行うことができます｡
‫ですから､ ご覧のようにいろいろな特性があります｡
‫そして､ コンテンツプロパティを使って､ Click Meのようなものを使うだけです｡
‫中央にボタンがあり､ 「Click me」と書かれています｡
‫もちろん､ 高さはありませんし､ 幅もありません｡
‫そういう性質はすべて､ まだ言われていないのです｡
‫しかし､ このボタンの高さを50ピクセル､ そして幅を100ピクセルにしたいとすると､ ご覧のようになります｡
‫さて､ これが私が作成したボタンです｡
‫もちろん引きずり込んでもいいのですが､ 例としてやっておくと結構便利なんです｡
‫で､ どうする？
‫まだあまり触れていないことがあります｡
‫そして､ それはコースの後半にならないと必要にならないものです｡
‫しかし､ 一般的にここで見ることができるのは､ XとLとSです｡
‫これは､ XMLネームスペースのことで､ XAMLはExtensible Application Markup Languageの略です｡
‫だから､ ここに追加させてください｡
‫コメントを追加しよう｡
‫そんなコメントを使う｡
‫ご覧の通り､ 今は緑色で､ これはかなりコメントになっています｡
‫だから､ ここにXAMLは拡張可能なアプリケーションマークアップ言語である､
‫といったようなことを書けばいいのです｡
‫わかりました｡
‫さて､ ボタンはご覧の通り､ この中にあります｡
‫そして､ 今度はボタンでいろいろなことをやってみましょう｡
‫では､ いくつかボタンを追加で作ってみましょう｡
‫どうぞ､ 別のボタンを作ってください｡
‫なるほど｡
‫ぜひ試してみてください｡
‫ここでボタン名やキーワードを使うだけで､ 簡単に追加ボタンを作成することができます｡
‫さて､ 「あれ､ 位置がおかしいぞ」と思われるかもしれません｡
‫だから､ このボタンがあり､ それでコンテンツがあるのです｡
‫こんにちは｡
‫では､ なぜ？
‫このクリックミーボタンは今どこにあるのでしょうか？
‫まあ､ グリッドの中なので､ ボタンが重なって表示されたりしないようにグリッドを使っているので､ 消えてしまったのでしょう｡
‫だから､ それを試した人は見たことがあると思いますし､ グリッドについても後ほど見ていきたいと思います｡
‫でも､ とりあえずそれを見せたかったんです｡
‫わかりました｡
‫そこで､ もう一度そのボタンを取り外してみましょう｡
‫実際にどのように見えるか､ そしてクリックするだけでこの全体がどのように私たちの生活を美しくしてくれるかを見るために､
‫このボタンをクリックしてアプリケーションを実行してみましょう｡
‫ご覧のように､ カーソルを合わせると色が変わり､ クリックすると小さなクリックアニメーションが表示されます｡
‫しかし､ クリックしても何も起こりません｡ クリック機能を実装する方法は複数あるので､
‫後ほどご紹介します｡
‫わかりました｡
‫というわけで､ 例によってボタンを作成する方法です｡
‫さて､ ここでアクセスできる追加要素やプロパティはたくさんあります｡
‫例えば､ font sizeプロパティにアクセスして､ フォントサイズを例えば32に大きくすることができる｡
‫では､ ボタンの幅が文字よりも狭くなってしまったので､ 幅を調整しましょう｡
‫これでまた問題なく､ ボタンのテキスト全体が見えるようになったわけです｡
‫しかし､ フォントサイズやそういった要素を弄ると､ やはり収拾がつかなくなるんです｡
‫また､ コンテンツをコンテンツ・プロパティに追加する代わりに､ ボタン・タグの中に追加することもできます｡
‫この中にClick Meetのようなものがありますが､ ご覧のようにありますね｡
‫つまり､ タグとタグの間にあるのがコンテンツというわけです｡
‫そういうやり方もあるんですね｡
‫もうひとつは､ 先ほど見たように､ ここで単純にcontentプロパティを使って､ このようにテキストを代入する方法です｡
‫さて､ この閉じタグボタンは､ このようにボタンをそのまま閉じる場合は必要ありませんので､
‫このように短く閉じることができます｡
‫だから､ 閉じタグのボタンは必要ないのです｡
‫そして､ もうひとつのボタンのデザイン方法は､ 次のようなものです｡
‫だから､ そういうのがあったら､ それも全然いいんですよ｡
‫ボタン､ タグ､ 閉じるもの､ 開くものを作成し､ この中にボタンドットがあり､ その後､ 必要なすべての異なるプロパティを調整できます｡
‫このように､ さまざまなプロパティにアクセスすることができ､ たとえば､ このようにフォントサイズにアクセスすることができます｡
‫だから､ 例えばこんな風にフォントサイズを72に設定することができるんだ｡
‫そして､ もう一つ調整したいボタンのプロパティは､ 仮にコンテンツとします｡
‫だから､ 先に進んで､ そこに隠すコンテンツだけでいいんです｡
‫フォントサイズ72の巨大なボタンがあり､ そこには「こんにちは」と書かれていますね｡
‫それが2つ目のアプローチです｡
‫そして､ それ以外にもできることがあるのです｡
‫では､ そのボタンをさらに調整しましょう｡
‫だから､ 例えばコンテンツとして､ 「こんにちは」というテキストだけでは嫌なんです｡
‫さらに上を目指したい｡
‫レップパネルを追加したい｡
‫さて､ リップパネルが行うことは､ すべてのコントロールまたは要素を左から右へ隣り合わせに配置することです｡
‫つまり､ 最初の要素は､ 例えばテキストブロックになるわけです｡
‫そして､ どのようなテキストブロックであるかを見てきました｡
‫シンプルな文章で､ これならマルチと言えそうです｡
‫あとはテキストブロックがもう一つ､ 3つ目が必要です｡
‫だから､ 今は3回マルチと書いてあるんです｡
‫しかし､ 今できることは､ アスペクトやテキストブロックごとに色を調整できるようになったことです｡
‫これを青にすると､ これが前景になります｡
‫つまり､ foregroundは前景色になる色で､ こちらは赤になります｡
‫そして最後に､ 私の最後のテキストブロックは､ 前景が白になります｡
‫そして､ マルチ､ マルチ､ マルチではなく､ マルチカラーボタンと表示されるようになりました｡
‫そして今度は､ フォントサイズを少し調整したいかもしれません｡
‫もっと小さくしよう｡
‫また､ 最初のボタンは､ ご覧の通り､ グリッドが最後の要素しか表示しないため､ 非表示になっています｡
‫もし､ それらが正しいグリッド構造に割り当てられていないのであれば､ 後で見ることになりますが､ 最初にあったボタンを取り除いてしまいましょう｡
‫そして今度は､ ボタンのサイズも設定しましょう｡
‫そこで､ ボタンのドット幅を200とします｡
‫そして､ その高さ､ つまり100になるボタン｡
‫そして､ そのように｡
‫そこで､ 私たちは
‫それに､ 文字サイズが大きすぎて､ 全部は入りません｡
‫だから､ 24でそれをやると､ 今度はその中に入ってしまう｡
‫このコードを実行すると､ 複数の異なるテキストブロックを持つ多色刷りのボタンができるわけです｡
‫そして､ そこに私たちはいます｡
‫このように､ 複数の異なるアプローチがあるのです｡
‫もし､ 複数の側面を包み込みたいのであれば､ このレップパネルを使用することができます｡
‫ボタンの中にグリッドを使い､ ボタンの中に複数の異なるコントロールを作成するために､
‫グリッドタグを使うこともできます｡
‫しかし､ それは後ほど取り上げることにします｡
‫とりあえず､ 理解してもらうことが大事なんです｡
‫この例では､ ドラッグ＆ドロップをすることなく､ ゴールに様々な工夫を凝らし､ 見た目や動作を完全にコントロールすることができます｡
‫さて､ これからすることは､ それをコメントアウトして､
‫ここで見たのと同じことをコードで行う方法をお見せしましょう｡
‫では､ 後ろのコードに入りましょう｡
‫ご覧のように､ ドット・サンプル・ファイルというのがあり､ これはここで開いているXMLのメイン・ウィンドウです｡
‫すべてのサンプル・ファイルには､ ドット・サンプル・ドットCSSファイルというコードの背後にあるファイルがあり､
‫これはCシャープ・ファイルです｡
‫そして､ ご覧の通り､ Main Windowという名前で､ windowを継承しています｡
‫そして､ この中にMain Windowというメソッドがあります｡ これは､ これまで見てきたコンソールアプリケーションのmainメソッドと同じようなものです｡
‫こちらはウィンドウが開くと同時に､ あるいはアプリケーションが起動すると同時に呼び出されます｡
‫そして､ ここで見ることができるように､ initializeコンポーネントが呼び出され､ ウィンドウの実行に必要な他のすべてのものを単純に初期化しています｡
‫例えば､ このタイトルを初期化し､ サイズなどを初期化する｡
‫そして､ この中に独自のコードを書き込むことができるようになりました｡
‫そこで､ まずはボタンの作り方を紹介します｡
‫そこでまず､ そのボタンを割り当てるためのグリッドが必要です｡
‫そこで､ 新しいグリッドであるgridと呼ぶことにします｡
‫そして､ この中身をメインウィンドウとなるグリッドに設定します｡
‫サンプルファイルで見たように､ 何らかのコンテンツがあるはずですよね｡
‫このタグを開くと､ タグとタグの間にあるものがすべて私のコンテンツになります｡
‫これが私のウィンドウの内容です｡
‫そして､ ここで言っているのは､ このドットコンテンツがグリッドになるべきだということです｡
‫そこで､ ここにあるような新しいグリッドを作成します｡
‫ですから､ ここにもグリッドの開閉タグがあり､ 今ここにもグリッドの開閉タグがあります｡
‫これをコンテンツとして設定し､ このグリッドにものを追加できるようにしました｡
‫例えば､ グリッドにボタンを追加することができますね｡
‫まず最初に､ そのボタンを作成しましょう｡ BTNと呼ぶことにします｡
‫これで､ ボタンができ､ そのプロパティを調整できるようになりました｡
‫つまり､ ボタンのフォントサイズを設定したいとすると､ 単純にその方法で行うことができます｡
‫単純に26みたいなことになるんだろうと言える｡
‫さて､ このボタンには､ ここで見たように､ ボタンの中身であるラップパネルがありました｡
‫そこで､ ラップパネルを作成することにします｡
‫ラップパネルと私は呼んでいるのですが､ ラップパネルは新しいラップパネルになる予定です｡
‫さて､ ラップパネルにいろいろと追加していきます｡
‫ボタンにラップパネルを追加し､ バットボタンをグリッドに追加しています｡
‫そして､ グリッドはすでに私たちのコンテンツの一部となっています｡
‫それでは､ ラップパネルに追加したいものをすべて作成し､ それに追加してみましょう｡
‫そこで､ まずテキストブロックが必要です｡
‫そして､ テキストブロックは､ ここで見ていただいたように､ こちらのものです｡
‫そこで､ 1～3個のテキストブロックを作成します｡
‫最初はt tが新しいテキストブロックになるので､ 単純にt tドットテキストと言っています｡
‫つまり､ textプロパティがあり､ ここにあるtextがコンテンツとなります｡
‫つまり､ ボタンの場合は内容をコンテンツと呼び､ テキストブロックの場合はテキストそのものをテキストと呼びます｡
‫そこで､ テキストブロックのtextプロパティにアクセスして､ それをmultiに設定し､ 次に色を設定します｡
‫テキストドットの前景はブラシにしようと思い､ マルチはどの色を先に持っていたかというと､ 青でした｡
‫このように､ ブラシは､ テキストはブラシで行うので､ テキストの色はブラシクラスで行うことになります｡
‫そこで､ このブラシをクラスとして使用し､ その色にアクセスする必要があります｡
‫だから､ タイプブラシのソリッドカラーブラシ｡
‫そして次に､ それをラップパネルに追加することができます｡
‫テキストを手に入れたら､ それをラップパネルに追加します｡
‫このように､ テキストブロックを1つ追加して､ 何も表示されないようにします｡ なぜなら､ まだ赤いパネルをボタンに追加していないし､
‫ボタンもグリッドに追加していないからです｡
‫しかし､ それはすぐにでもできることです｡
‫それでは､ テキストの調整､ あるいは実際にその3枚をもう一度調整してみましょう｡
‫次に､ テキストをマルチカラーに調整し､ 最後にボタンで､ 赤と白のカラーにしました｡
‫だから､ この3行は同じなので､ コピー＆ペーストしただけです｡
‫いちいち新しいテキストブロックを作らなくても､ 古いテキストブロックを追加して調整すればいいんです｡
‫またはその値を調整する｡
‫そして､ それを再び参照パネルに追加します｡
‫これで､ 3つのテキストがリップパネルに表示され､ リップパネルを追加することができるようになりました｡
‫私のボタンに
‫だから､ その内容をボタンにして､ 私のラップパネルにするのです｡
‫そして最後にグリッドドットチルドレンドットアド｡
‫そして､ この中に私のボタンを追加します｡
‫そういうことだったんですね｡
‫グリッド､ ボタン､ ラップパネルがあります｡
‫そして､ 今度はそれらのテキストを赤いパネルに追加します｡
‫赤いパネルをボタンに追加し､ ボタンをグリッドに追加し､ グリッドをウィンドウに追加しています｡
‫そして､ ご覧のように､ コードでこんな風にできるんです｡
‫そして､ コードを実行する前に､ 実はグリッドのコメントアウトも必要なのです｡
‫だから､ 私｡
‫実は窓際しか持てない｡
‫だから､ メインウィンドウにはウィンドウしかないんです｡
‫XMLファイルと他のすべてのコードは､ 私たちのメインウィンドウ内にあり､ その背後にあるコードはzamalekのものです｡
‫つまり､ このファイルはメインウィンドウのXAMLの背後にあるコードなのです｡
‫さて､ テストする前に1つだけ足りないものがあります｡ それは､ 新しいテキストブロックをテキストに割り当てることです｡
‫だから､ 両方のテキストにそれをする必要があるんだ｡
‫ここでテキストを作成し､ 新しいテキストブロックで初期化しました｡ このテキストをラップパネルに追加する前に､
‫新しいテキストブロックを作成してテキストに割り当てる必要があります｡
‫これで､ コードを実行できるようになりました｡
‫そして､ マルチカラーのボタンも用意されていることがわかります｡
‫そして､ ご覧のように､ 以前Zemoで行ったのと同じことを､ ここではこうして行っています｡
‫これもかなりシンプルですっきりした印象です｡
‫そんな感じでC-sharpのコードでやりました｡
‫あとはお好みの方法で構いませんが､ ここでは主にジーモで作業します｡
‫XAMLでできることは､ コードビハインドでもできるのですが､ 時にはコードビハインドを使う方がずっと理にかなっているということをお伝えしたかっただけです｡
‫ですから､ 例えば何かをダイナミックに調整したいのであれば､ コードビハインドがより理にかなっていると言えます｡
‫ですから､ Cシャープで実行したり､ CシャープとZemoで調整したりするのは､ 静的なユーザーインターフェースの場合､
‫より理にかなっていると思います｡
‫ところで､ ここにあるようなXAMLファイルを作成するときはいつでも､ 先に進んでこのコードビハインドファイルを作成することになります｡
‫つまり､ 単にこのコードを作成し､ アプリケーションの実行が始まるとそれを実行するのです｡
‫メインウィンドウが呼び出されたら
‫だから､ とにかく完成させる｡
‫そして､ XAMLでそのように行うか､ コードを作成して手動で行うかです｡
‫もちろん､ この幅と横の長さは設定されていないものだ､ と主張することもできます｡
‫まあ､ ここではとても簡単にできるんですけどね｡
‫例えば､ ボタンその横幅を150に設定し､ ボタンその高さを100に設定するといったことが簡単にできるのです｡
‫すると､ それに応じてボタンが調整されます｡
‫そして､ 今見ていただいたように､ 2行に渡っています｡
‫了解です｡
‫それがZemoであり､ コードによる後ろ姿なんですね｡
‫長いビデオでしたが､ 次のビデオでは､ さらに派手でクールなWPFを見ることができます｡
‫では､ 現地でお会いしましょう｡