.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
属性。