.NET MAUI TwoPaneView レイアウト

[アーティクル]
02/13/2024

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

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 を追加して構成する

ソリューションの [NuGet パッケージマネージャー] ダイアログを開きます。
[参照] タブで、Microsoft.Maui.Controls.Foldable を検索します。
ソリューションに Microsoft.Maui.Controls.Foldable パッケージをインストールします。
プロジェクトの 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() 初期化が必要です。
プラットフォーム/Android の MainActivity クラスで [Activity(...)] 属性を更新し、これらの ConfigurationChanges オプションをすべて含めるようにします。
```
ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize
    | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.UiMode
```
構成の変更とスパン状態をより確実に報告できるようにして信頼性の高いデュアルスクリーンサポートにするには、これらの値が必要です。

TwoPaneView を設定する

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

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

xmlns:foldable="clr-namespace:Microsoft.Maui.Controls.Foldable;assembly=Microsoft.Maui.Controls.Foldable"

ページのルート要素として TwoPaneView を追加し、Pane1 と Pane2 にコントロールを追加します。

<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 モードに移行するために必要なコントロールの最小の幅を示します。
Pane1Length は Wide モードでの Pane1 の幅、Tall モードでの Pane1 の高さを設定します。SinglePane モードでは効果がありません。
Pane2Length は Wide モードでの Pane2 の幅、Tall モードでの Pane2 の高さを設定します。SinglePane モードでは効果がありません。

重要

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

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

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

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

トラブルシューティング

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