Más contenido relacionado La actualidad más candente (18) Similar a Metroスタイルで花開くか?XAMLベースのUIフレームワーク (20) Metroスタイルで花開くか?XAMLベースのUIフレームワーク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
7. タッチ対応
VSUG DAY 2012.01.28 7
9. タッチ対応
タッチプログラミング
Windowsフォーム ×(Windows APIを使えば可能)
WPF ○
Silverlight △(未加工のデータのみを報告)
Windows Phone ○
WinRT ○
VSUG DAY 2012.01.28 9
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
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
22. 配置する要素と配置される領域
配置する要素が持つ属性 配置される領域が持つ属性
VerticalAlignment:Center 4行5列のGrid
Margin:10 2行2列目の領域の大きさ
MaxWidth:200 配置要素に合わせて可変
VSUG DAY 2012.01.28 22
25. 配置される領域
Grid
列と行で構成される格子状の領域を定義して配置
StackPanel
水平方向または垂直方向に並べて配置
WrapPanel(WrapGrid)
基本的な配置ルールはStackPanelと同様
領域の端まで行った場合に折り返して表示
VSUG DAY 2012.01.28 25
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
36. タッチ操作の直接性
タッチ操作の直接性
人 マウス(コントローラ) カーソル UI
人 UI
画面は表示デバスでもあり、
操作デバスでもある
クリック感のない操作デバス
状況に合わせて変化する操作デバス
VSUG DAY 2012.01.28 36
40. 例:ListBoxコントロールの定義
これまで
複数の文字列データを上から下に向かって縦方向に
表示し、ユーザーがそれらの中から1つ、もしくは
複数の項目を選択する
項目を表示しきれない場合には、
右側のスクロールバーを使用してスクロールする
XAML UIフレームワーク
複数のデータ(文字列に限らない)を列挙し、ユーザー
がそれらの中から1つ、もしくは複数の項目を選択する
VSUG DAY 2012.01.28 40
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
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
47. 新コントロール
CarouselPanel ListView
CaptureElement ProgressRing
FlipView ToggleSwitch
GridView VariableSizedWrapGrid
JumpViewer WrapGrid
VSUG DAY 2012.01.28 47
51. XAML vs HTML
これまでのプラットフォーム
XAML vs HTML
≒
クラゕントゕプリケーション vs Webゕプリケーション
Metroスタルゕプリ
XAML vs HTML
どちらもクラゕントゕプリケーション
開発言語と開発ツールが主な比較ポント
ほぼスキルセットで選んでよいのでは?
VSUG DAY 2012.01.28 51