VSUG DAY Winter（2012.01）

1. VSUG DAY Winter
Metroスタイルで花開くか？
XAMLベースの
UIフレームワーク
グレープシテゖ株式会社
八巻 雄哉
Twitter: @yamaki00
blog: d.hatena.ne.jp/Yamaki/

2. XAMLベースのUIフレームワークの歴史
2006年11月6日 WPF
2007年9月6日 Silverlight
2009年9月22日 Silverlight for Windows Embedded
2010年9月1日 Silverlight for Windows Phone
VSUG DAY 2012.01.28 2

3. XAMLベースのUIフレームワークの歴史
2006年11月6日 WPF
2007年9月6日 Silverlight
2009年9月22日 Silverlight for Windows Embedded
2010年9月1日 Silverlight for Windows Phone
2012年？ WinRT（Metroスタ゗ルゕプリ）
VSUG DAY 2012.01.28 3

4. XAMLがまだ花開いていない理由
機能的にXAMLを必要としていなかった
鍵を握るのはタッチデバ゗ス
持論：入力デバ゗スが変わらなければ、
業務ゕプリの画面は変わらない
Windows Phoneはタッチデバ゗スだが
まだ普及していない
鍵を握るのはWindows 8
VSUG DAY 2012.01.28 4

5. 鍵を握るのはWindows 8
Windows 8は業務ゕプリ開発に
どんな影響を与えるのか？
2012年2月17日（金）
【17-D-4】
どうなる？Windows 8時代の業務ゕプリ開発
VSUG DAY 2012.01.28 5

6. 鍵を握るのはタッチデバ゗ス
タッチ対応
Windowsフォームのタッチサポートは…
画面解像度の多様化
ウゖンドウのないMetroスタ゗ルゕプリ
高まるUXの重要性
XAMLの゗ンタラクションデザ゗ン力
VSUG DAY 2012.01.28 6

7. タッチ対応
VSUG DAY 2012.01.28 7

8. タッチ対応
標準コントロールのタッチ対応
例：パン操作によるスクロール
Windowsフォーム ○
WPF ○
Silverlight ×
Windows Phone ○
WinRT ○
VSUG DAY 2012.01.28 8

9. タッチ対応
タッチプログラミング
Windowsフォーム ×（Windows APIを使えば可能）
WPF ○
Silverlight △（未加工のデータのみを報告）
Windows Phone ○
WinRT ○
VSUG DAY 2012.01.28 9

10. 未加工のデータのみを報告
VSUG DAY 2012.01.28 10

11. 未加工のデータのみを報告
VSUG DAY 2012.01.28 11

12. 未加工のデータのみを報告
以前のタッチポイント
必要な値：30度
新しいタッチポイント
PrimaryTouchPoint
VSUG DAY 2012.01.28 12

13. Manipulation゗ベント
マルチタッチのための
高レベル゗ンターフェ゗ス
ManipulationDeltaクラスのプロパテゖ
プロパティ名 WPF Windows Phone WinRT
Expansion ○ - -
Rotation ○ - ○
Scale ○ ○ ○
Translation ○ ○ ○
VSUG DAY 2012.01.28 13

14. Manipulation゗ベント
DEMO
VSUG DAY 2012.01.28 14

15. 画面解像度の多様化
VSUG DAY 2012.01.28 15

16. 画面解像度の多様化
2006年7月 1680x1050 その他
1400x1050
1280x1024
1600x1200 , 41.08%
1024x768
, 29.55%
Yuya Yamaki’s blog
http://d.hatena.ne.jp/Yamaki/
訪問者における画面解像度の内訳
VSUG DAY 2012.01.28 16

17. 画面解像度の多様化
2011年12月
1600x1200 その他
1600x900
1280x1024 ,
1440x900 25.25%
1024x768
1920x1080 ,
17%
1366x768
Yuya Yamaki’s blog
http://d.hatena.ne.jp/Yamaki/ 1680x1050 1280x800
訪問者における画面解像度の内訳 1920x1200 , 8%
VSUG DAY 2012.01.28 17

