Xamarin.Forms TwoPaneView レイアウト

  • [アーティクル]

TwoPaneView コントロールは、Xamarin.Forms.DualScreen プレビュー NuGetできます。 次のコードは、単純な XAML の例を示しています。

<ContentPage xmlns:dualScreen="clr-namespace:Xamarin.Forms.DualScreen;assembly=Xamarin.Forms.DualScreen">
    <dualScreen:TwoPaneView>
        <dualScreen:TwoPaneView.Pane1>
            <StackLayout>
                <Label Text="Pane1 Content" />
            </StackLayout>
        </dualScreen:TwoPaneView.Pane1>
        <dualScreen:TwoPaneView.Pane2>
            <StackLayout>
                <Label Text="Pane2 Content" />
            </StackLayout>
        </dualScreen:TwoPaneView.Pane2>
    </dualScreen:TwoPaneView>
</ContentPage>

既定では、TwoPaneView は常に両方のペインをレンダリングします。つまり、アプリがシングルスクリーンで実行されている場合、ビューは 2 つのペイン間で分割されます。 次のプロパティを使用すると、1 つの画面でのみ表示されている場合にレイアウトに影響を与える可能性があります。

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

Surface Duo では、アプリケーションを 2 つの画面にまたがるように配置できます。 TwoPaneView コントロールには、2 つのペインが (シングルスクリーンまたはデュアルスクリーンの両方で) 相互に対して相対的にどこにレンダリングされるかを決定する追加のプロパティがあります。

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

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

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

詳細については、 Xamarin のドキュメントを参照してください。 UWP TwoPaneView ドキュメントの設計上の考慮事項の一部は、Xamarin コントロールにも適用されます。

トラブルシューティング

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