2016年4月19日火曜日

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

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

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


この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



2016年4月11日月曜日

Build2016 API Readiness

(訂正 2016/04/29... RS1以降のAPI を使うには、NuGet Package Microsoft.NETCore.UniversalWindowsPlatform を手動で5.1.0に更新することが必要なようです。既定の5.0.0だとBuildできない、通らないものが多いです。← 14332 Releaseと同時だったので今となってはよくわからない)

build 2016で説明されていた新機能が、現状のWin10 RS1 14295 SDKにどれくらい入ってるのか…すぐ使えるのか、ビルドは出来るけど動作怪しいのか、全く入ってないのか…を自分で確認したもの表です。

(個人的に興味があるもの…UWP App関連+Centennialだけ見ているので、ほかの要素は全くノーチェックです)

Item
説明
現状
FullTrustProcessLauncher

UWP App Package内のWin32 AppUWP Appから起動する…という謎のAPI
今まででは考えられないタイプのやつ
多分Centennialで作ったPackage
Build不可
このAPI Callに必要なPacakageManifest内のCapabilitySchemaに入ってないので全く無理
AccessKey
XAMLのショートカットキー革命
動作する 超便利
TrySetDisableLayoutScaling
これを呼んだAppScalingDisableするらしいけど
Callは出来るが常にFalse(失敗) 効果自体謎ではあるのでよくわからん
ExtendedExecutionBackgroundTask
Build2016で説明のあったやつ
Diffと、MSDN HelpDocAvailabilityを見る限りまだ準備されていない
CommandBarの自動オーバーフロー
幅が足りなくなると自動的に今までのSubMenu見たいになるやつ(伝わる?)
既定で動作する ただ一部Propertyは現在XAMLで指定するとRuntimeに落ちる事がある
Pivot

HeaderOverflowModeをセットするとアプリ起動時に死ぬ
これ以外にも14295 SDKBuildしたPivotは、もともとXAMLPivotItemを指定していない場合CodeからPivotItemを追加できない等動作が不安定なので注意
ImageAnimated GIF Support

これだけはちゃんと入ってる SourceにアニメGIF指定するとXAMLデザイナ上でアニメGIFが動く
だが、ウェイトサポートが適当で正しく再生されないAnimated GIF が多い 正しい再生を行いたい場合はGifImageSourceを使うのがお勧め
Ink

まだ見れてないです (ペン対応PC持ってないので出来る事が少ない)
UI.Composition

UI.CompositionについてはGraphicsTeamが自前で持ってるSample TreeGithubにある こっち見るといいです
Project Rome
IPC的な仕組み
CortanaがDevice間でデータを同期するのに使ってるのがこの仕組み わかりづらいけどうまく使うと良いものになりそう
まだ見れてないです
Map

まだ見れてないです
App Extension
後からPackageに新しいバイナリを追加できる仕組み
所謂DLC的なやつ
まだ見れてないです
UWP on XBOX

実機が無いので出来ることがあまり無い…


SDKとは特に関係無いけどBuildで出た新アイテム等

Centennial
Preview版と、そこそこ詳しいドキュメントが出た
Win10 Enterprise IP 14316が必要です。Azure VM上のものでも大丈夫です。
Preview版自体は動作条件がハードル高いので実際に試している人は凄く少ないと思う
重要なのはある程度詳しいドキュメントが出たことで、下のリンクのBehind the scenes を読めばこの手のもの知っている人には何やってるのか大体わかるようにはなったと思います

現状わからない(興味ある)のは、実際のパッケージのサイズがどれくらいになるか(VFSFont等肥大化しそうな部分が多々ある)
Store Update
 

Availabilityという点では今回一番優秀なのがこのStore Update
かなりの機能が既に実装済みで即利用可能になっている 素晴らしい Documentationも良くできている
新しいベータテストのための仕組み TestFlight Packageは、今までできなかった「本筋のAppPackageをストア上に維持したまま、登録したテスターにテストパッケージを自動更新でDeploy」が可能になっている 凄い 即役に立ちそう
BuildSession動画を見ると判るけど、どうもMSさんは自分のSteam Storeを持ちたいみたい
HoloLens
HoloLensのフラグ立てたアプリは既に受け付け開始されている (F10はこれで出した)
※ HoloLens emulator でAppを動かすには、AppのTarget(.csprojのPropertyページで設定するやつ)の「最小バージョン」を10.0.10240.0 に設定する必要があります。10586だとエミュレータがメニューに出てきません。
XAMLTreeView
MSGitHub UWP SampleDev Branchに「XamlTreeView」サンプルがある Build・実行にはRS1環境が必要 実体はVC++製のControl RS1の新Controlを使っているのでTH2では使えないです
14316 DesktopThemeSettingsから変更可能になった件
App側のTheme設定が「Default」だった場合、Systemの変更が即反映される・・・・はずなんだけど
F10でテストすると、部分的に適用される所・されない所がありバラバラ うまく動いていない もちろんAppを一旦終了・再起動すればOKではある
XAMLEdit&Continue
Buildのデモ、超便利そうでしたよね すぐ使いたい!使わせれ!!!
でもこれ、現状使えるのは
Win10 RS1 14295以降+VisualStudio vNext "15"
だけです。VS2015Update2はムリ。






おまけ

TH2 vs RS1 API差分一覧 (MSDNへのリンク付き…まだ文書無い場合は404です)
何気に便利

http://ddlgsite.azurewebsites.net/ApiPeek/win10.10586.to.win10.14291.diff.html

元ネタは
https://github.com/martinsuchan/apipeek

おまけ2

MSDN のAPI Referenceの内、"10.0.14295.0から" という文言が付いているもの検索
(変更後少し経つとIndexingが走ってこういう検索ができるようになる 04/11現在はOKです)

https://social.msdn.microsoft.com/search/en-US/windows?query=%2210.0.14295.0%22&refinement=183%2C117&ac=4