次の方法で共有


.NET MAUI TwoPaneView レイアウト

Browse sample. サンプルを表示する

TwoPaneView クラスはコンテンツのサイズを変更し、左右または上下の使用可能な領域に配置する 2 つのビューを持つコンテナーを表しています。 TwoPaneViewGrid から継承するため、これらのプロパティについてはグリッドに適用されているかのように考える方法が最も簡単です。

Surface Duo dual-screen emulator showing a basic TwoPaneView test app

レイアウト コントロールは、Microsoft.Maui.Controls.Foldable NuGet パッケージで提供されます。

折りたたみ型デバイスのサポートの概要

折りたたみ型デバイスには、他の製造元の Microsoft Surface Duo と Android デバイスも含まれます。 これらは、スマートフォンとタブレットやデスクトップなどの大画面とのギャップを埋めるものです。アプリが、画面のヒンジや折りたたみへの対応など、同じデバイス上のさまざまな画面サイズや向きに合わせて調整する必要があるためです。

折りたたみ型デバイスを対象とするアプリ構築について、設計パターンやユーザー エクスペリエンスなど詳しくは、「デュアルスクリーン開発者向けドキュメント」をご覧ください。 Windows、Mac、Linux 用にダウンロードできる Surface Duo エミュレーターもあります。

重要

TwoPaneView コントロールは、Google が提供する Jetpack Window Manager API をサポートする Android 折りたたみ型デバイス (Microsoft Surface Duo など) にのみ適応します。

他のすべてのプラットフォームとデバイス (つまり、他の Android デバイス、iOS、macOS、Windows) では、構成可能で応答性の高い分割ビューのように機能し、画面に比例したサイズの 1 つまたは 2 つのウィンドウを動的に表示できます。

Foldable サポート NuGet を追加して構成する

  1. ソリューションの [NuGet パッケージ マネージャー] ダイアログを開きます。

  2. [参照] タブで、Microsoft.Maui.Controls.Foldable を検索します。

  3. ソリューションに Microsoft.Maui.Controls.Foldable パッケージをインストールします。

  4. プロジェクトの MauiApp クラスの CreateMauiApp メソッドに UseFoldable() 初期化メソッド (と名前空間) の呼び出しを追加します。

    using Microsoft.Maui.Foldable; // ADD THIS NAMESPACE
    ...
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        ...
        builder.UseFoldable(); // ADD THIS LINE TO THE TEMPLATE
        return builder.Build();
    }
    

    折りたたみにまたがるなど、アプリの状態変化をアプリが検出するには、この UseFoldable() 初期化が必要です。

  5. プラットフォーム/AndroidMainActivity クラスで [Activity(...)] 属性を更新し、これらの ConfigurationChanges オプションをすべて含めるようにします。

    ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize
        | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.UiMode
    

    構成の変更とスパン状態をより確実に報告できるようにして信頼性の高いデュアルスクリーン サポートにするには、これらの値が必要です。

TwoPaneView を設定する

ページに TwoPaneView レイアウトを追加するには、次のように行います。

  1. Foldable NuGet の foldable 名前空間エイリアスを追加します。

    xmlns:foldable="clr-namespace:Microsoft.Maui.Controls.Foldable;assembly=Microsoft.Maui.Controls.Foldable"
    
  2. ページのルート要素として TwoPaneView を追加し、Pane1Pane2 にコントロールを追加します。

    <foldable:TwoPaneView x:Name="twoPaneView">
        <foldable:TwoPaneView.Pane1
            BackgroundColor="#dddddd">
            <Label
                Text="Hello, .NET MAUI!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />
        </foldable:TwoPaneView.Pane1>
        <foldable:TwoPaneView.Pane2>
            <StackLayout BackgroundColor="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Primary}}">
                <Label Text="Pane2 StackLayout"/>
            </StackLayout>
        </foldable:TwoPaneView.Pane2>
    </foldable:TwoPaneView>
    

TwoPaneView モードについて

アクティブにできるのは、次のモードのうち 1 つだけです。

  • SinglePane 同時に表示できるペインは 1 つだけです。
  • Wide 2 つのペインが水平方向にレイアウトされます。 左側に 1 つのペインが表示され、もう一方が右側に表示されます。 2 画面で、デバイスが縦向きのときはこのモードになります。
  • Tall 2 つのペインが垂直方向にレイアウトされます。 1 つのペインが上にあり、もう一方が下にあります。 2 画面で、デバイスが横向きのときはこのモードになります。

1 画面しかないときに TwoPaneView を制御する

TwoPaneView が 1 つの画面を占有する場合は、次のプロパティが適用されます。

  • MinTallModeHeight は、Tall モードに移行するために必要なコントロールの最小の高さを示します。
  • MinWideModeWidth は、Wide モードに移行するために必要なコントロールの最小の幅を示します。
  • Pane1LengthWide モードでの Pane1 の幅、Tall モードでの Pane1 の高さを設定します。SinglePane モードでは効果がありません。
  • Pane2LengthWide モードでの Pane2 の幅、Tall モードでの Pane2 の高さを設定します。SinglePane モードでは効果がありません。

重要

TwoPaneView がヒンジや折りたたみにまたがっている場合、これらのプロパティは効果がありません。

1 画面または 2 画面の場合に適用されるプロパティ

TwoPaneView が 1 つまたは 2 つの画面を占有する場合は、次のプロパティが適用されます。

  • TallModeConfiguration は、Tall モードの場合、上下の配置か、TwoPaneViewPriority で定義した 1 つのペインだけを表示するかを示します。
  • WideModeConfiguration は、Wide モードの場合、左右の配置か、TwoPaneViewPriority で定義した 1 つのペインだけを表示するかを示します。
  • PanePriority は、SinglePane モードの場合に Pane1Pane2 のどちらを表示するかを決定します。

トラブルシューティング

TwoPaneView レイアウトが想定どおりに動作しない場合、このページのセットアップ手順を再度ご確認ください。 UseFoldable() メソッドまたは ConfigurationChanges 属性値を省略したり、間違って構成したりすることは、よくあるエラーの原因です。