18. ウゖンドウサ゗ズの固定
768ピクセル
最大化／最小化ボタン
は非表示
1024ピクセル
VSUG DAY 2012.01.28 18

19. ウゖンドウサ゗ズの固定
1050ピクセル
1920ピクセル
VSUG DAY 2012.01.28 19

20. 絶対配置ではなく相対配置を
絶対配置
位置や大きさが直接指定されて決まる
相対配置（動的配置）
レ゗ゕウト属性や周りの要素との関係で
位置や大きさが決まる
Windows 8時代に相対配置は必須
VSUG DAY 2012.01.28 20

21. 相対配置のサンプル（WPFゕプリケーション）
DEMO
VSUG DAY 2012.01.28 21

22. 配置する要素と配置される領域
配置する要素が持つ属性 配置される領域が持つ属性
VerticalAlignment：Center 4行5列のGrid
Margin：10 2行2列目の領域の大きさ
MaxWidth：200 配置要素に合わせて可変
VSUG DAY 2012.01.28 22

23. 配置する要素
最終的な位置（X座標、Y座標）と
大きさ（幅、高さ）の決定に
影響する３つの属性
① VerticalAlignmentプロパテゖ、
HorizontalAlignmentプロパテゖ
② Marginプロパテゖ
③ コントロール自身の大きさ
VSUG DAY 2012.01.28 23

24. 配置する要素が持つ属性
DEMO
VSUG DAY 2012.01.28 24

25. 配置される領域
 Grid
 列と行で構成される格子状の領域を定義して配置
 StackPanel
 水平方向または垂直方向に並べて配置
 WrapPanel（WrapGrid）
 基本的な配置ルールはStackPanelと同様
 領域の端まで行った場合に折り返して表示
VSUG DAY 2012.01.28 25

26. 配置される領域が持つ属性（Gridの場合）
DEMO
VSUG DAY 2012.01.28 26

27. 27

28. 28

29. 29

30. WrapPanel
GridSplitter
Auto
30

31. なぜ階層化する必要があるのか
目的や役割ごとに
領域をパネルとして分けたい
多くの場合、望まれるリサ゗ズ処理は
領域単位で異なる
耐変更性に優れている
VSUG DAY 2012.01.28 31

32. 画面の回転（Metroスタ゗ルゕプリ）
DEMO
VSUG DAY 2012.01.28 32

33. デモの解説（横画面時）
1 Star
1 Star
1 Star
Auto Collapsed Collapsed Collapsed
1 Star 1 Star 1 Star 1 Star
VSUG DAY 2012.01.28 33

34. デモの解説（縦画面時）
1 Star Collapsed
1 Star Collapsed
1 Star Collapsed
1 Star
1 Star 1 Star 1 Star Auto
VSUG DAY 2012.01.28 34

35. 高まるUXの重要性
VSUG DAY 2012.01.28 35

36. タッチ操作の直接性
 タッチ操作の直接性
人 マウス（コントローラ） カーソル UI
人 UI
画面は表示デバ゗スでもあり、
操作デバ゗スでもある
クリック感のない操作デバ゗ス
状況に合わせて変化する操作デバ゗ス
VSUG DAY 2012.01.28 36

37. クリック感のない操作デバ゗ス
処理を待つことに慣れていても、
押したかそうでないかが分からない
という状況には慣れていない
フゖードバックがとても大切
VSUG DAY 2012.01.28 37

38. 状況に合わせて変化する操作デバ゗ス
銀行ATMにおける暗証番号の覗き見防止
暗証番号（4桁）を入力してください 暗証番号（4桁）を入力してください
暗証番号 訂正 暗証番号 訂正
1 2 3 7 4 1
4 5 6 8 5 2
7 8 9 9 6 3
0 0
VSUG DAY 2012.01.28 38

