UI.Composition でListView/GridView を賑やかす

UI.Composition を使い、スレッドカタログにアニメーション効果を付けた F10 をリリースしました。

F10 image bbs browser
https://www.microsoft.com/store/apps/f10-image-bbs-browser/9nblggh1ntrd

TH2から使えるUI.Composition を使ってGridViewに要らんアニメを付けるテスト たのちい pic.twitter.com/hBs03ltt16

— 佐藤 pnp0a03 (@pnp0a03) 2016年4月17日

このGridView のItemをくるくる回す部分を抜き出した簡単なサンプルプロジェクトを作りました。

CompositionGridView
https://github.com/pnp0a03/CompositionGridView

MSさんのサンプルには面白いのが沢山載ってるんですが、一番単純な…単にList/GridViewものをくるくる回す的な意識の低いサンプルが無くて難儀したためです。

MSさんのUI.Composition Sample
https://github.com/Microsoft/WindowsUIDevLabs

ここでコードぺたくた貼って解説するより読んだほうが早いですよね。

UI.Composition について

Visual Layer
https://msdn.microsoft.com/en-us/windows/uwp/graphics/visual-layer
... この項、概念から具体的な操作例まで満遍なく記述出来ている良記事 MSDNでは少ないタイプです。ｵｽｽﾒ

上の記事を読んでいただければいいんですが、XAML Framework から DirectX Layerの間に一枚あったDWM... Visual Layer, UI Composition を Win10 TH2から使えるようになりました、という話です。

XAMLレイヤから降ってきたUI Element、またはVisual Layer の中で作ったRectangle・Imageに対して、Effect・Animationを掛けることが可能です。

XAML→DirectXのパイプラインに手を突っ込んで描画を捻じ曲げるような感じがあります。


以下に参考になるリンク集等。


Creating Beautiful UX in a Real-World App with Visuals, Animations and Effects
https://channel9.msdn.com/Events/Build/2016/B818
...　GridView/ListView のItem弄る元ネタはこのセッションの途中からﾊﾟｸ参考にしました。Slideだけだと肝心のCodeが見えないので、面倒でも動画を見るのがお勧めです。英語ですが字幕Onにできますので。また、2016年夏予定のRS1で入るUI.Compositionの変更にも触れられています。


MSさんのUI.Composition Sample
https://github.com/Microsoft/WindowsUIDevLabs
... Build 2016 で使っている部分を多く含むサンプル。また、下のDiderikさんサンプルでも参照されているComposition ToolKit ... Visualに対してImageをロードするコード、もここから取得可能です。Visual Layerの中で色々やるには多分必須。
また、Sample はRS1用の新APIを使うものも含んでおり、RS1上のVSでBuildすると見られます（バグ多し）。


Diedrik Krols さんのBlog
https://xamlbrewer.wordpress.com/category/composition-api/
... MSさんの解説・サンプルは基本的にXAML のElementに対してVisualを作って操作する、物がメインなのですが、Diedrik さんのサンプルは珍しく「Visual Layerの中だけで作った」Visualを操作して色々描いてみる、というスタイルです。

robmikh blog
http://blog.robmikh.com/
UI.CompositionTeamの中の人のBlog
特に、Why even use Composition? は読む価値があると思うのでｵｽｽﾒ。DWMにやらせることでApp（UIThread）側の負担ゼロで秒60コマのアニメーション・エフェクトを使えるのがUI.Composition の利点で、XAML上のStoryBoard使ったアニメーションではこれは無理、という大事な話
Why even use Composition? / Images and effects
http://blog.robmikh.com/uwp/composition/2016/04/21/images-and-effects.html