通过

Xamarin TwoPaneView 布局

  • 项目

TwoPaneView 控件在DualScreen NuGet预览中可用。 下面的代码演示了一个简单的 XAML 示例：

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

默认情况下，TwoPaneView 将尝试始终呈现两个窗格，这意味着当应用在单个屏幕上运行时，视图将在这两个窗格之间拆分。 以下属性可用于在仅在一个屏幕上呈现时影响布局：

  • MinTallModeHeight - 指示控件进入 Tall 模式所必需的最小高度。
  • MinWideModeWidth - 指示控件进入 Wide 模式所必需的最小宽度。
  • Pane1Length –以宽模式设置 pane1.xaml 的宽度，在高度模式下设置 pane1.xaml 的宽度，在 SinglePane 模式下不起作用。
  • Pane2Length –以宽模式设置 Pane2 的宽度，在高度模式下设置 Pane2 的宽度，在 SinglePane 模式下不起作用。

在 Surface Duo 上，应用程序可以跨越两个屏幕。 TwoPaneView 控件具有其他属性，这些属性确定两个窗格相对于彼此的呈现位置（在单屏或双屏中）：

  • TallModeConfiguration –在高模式下，窗格可以是顶部/底部、底部/顶部或单个窗格。
  • WideModeConfiguration –在宽模式下，窗格可以是左/右、右/左或单个窗格。
  • PanePriority -是否在 "高" 或 "宽" 模式下选择 "在 SinglePane 模式下显示 pane1.xaml" 或 "Pane2"。

有三种显示模式：

  • SinglePane - 当前只显示一个窗格。
  • Wide - 两个窗格水平布局。 一个窗格位于左侧，另一个窗格位于右侧。 在表面上，这两个屏幕处于纵向模式。
  • Tall - 两个窗格垂直布局。 一个窗格位于顶部，另一个窗格位于底部。 在表面上，这两个屏幕处于横向模式。

阅读 Xamarin 文档中的详细信息。 UWP TwoPaneView 文档中的某些设计注意事项也适用于 Xamarin 控件。

疑难解答

如果观察到中 TwoPaneView 的意外行为或布局，请检查 设置说明，其中包括 Init 方法和 ConfigurationChanges 属性。