Xamarin.Forms TwoPaneView レイアウト

サンプルのダウンロード

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

TwoPaneView を設定する

次の手順に従って、アプリにデュアル画面レイアウトを作成します。

1. 概要手順に従って NuGet を追加し、Android MainActivity クラスを構成します。

2. 次の XAML を使用し、基本的な TwoPaneView で開始します。

   <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>
   

ヒント

上の XAML では、ContentPage 要素から多くの共通属性が除外されています。 アプリに TwoPaneView を追加するとき、画像のように xmlns:dualScreen 名前空間を忘れずに宣言してください。

TwoPaneView モードについて

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

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

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

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

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

重要

TwoPaneView が 2 画面にまたがっている場合、これらのプロパティは効果がありません。

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

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

• TallModeConfiguration は、縦長モードの場合の上/下の配置を示します。または、TwoPaneViewPriority で定義されているように 1 つのペインだけを表示したい場合です。
• WideModeConfiguration は、横長モードの場合の左/右の配置を示します。または、TwoPaneViewPriority で定義されているように 1 つのペインだけを表示したい場合です。
• PanePriority は SinglePane モードの場合に Pane1 または Pane2 を表示するかどうかを決定します。

関連リンク

• DualScreen (サンプル)