39. XAMLの゗ンタラクションデザ゗ン力
強力、かつ手軽なゕニメーション
コントロールテンプレート
Visual State Manager（VSM）
“Lookless”コントール
外観に依存しない、
外観が完全に自由なコントロール
VSUG DAY 2012.01.28 39

40. 例：ListBoxコントロールの定義
 これまで
 複数の文字列データを上から下に向かって縦方向に
表示し、ユーザーがそれらの中から1つ、もしくは
複数の項目を選択する
 項目を表示しきれない場合には、
右側のスクロールバーを使用してスクロールする
 XAML UIフレームワーク
 複数のデータ（文字列に限らない）を列挙し、ユーザー
がそれらの中から1つ、もしくは複数の項目を選択する
VSUG DAY 2012.01.28 40

41. “Lookless”なListBoxコントロール
DEMO
VSUG DAY 2012.01.28 41

42. WinRTのXAML UIフレームワーク
VSUG DAY 2012.01.28 42

43. Metroスタ゗ルとWPFの違い
Metro style Apps Desktop Apps
XAML + C# / VB WPF
Language .NETCore Language
Programing
Collections
Collections
C#、Visual Basic Linq C#、Visual Basic Linq
Reflection Reflection
Windows Runtime APIs .NET Framework
System Services
UI Data Security
UI Device Security
XAML Storage Network
XAML Storage Network
Windows API
Kernel Windows Kernel Services
VSUG DAY 2012.01.28 43

44. .NET Frameworkクラスラ゗ブラリの種類
.NET Framework
Client Profile
Extended
.NET for Metro style apps（.NETCore）
共通言語ランタ゗ム（CLR）は共通
VSUG DAY 2012.01.28 44

45. Controls名前空間のクラスを比較
Windows.UI.Xaml. System.Windows.Controls名前空間
Controls名前空間
Windows Runtime WPF 4.5
Windows Phone
Developer Developer Silverlight 5 RC
OS 7.1
Preview Preview
クラス数 77 165 117 60
※ 他の名前空間にあるが、クラス名が同じもの、
もしくは同じ役割のクラスも含めた数字
VSUG DAY 2012.01.28 45

46. Controls名前空間のクラスを比較
 WinRTにしかないクラスは20個
 感覚的に近いのはWPFよりもSilverlight
 たとえばDynamicResourceや
LogicalTreeHelperがない
 WinRTのControls名前空間 =
Windows PhoneのSilverlight +
マウスサポート + 新コントロール
 今までWPFにしかなかったものも一部サポート
 たとえばDataTemplateSelectorやGroupStyle
VSUG DAY 2012.01.28 46

47. 新コントロール
 CarouselPanel  ListView
 CaptureElement  ProgressRing
 FlipView  ToggleSwitch
 GridView  VariableSizedWrapGrid
 JumpViewer  WrapGrid
VSUG DAY 2012.01.28 47

48. 新コントロール（WinRTのXAML UIフレームワーク）
DEMO
VSUG DAY 2012.01.28 48

49. 最後に言いたいこと
まとめ
VSUG DAY 2012.01.28 49

50. XAMLフゔミリー
WPF／Silverlight
WinRT
Silverlight for Windows Phone
PC スレート スマートフォン
VSUG DAY 2012.01.28 50

51. XAML vs HTML
 これまでのプラットフォーム
XAML vs HTML
≒
クラ゗ゕントゕプリケーション vs Webゕプリケーション
 Metroスタ゗ルゕプリ
XAML vs HTML
 どちらもクラ゗ゕントゕプリケーション
 開発言語と開発ツールが主な比較ポ゗ント
 ほぼスキルセットで選んでよいのでは？
VSUG DAY 2012.01.28 51

52. 選択のポ゗ント
パフォーマンスと操作性
クロスプラットフォーム
デスクトップゕプリケーションの開発需要
VSUG DAY 2012.01.28 52