この記事は、 Microsoft Developerコミュニティの積極的な参加者であるAlexei Plotnikovと 、技術的な聴衆のマネージャーであるStas Pavlovと共同で作成されました。
UWPアプリケーション開発者が覚えておくべき最初の真実は、「ユーザーとしての思考」です。 2番目の真実は、「適応性のある設計がなければ、アプリケーションは遅くて痛みを伴う死に終わる」ということです。デバイスと画面拡張の数は単純に膨大だからです。 すぐに思い浮かぶ適応設計を作成するための最初で最も頻繁な決定は、AdaptiveTriggerです。
もちろん、それらについて別の記事を書くべきではありませんが、さらなる考慮事項を理解するために、少し助けても害はありません。 アダプティブトリガーの最も一般的な使用方法：
<Grid x:Name="LayoutRoot"> <VisualStateManager.VisualStateGroups> <VisualStateGroup> <VisualState x:Name="WideState"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="600" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="LayoutRoot.Background" Value="Green" /> </VisualState.Setters> </VisualState> <VisualState x:Name="NarrowState"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="0" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="LayoutRoot.Background" Value="Red" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid>
プロジェクトを実行し、ウィンドウの幅を変更したときの色の変化を確認します。緑から赤、またはその逆です。
ここで何が起こっているのかわからない場合は、最初に適応トリガーの概念を理解する必要があります。 レスポンシブデザインとレスポンシブトリガーに関する優れたコースは、Microsoft Virtual Academyで利用できます。 ちなみに、すべてを実行することは不必要ではありません。これにより、UWPアプリケーションの開発に関する知識が大幅に広がります。
アダプティブトリガーの優れた機能は、コード内でアクションを実行する必要がないことです。これにより、デザイナーと開発者の間の作業分担が簡素化され、さらにプロジェクトが使用されるプログラミング言語（C＃またはVB.Net）から独立します。
一見、すべてが非常にシンプルで明白に見えるかもしれませんが、上記で得られた知識を適用し始めると、発生する多くの問題や困難に遭遇します。 最初に頭に浮かぶのは、「電話画面に適切なレイアウトを表示するためにどのウィンドウ幅を選択する必要がありますか？」です。この質問はばかげているように思われ、答えは非常に簡単です-最小値から最大値を選択します。 たとえば、上記のコードでは、幅は600ピクセルに設定されていますが、他の例や同様の記事では720ピクセルがよく見られます。 720ピクセルに設定すると、画面幅が720ピクセル以下のすべてのデバイスに必要な表現ができます。 そして、あなたがデバイスを水平位置に変える瞬間まで、あなたは正確です（最初の真実を覚えていますか？）。 一部の人にとっては、これは啓示かもしれませんが、画面の高さが720ピクセル未満のデバイスがあります。 デバイスを水平位置に回すと、高さが幅に変わり、トリガーが狭いウィンドウのアイデアを与え、レイアウトを完全に壊してしまいます。
図を完全に理解するには、次の変更を加えた上記の例を検討してください。
<Grid x:Name="GlobalGrid"> <VisualStateManager.VisualStateGroups> <VisualStateGroup> <VisualState x:Name="WideState"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="720" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="MyStackPanel.Orientation" Value="Horizontal" /> </VisualState.Setters> </VisualState> <VisualState x:Name="NarrowState"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="0" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="MyStackPanel.Orientation" Value="Vertical" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <StackPanel x:Name="MyStackPanel" HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock Text="77" FontSize="100"/> <TextBlock Text="77" FontSize="100"/> <TextBlock Text="77" FontSize="100"/> </StackPanel> </Grid>
デバッグリストMobile Emulator 10.xxxの最初のエミュレータでプロジェクトを実行します。 WVGA 4インチ512MB」を水平モードにします。 ご覧のとおり、StackPanelは垂直方向のままでしたが、水平方向を見る方が論理的です。 この場合、デバイスの幅と高さの両方が720ピクセル未満であるため、トリガーは機能しませんでした。
それでは、トリガーに低い値、たとえば500を選択しましょう。しかし、ここでは同じ問題が発生しますが、垂直方向の画面幅が500を超える最新のデバイスでは、実際には問題を再現する必要さえありません。低解像度のデバイスエミュレータ。 PC上でアプリケーションを実行し、ウィンドウサイズの高さを最小にしてから、トリガーからの値に達するまで幅を小さくすれば十分です。 StackPanelは、私たちが望むようには見えません。 ちなみに、この問題があなたにとって重要でないと思われる場合は、PCのWindows 10では、画面上の4つのウィンドウを一度に修正する機会を得たことを思い出してください。
ソリューションに移りましょう。 上に示したStackPanelの例は、例のためだけの例ではなく、示された問題が礎石であるワーキングドラフトの主要部分です。 危機にwhatしているものを理解するために、リアルタイムの為替レートを表示する記事の共著者による「Ruble Life」アプリケーションを検討してください。
アプリケーションは、ドルに対する為替レート、ユーロに対する為替レート、および石油価格の3つの主要な指標でルーブルの位置を示します。 StackPanelがこれらの目的に使用され、その向きがデバイスの向きまたはウィンドウの縦横比に合わせて調整されると仮定するのは論理的です。 より正確には、アスペクト比に正確です。 このアプローチの利点は、使用するデバイスや位置に関係なく、StackPanelの向きが適切であり、ユーザーがデータを受信するのに便利であることです。
そのような旅行は実際にどのように実装されていますか？ とても簡単です。 必要なのは、ヘッドグリッドのサイズ変更イベントに応答し、変更を変数/プロパティに保存することです。その後、これを使用してレイアウトを構築します。
Vb.net
Private Sub GlobalGrid_SizeChanged(sender As Object, e As SizeChangedEventArgs) If e.NewSize.Height > e.NewSize.Width Then MyApplicationData.Orientation = Vertical Else MyApplicationData.Orientation = Horizontal End If End Sub
C＃
private void GlobalGrid_SizeChanged(object sender, SizeChangedEventArgs e) { if (e.NewSize.Height > e.NewSize.Width) MyApplicationData.Orientation = Orientation.Vertical; else MyApplicationData.Orientation = Orientation.Horizontal; }
この例では、対応する値が独自のクラスのプロパティに割り当てられます。 さらに、StackPanelのOrientationプロパティをクラスの対応するプロパティにバインドするだけです。 XAMLで値を設定する利点を保存し、クラスプロパティを設定する代わりに、
VisualStateManager.GoToState()
を使用して目的の視覚状態に移行することも
VisualStateManager.GoToState()
。
このソリューションをそのようなプロジェクトに理想的なものに変えるもう1つのトリックに注目する価値があります。 さまざまなデバイスと画面解像度のフォントサイズを推測しないように、ViewPanelでStackPanelをラップすると、最小の携帯電話から大型テレビまでのデバイスで、見栄えの良い画像が表示されます。
ちなみに、Ruble Lifeアプリケーションを調べると、アスペクト比が変化すると、インターフェイスに他の変化が生じることにも気付くことができます。 たとえば、PCでアプリケーションを実行し、フルスクリーンに展開すると、アプリケーションボタンが上下に配置され、空き領域を占有します。ウィンドウを絞ると、ボタンが非表示になり、同じアクションのセットでCommandBarが表示されます。 それどころか、電話でアプリケーションを実行すると、最初にCommandBarでビューが表示され、電話を回すと、ボタンでビューが表示されます。 このアプローチは本当に普遍的であり、ユーザーはウィンドウのサイズを変更するか、デバイスを回転させるだけで、インターフェイスの優先バージョンを取得できます。
StackPanelで実際に機能するのはあなたですが、より複雑なインターフェイスはどうですか？ 驚かれることでしょうが、このアプローチは、アスペクト比の変化に対する反応を組み合わせ、適応トリガーを使用することにより、より複雑なインターフェースに適用できます。 たとえば、600ピクセルの高さを形成するオブジェクトのグループがあります。 アスペクト比の変化にどのように反応しても、ウィンドウの高さまたは水平位置での電話画面の高さが600ピクセル未満の場合、このグループのオブジェクトを認識しやすくするのに役立ちません。 適応トリガーが必要なのは、まさにそのような状況のためです。 グループを再構築して、オブジェクトを小さくしたり、重要度の低いオブジェクトを非表示/移動したりできます。
結論として、アスペクト比の変化に対応してインターフェースを構築する主なアイデアは、さまざまなタイプのデバイスのインターフェースを常に根本的に変更する必要はないという事実に基づいており、「水平」および「垂直」ウィンドウ/デバイスの配置。 たとえば、Windows 10「メール」の標準アプリケーションには、PCと電話のバージョン用に異なるXAMLファイルがありますが、上記の概念も非常に論理的に見えます。 特に、電話用のバージョンでは、デバイスを水平位置に向けても、インターフェイスは変更されませんが、PCのバージョンタイプごとに文字のリストと文字の内容の両方を表示するのに十分なスペースがあります。 将来の記事では、この資料を統合したり、逆に普遍的で適応性のあるインターフェースを構築するための独自の方法を開発したりできるような戦略を使用する例に常に頼ります。
UWP初心者シリーズの最初の記事： アプリケーションのウィンドウタイトル 。