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

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

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

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

 .NET Framework
 Client Profile
 Extended
 .NET for Metro style apps（.NETCore）
 共通言語ランタイム（CLR）は共通
4

 Windows Runtime
 Windows.UI.Xaml.Controls名前空間
 .NET Framework
 System.Windows.Controls名前空間
5

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
※ 他の名前空間にあるが、クラス名が同じもの、
もしくは同じ役割のクラスも含めた数字

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

WPF／SilverlightのXAMLを
理解している人は、
その差分を把握するだけで
MetroスタイルのXAML
（あくまでXAMLだけ）を
習得できる？
9

 新コントロール
 組み込みのアニメーション
 タッチ操作
 その他の差異と注意点
10

 CarouselPanel
 CaptureElement
 FlipView
 GridView
 JumpViewer
 ProgressRing
 ToggleSwitch
 VariableSizedWrapGrid
 WrapGrid
12

 ComboBoxの既定のItemsPanelTemplate
で使用されているパネル
 ドラムロール式のスクロールを実現
13

 通常、カメラのキャプチャは
CameraCaptureUI（Windows.Media.Capture名前空間）
を使用する
 ただし、これだと既定のキャプチャ画面と
なってしまい、カスタマイズできない
14

 自分の作っている画面にキャプチャ機能を
組み込みたいときにCaptureElementを使用
 Package.appxmanifestのCapabilitiesで
Webcamを有効にするのを忘れずに
15

 同時に1つ項目だけを表示するItemsControl
 おそらくフォトビューワーなどの
使用を想定
16

 ListViewBaseから派生する兄弟コントロール
 ItemsPanelTemplateが、
VirtualizingStackPanelになっているか、
WrapGridになっているかが大きな違い
17

 ItemsPanelTemplateでのみ使用可能な
WrapPanel
 VirtualizingPanelとなっておりUIの仮想化が有効
18
WrapGrid WrapPanel
HorizontalChildrenAlignment ✓ -
ItemHeight ✓ ✓
ItemWidth ✓ ✓
MaximumRowsOrColumns ✓ -
Orientation ✓ ✓
VerticalChildrenAlignment ✓ -

 JumpView（グループ一覧）とContentView
（項目）を切り替えて表示
19

 semantic zoomを実現するための
コントロール
 ピンチイン操作でJumpViewを表示
 両Viewには、IJumpViewerInfoインター
フェイスを実装したUI要素が必要
 ListViewかGridView
 データソースは
IGroupInfoインターフェイスの実装が必要
20

 使いどころは
ProgressBarのIsIndeterminate = True
とほぼ同じ
 表示の有効／無効を切り替える
IsActiveプロパティのみの、
シンプルなコントロール
21

 Silverlight for Windows Phone Toolkitの
ToggleSwitch（Microsoft.Phone.Controls）
と似ているが、全く同じではない
 IsOnプロパティ（Windows.UI.Xaml.Controls ）
 IsCheckedプロパティ（Microsoft.Phone.Controls）
 オン時、オフ時の文字列を
プロパティで変更可能
 OnContentプロパティ
 OffContentプロパティ
22

 WinRT
 Silverlight
for
Windows Phone
Toolkit
23

 子要素の添付プロパティとして
ColumnSpan、RowSpanを設定できる
WrapGrid
24

 Metroスタイルアプリのルック＆フィール
に対して一貫性のあるトランジション
アニメーションが簡単に適用できる
 テーマトランジション
 テーマアニメーション
26

 適用先が限定されており、実行のタイミ
ングは決められている
 AddDeleteThemeTransition
 ContentThemeTransition
 EntranceThemeTransition
 ReorderThemeTransition
 RepositionThemeTransition
27

 UIElement.Transitionsプロパティ
 Panel.ChildrenTransitionsプロパティ
 ItemsControl.ItemContainerTransitions
プロパティ
 ContentControl.ContentTransitionsプロ
パティ
28


従来のアニメーションの延長にあり、
任意のタイミングで実行できる

アニメーション動作は決められており、
最小限の設定で使用可能

CrossSlideBackThemeAnimation

CrossSlideHintThemeAnimation

DragItemThemeAnimation

DragOverThemeAnimation

DropTargetItemThemeAnimation

FadeInThemeAnimation

FadeOutThemeAnimation

PopInThemeAnimation

PopOutThemeAnimation

RepositionThemeAnimation

SelectDownThemeAnimation

SelectUpThemeAnimation

SplitCloseThemeAnimation

SplitOpenThemeAnimation

TapDownThemeAnimation
 TapUpThemeAnimation

イベント
WinRT DP WPF 4.5 DP
Silverlight 5
RC
Windows
Phone OS 7.1
ManipulationStarting ○ ○ × ×
ManipulationStarted ○ ○ × ○
ManipulationDelta ○ ○ × ○
ManipulationInertiaStarted ○ ○ × ×
ManipulationBoundaryFeedback × ○ × ×
ManipulationCompleted ○ ○ × ○
31
 基本的には同じだが細かい部分で違いアリ
 WPFと違い、何もしなくても慣性がつく

 WPFではUIElementに
IsManipulationEnabledプロパティがあっ
たが、これはない
 代わりにUIElementにManipulationMode
プロパティがあるので、これをAllに設定
しよう（実はこれはWPF 4 Beta 1の時の
実装と同じ）
32

 WPFのScrollViewerにあった
 PanningModeプロパティ
 VerticalScrollModeプロパティと
HorizontalScrollModeプロパティで
設定するようになり、分かりやすくなった
 PanningDecelerationプロパティ、
PanningRatioプロパティ
 スクロールの移動量や慣性の減速度をデフォルト
から変えるのは好ましくないから不要？
33

 VerticalSnapPointsTypeプロパティを
“Mandatory”に設定することで、UI要素単
位でスクロールがスナップする
 スナップする位置は
VerticalSnapPointsAlignmentプロパティ
で設定可能
 デフォルトで
ピンチ操作によるズームにも対応
34

 Silverlightに存在する以下のメンバーは
サポートされていない
 BindsDirectlyToSourceプロパティ
 FallbackValueプロパティ
 Validation関連のプロパティ
 StringFormatプロパティ
 TargetNullValueプロパティ
 UpdateSourceTriggerプロパティ
36

 x:Boolean
 x:String
 x:Double
 x:Int32
37

 Developer Previewでは不具合によって
普通に動かない部分がある
 特にデータバインディング系
 SDKのサンプルでは
回避策を使って対応されている
 その方法を参考にするか、
Beta版を待つのでも良いと思う
38

• WPF
• Silverlight
• Silverlight for Windows Phone
• Silverlight for Windows Embedded
 のいずれかのXAMLを経験している人は、
• Metroスタイルアプリケーション
 のXAMLも恐れるに足らず
39

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

More Related Content

What's hot

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

More from Yuya Yamaki