.NET MAUI TwoPaneView レイアウト

  • [アーティクル]

TwoPaneLayout コントロールは、 と Pane2の 2 つの子をPane1持つアダプティブ レイアウト コンテナーを提供します。 デュアルスクリーンデバイスと折りたたみ式デバイスでは、コントロールはヒンジまたはフォールドの両側にペインを配置します。 他のすべてのデバイスの種類では、レイアウトの動作は構成可能であり、コントロールに設定されたプロパティに従って 1 つまたは両方のペインを表示できます。

はじめに

TwoPaneView コントロールをプロジェクトに追加する手順については、Microsoft.Maui.Controls.Foldable NuGet を追加することで、.NET MAUI ドキュメントを参照してください。

次のコードは、TwoPaneView の単純な XAML の例です。次に示します。

  • foldable ルート要素に必要な名前空間
  • TwoPaneView 要素に設定されたプロパティ (バインディングを使用することも、プログラムで設定することもできます)
  • Pane1 レイアウトを追加するコンテナーと Pane2 コンテナー
<ContentPage xmlns:foldable="clr-namespace:Microsoft.Maui.Controls.Foldable;assembly=Microsoft.Maui.Controls.Foldable">
    <foldable:TwoPaneView
            TallModeConfiguration="SinglePane"
            WideModeConfiguration="LeftRight"
            PanePriority="Pane1">
        <foldable:TwoPaneView.Pane1>
            <StackLayout>
                <Label Text="Pane1 Content" />
            </StackLayout>
        </foldable:TwoPaneView.Pane1>
        <foldable:TwoPaneView.Pane2>
            <StackLayout>
                <Label Text="Pane2 Content" />
            </StackLayout>
        </foldable:TwoPaneView.Pane2>
    </foldable:TwoPaneView>
</ContentPage>

既定では、TwoPaneView は常に両方のペインをレンダリングしようとします。つまり、アプリが単一画面で実行されている場合、ビューは 2 つのペイン間で分割されます。 次のプロパティは、1 つの画面でのみレンダリングされる場合にレイアウトに影響を与えるために使用できます。

  • MinTallModeHeight – 高さモードに入るためにコントロールが必要な最小高さを示します。
  • MinWideModeWidth – コントロールがワイド モードに入るために必要な最小幅を示します。
  • Pane1Length – の幅 Pane1 をワイド モードで設定し、高さモードでは の Pane1 高さを設定します。SinglePane モードでは効果はありません。
  • Pane2Length – の幅 Pane2 をワイド モードで、高さモードでは の Pane2 高さを設定し、SinglePane モードでは効果がありません。

Surface Duo (およびその他の折りたたみ式デバイス) では、アプリケーションをヒンジまたはフォールドにまたがることができます。 TwoPaneView コントロールには、2 つのペインが (シングルスクリーンまたはデュアルスクリーンの両方で) 相互に対して相対的にどこにレンダリングされるかを決定する追加のプロパティがあります。

  • TallModeConfiguration – 高 さモードの場合、ペインは Top/Bottom、Bottom/Top、または 1 つのペインのみを表示できます。
  • WideModeConfiguration – ワイド モードの場合、ペインは左/右、右/左、または 1 つのペインのみになります。
  • PanePriority – 背の高いモードまたはPane2ワイド モードに対して SinglePane モードを表示Pane1するか、または選択するかを指定します。

次の 3 つの表示モードがあります。

  • SinglePane – 現在表示されているペインが 1 つのみになります。
  • Wide – 2 つのペインが横方向にレイアウトされます。 左側に 1 つのペインが表示され、もう一方が右側に表示されます。 Surface Duo では、2 つの画面が縦モードになっています。
  • Tall – 2 つのペインが縦方向にレイアウトされます。 1 つのペインが上にあり、もう一方が下にあります。 Surface Duo では、2 つの画面が横モードになっています。

サンプル

GitHub から TwoPaneView プレイグラウンド サンプル をダウンロードして実行します。 このスクリーンショットは、サンプルが実験のために TwoPaneView コントロールのさまざまなプロパティを公開する方法を示しています。

TwoPaneView プレイグラウンド サンプルを実行している Surface Duo

トラブルシューティング

からTwoPaneView予期しない動作やレイアウトが発生した場合は、ビルダーメソッドやConfigurationChanges属性を含むセットアップ手順をUseFoldable()確認してください。