‫お帰りなさい｡
‫このビデオでは､ プロパティデータとイベントトリガーについてお話したいと思います｡ なぜなら､
‫これらは､ 外出先で調整したいときにかなり重要だからです｡
‫そこで今回は､ こちらのテキストを調整します｡
‫そこで､ その上にカーソルを合わせると､ 文字の色や見た目が全体的に変化するんです｡
‫それから､ これ｡
‫こんにちは､ 相棒｡
‫見ての通り､ サイズが､ 大きくなっていますね｡
‫つまり､ ここはアニメーションのようなものなんですね｡
‫そして､ このチェックボックスはここに誰かがいて､ このテキストにはノーと書いてあります｡ それをクリックすると､
‫ああ､ もちろん誰かがいるのだから､ 私なのだ､ となります｡
‫ええ､ クリックできますよ｡
‫このビデオで取り上げるのは､ 一般的なユーザーインターフェイスを､
‫その場で調整して､ より優れたユーザー体験を提供したり､ より優れたユーザー体験を作り出すことができるようにするためのものです｡
‫では､ ここで新しいプロジェクトを作成してみましょう｡
‫そして､ プロパティデータとイベントトリガーであるWPA 14 Cと呼ぶことにします｡
‫そこにあったのは､ グリッドとスタックパネルの組み合わせでした｡
‫ということで､ まずはスタックパネルから｡
‫そんな風にパネルを積み重ねる｡
‫そして､ Stackパネルの中に､ グリッドを用意しました｡
‫そして､ その中にテキストブロックがあり､ テキストこんにちは､ 最愛の世界､ または最愛の世界というようなことが書かれています｡
‫そして､ フォントサイズを決めています｡
‫そこで､ それを仮に32に設定することにします｡
‫これを中心に据えてほしい｡
‫だから､ センターと言い､ 縦方向もセンターになるようにします｡
‫だから､ 次の行では､ 垂直方向の配置も中央揃えにして､ このまま閉じると言うことにしています｡
‫そこで､ 私たちは
‫これが私たちのテキストBeloved Worldです｡ 少しサイズを大きくして､ XAMLファイルです｡
‫そこで､ このテキストブロックの中で､ 例えばスタイルを変更することができます｡
‫複数の､ 複数のことができるので､ スタイルトリガーを使うためには､ スタイルが必要なんです｡
‫そこで､ スタイルを作成するためのテキストブロックドットスタイルを追加します｡
‫例えば､ ここにターゲットタイプを追加して､ テキストブロックにする必要があります｡
‫そして､ このスタイルの中に､ セッターとスタイル・トリガーを追加していきます｡
‫まず､ foregroundというプロパティのセッターが必要です｡
‫そこで､ 前景を設定したい､ 前景を変えたい､ 緑に変えたい｡
‫つまり､ 値を緑に設定することになるわけです｡
‫そしてその後､ 今は緑色だけなので､ 実際にそれができるトリガーが欲しいです｡
‫でも､ これをトリガーにしたいので､ スタイルドット・トリガーでやっているんです｡
‫スタイル・トリガー・タグの中で､ さまざまなトリガーを作成することができますが､ ここではマウスオーバーのトリガーを1つだけ作成します｡
‫つまり､ そのトリガーのプロパティはマウスオーバーです｡
‫このテキストにカーソルを合わせるたびに､ このトリガーが実行され､ 値をtrueに設定したいと思います｡
‫そんな風に､ 大文字のTで｡
‫そのため､ トリガータグの中にセッターを作成し､ 一般的に変更されるべきものを作成することができます｡
‫例えば､ 緑色のテキストがあり､ その上にカーソルを置くと赤色になるようにしたいとします｡
‫したがって､ セッターは､ プロパティをforegroundに設定するか､ プロパティforegroundにredの値を設定することになります｡
‫このため､ マウスを乗せると､ このトリガーが実行され､ そのセッターもすべて同様にトリガーされるか､
‫実行されます｡
‫次に追加するセッターは､ セッター・プロパティです｡
‫そして､ ここでunderlineの値に設定したいのは､ テキスト宣言です｡
‫それでは､ このセッターを閉じて､ トリガーが機能するかどうかチェックしてみましょう｡
‫これは単なるテキストなんですね？
‫そして､ 今少し深く､ あるいはもう少し深くコードをチェックしてみましょう｡
‫そこで､ このようなグリッドを用意しました｡
‫Stackパネルにあるのはどれだ？
‫そして､ そこにはこのテキストブロックがあるだけです｡
‫そして､ このハロー愛しき世界というのは､ まさにここにある文章なのです｡
‫フォントサイズがあり､ 中央に配置されています｡
‫これがテキストブロックの一般的なプロパティですね｡
‫しかし､ ここでテキストブロックのスタイルを調整し､ ここにスタイルコンポーネントを追加することができます｡
‫このスタイルタグを使用して､ このスタイルのターゲットタイプはテキストブロックそのものであるべきだと言っています｡ なぜなら､ テキストブロック内のコンポーネントを使用することもできますが､
‫それはもう行き過ぎでしょう｡
‫しかし､ 一般的にはここにセッターがあり､ スタイルを設定します｡
‫これはストレートに行われるものなんですね｡
‫それを誘発する必要はないのです｡
‫しかし､ その後､ 物事を設定するトリガーを含むスタイルトリガーを追加することができ､ このトリガーをトリガーするプロパティが何であるかを指定する必要があります｡
‫ほとんどのオーバーもそうです｡
‫このとき､ セッターを実行して､ foregroundというプロパティをredという値に変更し､
‫text declarationsというプロパティをunderlineという値に設定することができるようにします｡
‫つまり､ ここに複数の異なるセッターを追加して､ このセッターが実行されるたびにトリガーされ､ マウスオーバーがtrueになったときに実行されるようにすることができます｡
‫それでは､ コードを実行して､ これがどのように機能するかを実際に見てみましょう｡
‫ハロー､ 最愛の世界｡
‫そして､ その上にカーソルを合わせます｡
‫そして､ ご覧の通り､ 文字装飾が線上にあります｡
‫そのため､ テキストには下線が引かれ､ 前景色は赤色となります｡
‫つまり､ この色は緑から赤に向かう色なのです｡
‫わかりました｡
‫このように､ スタイルトリガーやトリガー全般をシンプルに進めていくことができるわけです｡
‫そしてもう一つ､ 値がfalseに戻ると､ 元の値に戻るということがわかると思います｡
‫だから､ アンダーラインとリードはもう違うんです｡
‫そのため､ 単に元の値に戻るだけで､ 前景は緑､ 下線は誤りか偽だったということになります｡
‫そのため､ テキスト宣言に下線が引かれていなかった｡
‫次に､ 独自のグリッドを持つ別のテキストブロックを作成します｡
‫だから､ 複数のグリッドを重ねたいんです｡
‫別のラッパーを使ってもよかったのですが､ ここではGridを使うことにして､ その中で｡
‫またテキストブロックがあり､ 今度はHello, buddy, hello, buddyのようなことを言うはずです｡
‫そして今度はその中で､ フォントサイズを24に設定します｡
‫そして､ これを水平方向､ 垂直方向ともに中央揃えにしたいのです｡
‫そして､ このテキストブロックにスタイルを設定する｡
‫そこで､ ここでは複数のことをスタイリングします｡
‫まず､ テキストブロックのスタイルタグをあちこちに追加したい｡
‫スタイルを追加します｡
‫そして､ また対象型のテキストブロックになるんです｡
‫そして､ ここではイベントトリガーを作成することができます｡
‫ここでスタイルトリガーを見ていただいたわけですが､ これは単にトリガーだったのですね｡
‫しかし､ 今度は少し異なるイベントトリガーを実行したいと思います｡
‫まず､ スタイル・ドット・トリガーを作成し､ トリガー・タグを開始します｡ この中に､ ルート化されたイベントが true になったときに実行されるイベント・トリガーを作成し､
‫イベントのルールとしてマウス・エンターを作成します｡
‫このテキストブロックにマウスで入力するたびに､ それがトリガーされます｡
‫だから､ ここでもほとんど同じようなことが言えるんです｡
‫このプロパティは､ マウスオーバー？
‫でも､ トリガーを使っているわけではないんです｡
‫イベントトリガーを使っています｡
‫そして､ その違いを一瞬で実感してください｡
‫さて､ このイベントトリガーで､ イベントトリガー・アクションを作成することができます｡
‫このタグの中に､ このイベントトリガーが発生したときに実行させたいさまざまなアクションを作成します｡
‫マウスで入力するときはいつでも､ イベント・トリガー・アクションを作成して､ このように実行されます｡
‫ストーリーボードを始める｡
‫そこで､ このタグ､ begin storyboardが必要です｡
‫そして､ ストーリーボードを作成し､ ストーリーボードの中でアニメーションを行うことができるようになりました｡
‫つまり､ ダブルアニメーションは､ 特定の時間にわたって実行される共同アニメーションになるわけです｡
‫そして､ ここでは､ 時間､ 0分､ 0秒､ 500ミリ秒としてゼロを表示しています｡
‫500ミリ秒の間に､ これを実行させたいわけです｡
‫そこで､ このアニメーションを実行し､ フォントサイズを変更したいと思います｡
‫しかし､ フォントサイズを変更するためには､ ストーリーボードドットターゲットプロパティを使用する必要があります｡
‫つまり､ ここで見た､ テキストの装飾を変更して下線に設定するセッター・プロパティと非常によく似ています｡
‫ここで､ ストーリーボード､ ターゲット､ プロパティの代わりに､ このアプローチを使う必要があります｡
‫そしてここで､ どのプロパティを変更したいかを言うことができます｡
‫だから､ フォントサイズも変えたいんです｡
‫そして､ 今度は値を指定することができるようになりました｡
‫ここに2つのプロパティがあり､ 値を72に設定しました｡
‫つまり､ ここでは2重のアニメーションを動かしているわけです｡
‫つまり､ ここでも似たようなことが言えるわけです｡
‫値だけ､ あるいは名前だけ違う｡
‫つまり､ これはプロパティだったのですが､ ストーリーボードのターゲットプロパティになりました｡
‫次に､ 下線を引いた値ですが､ 今度は2つのキーワード､ または2つのプロパティを変更する必要があります｡
‫このように､ 小さなアニメーションを作成し､ それを実行することができます｡
‫では､ そのコードを開始して､ 何が起こっているのか見てみましょう｡
‫私たちがそうであること｡
‫こんにちは､ 相棒｡
‫そして､ そこに私たちはいます｡
‫今はご覧のように大きく､ 後戻りもしません｡
‫おいおい､ 普通のサイズに戻せや｡
‫まあ､ 実装してないので私の希望は関係ないんですけどね｡
‫そこで､ 今度はちょっとしたチャレンジです｡
‫もう1つ追加してください｡
‫彼は､ それを実現する､ ここに行ったのです｡
‫そこで､ イベントトリガーを追加します｡
‫Just a little has a little hint.
‫もう､ 全部やらなくていいんだよ｡
‫このコードを作成または再現すればよいのです｡
‫ですから､ ぜひ機能追加をお願いします｡
‫マウスがこのテキストブロックから離れると､ テキストは元のサイズである24に戻り､
‫これを300ミリ秒かけて行います｡
‫だから､ どうぞそれを試してみてください｡
‫わかりました｡
‫そうだといいんですけどね｡
‫そこで､ そのイベントトリガーをコピーすることにします｡
‫すぐ下に貼り付けておきますね｡
‫そして､ マウスエンターではなく､ マウスリーフのようなものを入力します｡
‫そして､ 継続時間は300ミリ秒､ フォントサイズは24の値に設定します｡
‫そして､ それだけです｡
‫つまり､ マウスがテキストブロックから離れるたびに戻るために必要なイベントトリガーはこれです｡
‫では､ もう一度テストしてみましょう｡
‫そこにいるのは､ 私たちです｡
‫こんにちは､ 相棒｡
‫そして今､ 私はそれを去ろう｡
‫そして､ それは元に戻り､ 開始よりも早く戻ってしまうのです｡
‫そうだろ？
‫つまり､ 1つはテキスト中､ またはマウスエンターが500ミリ秒､ マウスリーフが300ミリ秒だったのです｡
‫そのため､ ここではかなりクールなイベントを作ることができ､ ご覧のようにオンザフライで反応することもできます｡
‫だから､ すぐに戻ってくるし､ とてもクールなんだ｡
‫なるほど､ これがイベントトリガーなんですね｡
‫これまで､ トリガー タイプのスタイル トリガーとイベント トリガー タイプのスタイル トリガーを見てきました｡
‫あとはもう一つ､ チェックボックスとその下にちょっとしたテキストを追加して､ 調整したいと思います｡
‫そこで､ こちらはバインディング､ データバインディングを使用します｡
‫以前､ データバインディングを見たことがありますが､ グリッドにあるのではなく､ スタックパネルにあるはずです｡
‫なぜなら､ 2つのことを積み重ねたいからです｡
‫テキストブロックの上にチェックボックスを重ねたいのですが､ どうすればいいですか？
‫そこで､ Stackパネル内にチェックボックスを作成し､ KBという名前を付けることにしました｡
‫こんにちは､ KBはCheckBoxの略です｡
‫そうすると､ チェックボックスの内容は､ Is someone there?
‫クエスチョンマーク
‫スタックパネルでは､ 実際に水平方向と垂直方向のアライメントを調整することができます｡
‫だから､ 縦のアライメントセンターも｡
‫わかりました｡
‫このチェックボックスがトリガーとなり､ 教科書が変更されるはずです｡
‫そこで､ テキストブロックが必要になりますが､ これも水平に揃えることにします｡
‫そこで､ テキストブロックを中央揃えにしてみます｡
‫そして､ テキストブロックのフォントサイズを36に設定し､ テキストブロック内で十分な大きさになるようにします｡
‫そのスタイルを変えて行きたいと思います｡
‫だから､ それはもうトップが見ていることなんです｡
‫そこで､ このテキストブロックのスタイルとスタイルターゲットタイプを使い､ ターゲットタイプを指定します｡
‫ここで同じように､ テキストブロックドットスタイルを作成し､ ここでスタイルタグとスタイルターゲットタイプを作成します｡
‫つまり､ 私が持っているターゲットは､ 私のテキストブロックなのです｡
‫そこで､ テキストブロックを変更したいのです｡
‫どうすればいいのか？
‫まあ､ うちのセッターとね｡
‫だから､ ストレートにセットするんです｡
‫そして､ 今回のトリガーはデータであり､ データドリブントリガーであり､ ここで見たようなイベントドリブントリガーにはなりません｡
‫だからイベントトリガーとか｡
‫しかし､ 今はデータドリブンなトリガーになっています｡
‫つまり､ セッターのプロパティは､ テキストになるプロパティになるわけです｡
‫そして､ テキストの値をnoのように変えたいのです｡
‫そして､ 今度はその下にもう一枚､ 底にセッターを付けます｡
‫つまり､ こちらはforegroundというプロパティを変更することになります｡
‫だから､ 色を赤の値に変えればいいのです｡
‫これで､ すぐに実行されますね｡
‫だから､ スタイルもあるし､ トリガーもまだなかったんです｡
‫だから､ これがセットされることになる｡
‫私たちも同じことができたはずです｡
‫ここでテキストをテキストブロックレベルで設定することができました｡
‫テキストブロックレベルの赤の値を使えばよかったのです｡
‫わかりました｡
‫ただ､ これは別のアプローチで､ これによって次のようなことができるようになることを示したいのです｡
‫だからこの場合､ スタイルドット・トリガーが必要になるんです｡
‫だから､ スタイルトリガーのタグが必要なんだ｡
‫そして､ 今とここで､ データトリガーを作成します｡
‫このように､ プロパティに基づく通常のトリガーを使用しています｡
‫次に､ イベントドリブントリガーですが､ これはイベントを根こそぎ実行するものです｡
‫だから､ ほとんど同じことなんです｡
‫でも､ この場合､ マウスオーバーとマウスエンターですよね｡
‫しかし､ この場合はプロパティがトリガーになっています｡
‫しかも今回は実際の出来事で､ これからデータ化されるわけです｡
‫つまり､ 3種類のトリガーがあるわけですね｡
‫このデータトリガーで､ 物事を決めていくわけです｡
‫しかし､ 今度はトリガーを実行するために､ この場合はバインディングを使う必要があるのです｡
‫そこで､ CBという要素名をバインドすることにします｡
‫チェックボックスとCBのhelloです｡
‫is checkedのパスがあるはずなので､ is checkedの値と確認します｡
‫その値をtrueにします｡
‫さて､ もし私がどうなるか｡
‫そのチェックボックスにチェックを入れる｡
‫まあ､ いくつかのセッターは実行されるべきなので､ textのプロパティを持つセッターは実行され､ その値は次のように設定されるはずです｡
‫もちろんです｡
‫さて､ 次に追加するセクターは､ foregroundのプロパティを持つことになります｡
‫つまり､ foregroundプロパティをgreenの値に変更する､ それだけです｡
‫これがデータのトリガーになるわけです｡
‫では､ それを実行してみましょう｡
‫そこで､ 私たちは
‫マウスオーバーまたはルートイベントに基づいて､ 2つのトリガーを設定します｡
‫そして､ そのチェックボックスにチェックを入れると､ レッツゴーです｡
‫ブームです｡
‫と､ もちろん書いてある｡
‫つまり､ チェックボックスがトリガーとなり､ イベントが発生するわけではありません｡
‫だから､ これはチェックのイベントではない｡
‫その背景となるデータに基づいているのです｡
‫つまり､ KBのis checkedの値にバインドしているわけです｡
‫こんにちは｡
‫だから､ ここのチェックボックスの｡
‫だから､ やっぱり､ 大事なんですね｡
‫つまり､ チェックしたりチェックされたりするとイベントが開始されることが分かっているので､ それと同じことをチェックするたびに発生するイベントで行うことができたのです｡
‫だからチェックが変わったとか､ そういうことですよね？
‫だから､ でも今回はデータに基づいてやっているんです｡
‫だから､ これを押すたびに､ これが実行されることになる｡
‫わかりました｡
‫このように､ 3種類の異なるトリガーと異なるタイプで､ UIにかなりクールな変化をもたらすことができるのです｡
‫素晴らしい｡
‫そのあたりをご理解いただけたでしょうか｡
‫データトリガーを追加して試してみることをお勧めします｡
‫テキストで何かをチェックする｡
‫だから､ 誰かが特定のテキストを入力したら､ 何かを変更する必要があるとか､ そういうことです｡
‫だから､ XAMLを使えば､ コードの後ろを触らずにいろいろなことができる｡
‫よし､ いいぞ｡
‫それでは､ 次のビデオでお会いしましょう｡