Xamarin.Forms のデュアル画面Xamarin.Forms dual-screen

Microsoft Surface Duo のようなデュアル画面デバイスでは、アプリケーションの新しいユーザー体験が促進されます。Dual-screen devices like the Microsoft Surface Duo facilitate new user-experience possibilities for your applications. Xamarin.Forms には TwoPaneView クラスと DualScreenInfo クラスが含まれているため、デュアル画面デバイス用のアプリを開発できます。Xamarin.Forms includes TwoPaneView and DualScreenInfo classes so you can develop apps for dual-screen devices.

作業開始Get started

以下の手順に従い、デュアル画面機能を Xamarin.Forms アプリに追加します。Follow these steps to add dual-screen capabilities to a Xamarin.Forms app:

  1. ソリューションの [NuGet パッケージ マネージャー] ダイアログを開きます。Open the NuGet Package Manager dialog for your solution.

  2. [参照] タブで Xamarin.Forms.DualScreen を検索します。Under the Browse tab, search for Xamarin.Forms.DualScreen.

  3. ソリューションに Xamarin.Forms.DualScreen パッケージをインストールします。Install the Xamarin.Forms.DualScreen package to your solution.

  4. OnCreate イベントで Android プロジェクトの MainActivity クラスに次の初期化メソッド呼び出しを追加します。Add the following initialization method call to the Android project's MainActivity class, in the OnCreate event:


    2 つの画面にまたがるなど、アプリの状態変化をアプリが検出するにはこのメソッドが必要です。This method is required for the app to be able to detect changes in the app's state, such as being spanned across two screens.

  5. これらの ConfigurationChanges オプションが "すべて" 含まれるよう、Android プロジェクトの MainActivity クラスで Activity 属性を更新します。Update the Activity attribute on the Android project's MainActivity class, so that it includes all these ConfigurationChanges options:

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

    これらの値は、構成の変更や範囲の状態をより確実に報告できるようにするために必要です。These values are required so that configuration changes and span state can be more reliably reported. 既定では、2 つだけが Xamarin.Forms プロジェクトに追加されます。そのため、信頼できるデュアル画面サポートのために残りを忘れずに追加してください。By default only two are added to Xamarin.Forms projects, so remember to add the rest for reliable dual-screen support.


DualScreenInfo クラスまたは TwoPaneView レイアウトが想定どおりに動作しない場合、このページのセットアップ手順を再確認してください。If the DualScreenInfo class or TwoPaneView layout aren't working as expected, double-check the set-up instructions on this page. Init メソッドまたは ConfigurationChanges 属性値を省略したり、間違って構成したりすることは、よくあるエラーの原因です。Omitting or misconfiguring the Init method or the ConfigurationChanges attribute values are common causes of errors.

追加のガイダンスと参照実装が必要であれば、Xamarin.Forms デュアル画面サンプルをご覧ください。Review the Xamarin.Forms dual-screen samples for additional guidance and reference implementation.

次の手順Next steps

NuGet を追加したら、次の手順でアプリにデュアル画面機能を追加します。Once you've added the NuGet, add dual-screen features to your app with the following guidance:

  • デュアル画面デザイン パターン - デュアル画面のデバイスで複数の画面を最適に使用する方法を検討する場合は、このパターンに関するガイダンスを参照して、アプリケーション インターフェイスに最適なものを見つけてください。Dual-screen design patterns - When considering how to best utilize multiple screens on a dual-screen device, refer to this pattern guidance to find the best fit for your application interface.
  • TwoPaneView レイアウト - 同じ名前の UWP コントロールがきっかけとなった Xamarin.Forms の TwoPaneView クラスは、デュアル画面デバイス用に最適化されたクロスプラットフォームのレイアウトです。TwoPaneView layout - The Xamarin.Forms TwoPaneView class, inspired by the UWP control of the same name, is a cross-platform layout optimized for dual-screen devices.
  • DualScreenInfo ヘルパー クラス - DualScreenInfo で、表示されるペイン、その大きさ、デバイスがどのようなものか、ヒンジの角度などを決定できるようになります。DualScreenInfo helper class - The DualScreenInfo class enables you to determine which pane your view is on, how big it is, what posture the device is in, the angle of the hinge, and more.
  • デュアル画面トリガー - Xamarin.Forms.DualScreen 名前空間には、アタッチされたレイアウト (ウィンドウ) の表示モードが変更されたときに VisualState 変更をトリガーする 2 つの状態トリガーが含まれています。Dual-screen triggers - The Xamarin.Forms.DualScreen namespace includes two state triggers that trigger a VisualState change when the view mode of the attached layout, or window, changes.

詳細については、デュアル画面開発者向けのドキュメントを参照してください。Visit the dual-screen developer docs for more information.