.NET MAUI TwoPaneView 布局

TwoPaneLayout 控件提供具有两个子级的自适应布局容器： Pane1 和 Pane2。 在双屏和可折叠设备上，控件会将窗格放置在铰链或折叠的任一侧。 在所有其他设备类型上，布局行为是可配置的，可以根据控件上设置的属性显示一个或两个窗格。

入门

通过添加 Microsoft.Maui.Controls.Foldable NuGet，.NET MAUI 文档中提供了将 TwoPaneView 控件添加到项目的说明。

以下代码是 TwoPaneView 的简单 XAML 示例，其中显示了：

• foldable 根元素中所需的命名空间
• 在 TwoPaneView 元素 (上设置的属性也可以使用绑定或以编程方式设置)
• Pane1 和 Pane2 用于添加布局的容器

<ContentPage xmlns:foldable="clr-namespace:Microsoft.Maui.Controls.Foldable;assembly=Microsoft.Maui.Controls.Foldable">
    <foldable:TwoPaneView
            TallModeConfiguration="SinglePane"
            WideModeConfiguration="LeftRight"
            PanePriority="Pane1">
        <foldable:TwoPaneView.Pane1>
            <StackLayout>
                <Label Text="Pane1 Content" />
            </StackLayout>
        </foldable:TwoPaneView.Pane1>
        <foldable:TwoPaneView.Pane2>
            <StackLayout>
                <Label Text="Pane2 Content" />
            </StackLayout>
        </foldable:TwoPaneView.Pane2>
    </foldable:TwoPaneView>
</ContentPage>

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

• MinTallModeHeight – 指示控件进入 Tall 模式必须具有的最小高度。
• MinWideModeWidth – 指示控件进入 Wide 模式必须具有的最小宽度。
• Pane1Length – 在“宽”模式下设置 的 Pane1 宽度，在“高”模式下设置 的高度 Pane1 ，在 SinglePane 模式下不起作用。
• Pane2Length – 在“宽”模式下设置 的 Pane2 宽度，在“高”模式下设置 的高度 Pane2 ，在 SinglePane 模式下不起作用。

在 Surface Duo (和其他可折叠设备) ，应用程序可以跨铰链或折叠。 TwoPaneView 控件具有其他属性，这些属性确定两个窗格相对于彼此的呈现位置（在单屏或双屏中）：

• TallModeConfiguration – 在高模式下，窗格可以是 Top/Bottom、Bottom/Top，或者只能显示单个窗格。
• WideModeConfiguration – 在宽模式下，窗格只能是左/右、右/左或单个窗格。
• PanePriority – 是否在 SinglePane 模式下为高模式或宽模式选择显示 Pane1 或 Pane2 。

有三种显示模式：

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

示例

从 GitHub 下载并运行 TwoPaneView playground 示例 。 此屏幕截图显示示例如何公开用于试验的 TwoPaneView 控件的各种属性：

疑难解答

如果从 TwoPaneView中观察到意外的行为或布局，请检查 设置说明，包括 UseFoldable() 生成器方法和 ConfigurationChanges 属性。