Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 2
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 3
Metro style Apps
XAML + C# / VB
Desktop Apps
WPF
Windows Kernel Services
Windows Runtim...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 .NET Framework
 Client Profile
 Extended
 .NET for Metro style apps(.NETCore)
 共通言語...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 Windows Runtime
 Windows.UI.Xaml.Controls名前空間
 .NET Framework
 System.Windows.Contro...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
Windows.UI.X
aml.Controls
名前空間
System.Windows.Controls名前空間
Windows
Runtime
Developer
Prev...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 WinRTにしかないクラスは20個
 感覚的に近いのはWPFよりもSilverlight
 たとえばDynamicResourceや
LogicalTreeHelperが...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 8
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
WPF/SilverlightのXAMLを
理解している人は、
その差分を把握するだけで
MetroスタイルのXAML
(あくまでXAMLだけ)を
習得できる?
9
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 新コントロール
 組み込みのアニメーション
 タッチ操作
 その他の差異と注意点
10
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 11
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 CarouselPanel
 CaptureElement
 FlipView
 GridView
 JumpViewer
 ProgressRing
 Togg...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 ComboBoxの既定のItemsPanelTemplate
で使用されているパネル
 ドラムロール式のスクロールを実現
13
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 通常、カメラのキャプチャは
CameraCaptureUI(Windows.Media.Capture名前空間)
を使用する
 ただし、これだと既定のキャプチャ画面と
なっ...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 自分の作っている画面にキャプチャ機能を
組み込みたいときにCaptureElementを使用
 Package.appxmanifestのCapabilitiesで
Web...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 同時に1つ項目だけを表示するItemsControl
 おそらくフォトビューワーなどの
使用を想定
16
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 ListViewBaseから派生する兄弟コントロール
 ItemsPanelTemplateが、
VirtualizingStackPanelになっているか、
WrapGr...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 ItemsPanelTemplateでのみ使用可能な
WrapPanel
 VirtualizingPanelとなっておりUIの仮想化が有効
18
WrapGrid Wra...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 JumpView(グループ一覧)とContentView
(項目)を切り替えて表示
19
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 semantic zoomを実現するための
コントロール
 ピンチイン操作でJumpViewを表示
 両Viewには、IJumpViewerInfoインター
フェイスを実...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 使いどころは
ProgressBarのIsIndeterminate = True
とほぼ同じ
 表示の有効/無効を切り替える
IsActiveプロパティのみの、
シンプル...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 Silverlight for Windows Phone Toolkitの
ToggleSwitch(Microsoft.Phone.Controls)
と似ているが、全く...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 WinRT
 Silverlight
for
Windows Phone
Toolkit
23
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 子要素の添付プロパティとして
ColumnSpan、RowSpanを設定できる
WrapGrid
24
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 25
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 Metroスタイルアプリのルック&フィール
に対して一貫性のあるトランジション
アニメーションが簡単に適用できる
 テーマトランジション
 テーマアニメーション
26
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 適用先が限定されており、実行のタイミ
ングは決められている
 AddDeleteThemeTransition
 ContentThemeTransition
 Ent...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 UIElement.Transitionsプロパティ
 Panel.ChildrenTransitionsプロパティ
 ItemsControl.ItemContaine...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 29

従来のアニメーションの延長にあり、
任意のタイミングで実行できる

アニメーション動作は決められており、
最小限の設定で使用可能

CrossSlideBackTh...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 30
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
イベント
WinRT DP WPF 4.5 DP
Silverlight 5
RC
Windows
Phone OS 7.1
ManipulationStarting ○ ○ ×...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 WPFではUIElementに
IsManipulationEnabledプロパティがあっ
たが、これはない
 代わりにUIElementにManipulationMode...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 WPFのScrollViewerにあった
 PanningModeプロパティ
 VerticalScrollModeプロパティと
HorizontalScrollMode...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 VerticalSnapPointsTypeプロパティを
“Mandatory”に設定することで、UI要素単
位でスクロールがスナップする
 スナップする位置は
Verti...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 35
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 Silverlightに存在する以下のメンバーは
サポートされていない
 BindsDirectlyToSourceプロパティ
 FallbackValueプロパティ
...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 x:Boolean
 x:String
 x:Double
 x:Int32
37
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
 Developer Previewでは不具合によって
普通に動かない部分がある
 特にデータバインディング系
 SDKのサンプルでは
