2016年7月の.NETラボ勉強会スライド

5. ちょっとだけ、昔話
アプリケーションの画面は
どうやって定義していましたか？

6. 色々あって
最近はあまり使われなくなりましたが
Webで動きのある画面を作ろうと思えば、
Flashで、という時代がありました。

7. いや・・・言いたいことは色々ありますが、
画面定義の話に戻りましょう。

8. タイムラインという
フレーム毎に画面を定義していました。
動画編集の考え方に近いアプローチ

9. 当時のFlashは
アニメーション作成用途が強かったので、
アニメーションを作成しやすい方法。

10. 画面定義をテキストで表現できなかったので、
差分が取れない。
・・・バイナリを解析できれば差分も・・・

11. 余談：AS2時代は
それぞれのオブジェクトに
スクリプトを記述できたので、
作り方によっては更にカオスなことに・・・

12. その後、AS3や、
Adobe Flexの登場で
この辺が変化していくのですが、
ひとまず置いておいて・・・

13. this.textBox1 = new System.Windows.Forms.TextBox();
this.SuspendLayout();
//
// button1
//
this.button1.Location = new System.Drawing.Point(33, 109);
this.button1.Name = "button1";
this.button1.Size = new System.Drawing.Size(75, 23);

14. プログラムコードを
解析してデザイナーに表示。
メリット：差分が見れる
デメリット：コードからデザインは把握し辛い・・・

15. ご存知、XMLタグで画面を定義する方法。
XAMLもこの発想。
Flashにもmxmlというのがあった・・・
メリット：差分が取れる
：プログラミングの知識無しに扱える
デメリット：アニメーションなど複雑なものは
定義できない。

16. デメリットと書いたが、
アニメーションなどを定義できないことで、
逆にシンプルで良い気がする。
デザイナーにもプログラマーにも触れるという
ラインのバラスを上手く取っている？

17. XAML登場！！
スライド15枚めにして
(Zガンダムよりは早い当社比)
XMLで画面を定義する方式。
アニメーションや、
コントロールの雛形も定義可能
この辺は良し悪し

18. タグで定義できるという点では
HTMLに近いが、
どちらかというとWindows Formsの
コード→デザイナ
を発展させた
コード→XAML→デザイナ
という構造（後述）。

19. デザイナーとプログラマーの
分業が成立する前提で見るか？
デザイナーが主に使うのか？
プログラマーが主に使うのか？

20. 分業できていることが多いのはHTML
デザイナーメインなFlashタイムライン
プログラマーメインなWindows Forms

22. eXtensible Application Markup Language
Application? Avalon?

23. <Button />
<Button></Button>

24. <ButtonText=“プロパティ”/>

25. <Button>ボタン</Button>
<ButtonText=“ボタン” />
コレはイコール。
じゃあ入れ子にした部分は、Textプロパティに該当？

26. <Button><Image src=“hoge.jpg”></Button>
これは？
入れ子の部分はContentPropertyとして
扱われる

27. // Buttonの親クラスの記述
[Composable(typeof(IContentControlFactory), CompositionT
[ContentProperty(Name = "Content")]
[MarshalingBehavior(MarshalingType.Agile)]
// Objectを受け入れる。結構広い間口
public System.Object Content { get; set; }

28. <Image Source="Assets/LockScreenLogo.png"/>
これUri型なのに、文字列で指定できるの？
型コンバーターという仕組みが、
いい感じに変換してくれる。

29. XAMLを拡張する記法
基本的に{}に囲まれたやつ
Text="{x:BindViewModel.Name, Mode=TwoWay}"

30. XAMLを拡張する記法
基本的に{}に囲まれたやつ
Text="{x:BindViewModel.Name, Mode=TwoWay}“
プラットフォーム毎に異なる仕様だが、
基本的に同じ機能があることが多い。
上のx:BindはUWPから追加されたもの。

31. 画面を定義するXAMLには
コードビハインドとしてロジックを記述するための
プログラムファイルがある。
例：MainPage.xamlとMainPage.xaml.cs
コードビハインドの中間
MainPage.g.cs MainPage.g.i.cs

32. XAMLが元々、プログラムコードを、
見た目(XAML)とロジック(プログラムコード)
に分離するためのものであるため、
プログラムの画面を定義する部分を、
XML形式で表現できるようにしたもの。
この辺がHTMLとの大きな違い。

33. <ButtonText= “hoge”/>
以下は等価
Button btn = new Button();
btn.Content = "hoge";
mainGrid.Children.Add(btn);

34. XAML自体は、こんな感じで、
シンプル。
XAMLを使って
コントロール、アニメーション、3D…など
様々なものを表現するので複雑に見える。

36. プロパティで変えれるパターン
テンプレート、スタイルで変えるパターン
（こっちがちょっとわかりづらい）
ListViewの場合
ListView自体のテンプレート
ListViewで繰り返し表示されるデータのテンプレート

37. リスト表示されるアイテムのテンプレートListView自体のテンプレート

38. ボタンの場合
→テンプレートの編集

39. イベントハンドラー
XAMLからコードビハインドのメソッドを呼び出す

40. プログラミングのプロパティと
XAMLのプロパティを紐付ける
疎結合
This.textbox.text = “ほげ”;
が不要になる。
XAMLのプロパティ同士も紐付けれる

41. デザインに必要なら、
条件分岐のような判定もできるようにする。
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>

42. アニメーションもXAMLで定義可能
編集はタイムライン方式（Adobe Flashもそう）
アニメーションもXAMLで表現

43. ・・・まぁ、読むのも難しいし、手打ちだと書けないよね・・・
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransf
<EasingDoubleKeyFrame KeyTime="0"Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1"Value="208"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransf
<EasingDoubleKeyFrame KeyTime="0"Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1"Value="-156"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

45. 色々なことができるマークアップ
これまでのUI表現の歴史をうまく取り込んでいる