Windows 10時代のUWPは画面幅を中心にUIを考えろ。というガイドラインですが、やっぱ電話は片手で、PCは広い画面で。でもContinuum for PhoneしたときはPCみたいな広い画面で使いたいわけです。 でもって、Continuum for Phoneしてる時でもDeviceFamilyはMobileなのでそこんところを考慮していろいろやるとこういうXAMLができました。
Continuum for PhoneだとContinuum。電話で表示するとMobile。PCで広い画面だとWide。狭い画面だとNarrow。が表示されるXAMLです。
画面の広い、狭いはAdaptiveTriggerで。それ以外の2個はカスタムのStateTriggerを使ってます。それぞれの実装はこんな感じ。
条件の厳しいものから上にならべるとうまくいきます。実際はContinuumStateTriggerをちょっとカスタムして、Mobileで非Continuum状態というStateTriggerにしてMobileを判定。それ以外は画面幅にフォールバックとかがPCとContinuum for Phone で同じレイアウト、電話だけ違うレイアウトがやりやすいと思います。