回避策を使って対応されている
 そ...
わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
• WPF
• Silverlight
• Silverlight for Windows Phone
• Silverlight for Windows Embedded
 ...
40
Upcoming SlideShare
Loading in …5
×

WPF/Silverlight視点で視る MetroスタイルのXAML

7,152 views

Published on

わんくま同盟 東京勉強会 #66

Published in: Technology

WPF/Silverlight視点で視る MetroスタイルのXAML

  1. 1. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66
  2. 2. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 2
  3. 3. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 3 Metro style Apps XAML + C# / VB Desktop Apps WPF Windows Kernel Services Windows Runtime APIs SystemServicesKernel Windows API XAML Storage Network UI SecurityDevice .NET Framework XAML Storage Network UI SecurityData Reflection Linq Collections Reflection Linq Collections Language C#、Visual Basic Language C#、Visual Basic .NETCore Programing
  4. 4. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  .NET Framework  Client Profile  Extended  .NET for Metro style apps(.NETCore)  共通言語ランタイム(CLR)は共通 4
  5. 5. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  Windows Runtime  Windows.UI.Xaml.Controls名前空間  .NET Framework  System.Windows.Controls名前空間 5
  6. 6. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 Windows.UI.X aml.Controls 名前空間 System.Windows.Controls名前空間 Windows Runtime Developer Preview WPF 4.5 Developer Preview Silverlight 5 RC Windows Phone OS 7.1 クラス数 77 165 117 60 6 ※ 他の名前空間にあるが、クラス名が同じもの、 もしくは同じ役割のクラスも含めた数字
  7. 7. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  WinRTにしかないクラスは20個  感覚的に近いのはWPFよりもSilverlight  たとえばDynamicResourceや LogicalTreeHelperがない  WinRTのControls名前空間 = Windows PhoneのSilverlight + マウスサポート + 新コントロール  今までWPFにしかなかったものも一部サポート  たとえばDataTemplateSelectorやGroupStyle 7
  8. 8. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 8
  9. 9. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 WPF/SilverlightのXAMLを 理解している人は、 その差分を把握するだけで MetroスタイルのXAML (あくまでXAMLだけ)を 習得できる? 9
  10. 10. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  新コントロール  組み込みのアニメーション  タッチ操作  その他の差異と注意点 10
  11. 11. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 11
  12. 12. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  CarouselPanel  CaptureElement  FlipView  GridView  JumpViewer  ProgressRing  ToggleSwitch  VariableSizedWrapGrid  WrapGrid 12
  13. 13. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  ComboBoxの既定のItemsPanelTemplate で使用されているパネル  ドラムロール式のスクロールを実現 13
  14. 14. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  通常、カメラのキャプチャは CameraCaptureUI(Windows.Media.Capture名前空間) を使用する  ただし、これだと既定のキャプチャ画面と なってしまい、カスタマイズできない 14
  15. 15. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  自分の作っている画面にキャプチャ機能を 組み込みたいときにCaptureElementを使用  Package.appxmanifestのCapabilitiesで Webcamを有効にするのを忘れずに 15
  16. 16. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  同時に1つ項目だけを表示するItemsControl  おそらくフォトビューワーなどの 使用を想定 16
  17. 17. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  ListViewBaseから派生する兄弟コントロール  ItemsPanelTemplateが、 VirtualizingStackPanelになっているか、 WrapGridになっているかが大きな違い 17
  18. 18. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  ItemsPanelTemplateでのみ使用可能な WrapPanel  VirtualizingPanelとなっておりUIの仮想化が有効 18 WrapGrid WrapPanel HorizontalChildrenAlignment ✓ - ItemHeight ✓ ✓ ItemWidth ✓ ✓ MaximumRowsOrColumns ✓ - Orientation ✓ ✓ VerticalChildrenAlignment ✓ -
  19. 19. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  JumpView(グループ一覧)とContentView (項目)を切り替えて表示 19
  20. 20. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  semantic zoomを実現するための コントロール  ピンチイン操作でJumpViewを表示  両Viewには、IJumpViewerInfoインター フェイスを実装したUI要素が必要  ListViewかGridView  データソースは IGroupInfoインターフェイスの実装が必要 20
  21. 21. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  使いどころは ProgressBarのIsIndeterminate = True とほぼ同じ  表示の有効/無効を切り替える IsActiveプロパティのみの、 シンプルなコントロール 21
  22. 22. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  Silverlight for Windows Phone Toolkitの ToggleSwitch(Microsoft.Phone.Controls) と似ているが、全く同じではない  IsOnプロパティ(Windows.UI.Xaml.Controls )  IsCheckedプロパティ(Microsoft.Phone.Controls)  オン時、オフ時の文字列を プロパティで変更可能  OnContentプロパティ  OffContentプロパティ 22
  23. 23. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  WinRT  Silverlight for Windows Phone Toolkit 23
  24. 24. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  子要素の添付プロパティとして ColumnSpan、RowSpanを設定できる WrapGrid 24
  25. 25. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 25
  26. 26. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  Metroスタイルアプリのルック&フィール に対して一貫性のあるトランジション アニメーションが簡単に適用できる  テーマトランジション  テーマアニメーション 26
  27. 27. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  適用先が限定されており、実行のタイミ ングは決められている  AddDeleteThemeTransition  ContentThemeTransition  EntranceThemeTransition  ReorderThemeTransition  RepositionThemeTransition 27
  28. 28. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  UIElement.Transitionsプロパティ  Panel.ChildrenTransitionsプロパティ  ItemsControl.ItemContainerTransitions プロパティ  ContentControl.ContentTransitionsプロ パティ 28
  29. 29. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 29  従来のアニメーションの延長にあり、 任意のタイミングで実行できる  アニメーション動作は決められており、 最小限の設定で使用可能  CrossSlideBackThemeAnimation  CrossSlideHintThemeAnimation  DragItemThemeAnimation  DragOverThemeAnimation  DropTargetItemThemeAnimation  FadeInThemeAnimation  FadeOutThemeAnimation  PopInThemeAnimation  PopOutThemeAnimation  RepositionThemeAnimation  SelectDownThemeAnimation  SelectUpThemeAnimation  SplitCloseThemeAnimation  SplitOpenThemeAnimation  TapDownThemeAnimation  TapUpThemeAnimation
  30. 30. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 30
  31. 31. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 イベント WinRT DP WPF 4.5 DP Silverlight 5 RC Windows Phone OS 7.1 ManipulationStarting ○ ○ × × ManipulationStarted ○ ○ × ○ ManipulationDelta ○ ○ × ○ ManipulationInertiaStarted ○ ○ × × ManipulationBoundaryFeedback × ○ × × ManipulationCompleted ○ ○ × ○ 31  基本的には同じだが細かい部分で違いアリ  WPFと違い、何もしなくても慣性がつく
  32. 32. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  WPFではUIElementに IsManipulationEnabledプロパティがあっ たが、これはない  代わりにUIElementにManipulationMode プロパティがあるので、これをAllに設定 しよう(実はこれはWPF 4 Beta 1の時の 実装と同じ) 32
  33. 33. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  WPFのScrollViewerにあった  PanningModeプロパティ  VerticalScrollModeプロパティと HorizontalScrollModeプロパティで 設定するようになり、分かりやすくなった  PanningDecelerationプロパティ、 PanningRatioプロパティ  スクロールの移動量や慣性の減速度をデフォルト から変えるのは好ましくないから不要? 33
  34. 34. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  VerticalSnapPointsTypeプロパティを “Mandatory”に設定することで、UI要素単 位でスクロールがスナップする  スナップする位置は VerticalSnapPointsAlignmentプロパティ で設定可能  デフォルトで ピンチ操作によるズームにも対応 34
  35. 35. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 35
  36. 36. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  Silverlightに存在する以下のメンバーは サポートされていない  BindsDirectlyToSourceプロパティ  FallbackValueプロパティ  Validation関連のプロパティ  StringFormatプロパティ  TargetNullValueプロパティ  UpdateSourceTriggerプロパティ 36
  37. 37. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  x:Boolean  x:String  x:Double  x:Int32 37
  38. 38. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66  Developer Previewでは不具合によって 普通に動かない部分がある  特にデータバインディング系  SDKのサンプルでは 回避策を使って対応されている  その方法を参考にするか、 Beta版を待つのでも良いと思う 38
  39. 39. わんくま同盟 東京勉強会 #56わんくま同盟 東京勉強会 #66 • WPF • Silverlight • Silverlight for Windows Phone • Silverlight for Windows Embedded  のいずれかのXAMLを経験している人は、 • Metroスタイルアプリケーション  のXAMLも恐れるに足らず 39
  40. 40. 40

×