Xamarin.Forms TwoPaneView 版面配置

TwoPaneView 類別表示包含兩個檢視的容器,其會根據可用空間來調整內容大小,並將內容並排或由上至下擺放。 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 模式

只能啟用下列其中一項模式:

  • SinglePane 表示目前只會顯示一個窗格。
  • Wide:兩個窗格會水平配置。 其中一個窗格置於左邊,另一個則置於右邊。 當使用雙螢幕而且裝置為直向時,會採用此模式。
  • Tall:兩個窗格會垂直配置。 其中一個窗格置於上方,另一個則置於下方。 當使用雙螢幕而且裝置為橫向時,會採用此模式。

當 TwoPaneView 只在一個螢幕上時進行控制

下列屬性適用於 TwoPaneView 佔用單一螢幕時:

  • MinTallModeHeight 指出最小高度,控制項最小必須為此高度才能進入直向模式。
  • MinWideModeWidth 指出最小寬度,控制項最小必須為此寬度才能進入橫向模式。
  • Pane1Length 用於在 Wide 模式中設定 Pane1 的寬度,以及在 Tall 模式中設定 Pane1 的高度,在 SinglePane 模式中則沒有作用。
  • Pane2Length 可用於在 Wide 模式中設定 Pane2 的寬度,以及在 Tall 模式中設定 Pane2 的高度,在 SinglePane 模式中則沒有作用。

重要

如果 TwoPaneView 跨越兩個螢幕,這些屬性就沒有作用。

在一個螢幕或兩個螢幕上所套用的屬性

下列屬性適用於 TwoPaneView 佔用單一螢幕或兩個螢幕時:

  • TallModeConfiguration 會指出,處於高模式時,是頂端/下方排列方式,或者如果您只想要顯示由 TwoPaneViewPriority 所定義的單一窗格。
  • WideModeConfiguration 表示,當處於寬模式時,則為 Left/Right 排列,或只想要顯示由 TwoPaneViewPriority 所定義的單一窗格。
  • PanePriority 決定在處於 SinglePane 模式中時,是否要顯示 Pane1 或 Pane2。