MAUI怎么实现分屏视图 MAUI TwoPaneView用法

来源：这里教程网时间：2026-02-21 17:36:21 作者：

MAUI 中没有内置的

TwoPaneView

控件（那是 UWP/WinUI 的概念），但你可以用 Grid + VisualStateManager 模拟分屏效果，或借助社区库（如 .NET MAUI Community Toolkit）中的

TwoPaneView

—— 它已在 v8.0+ 正式支持。

使用 MAUI Community Toolkit 的 TwoPaneView

这是目前最接近原生分屏体验的方式，支持自适应布局（单栏/双栏自动切换）。

安装 NuGet 包：
CommunityToolkit.Maui
（v8.0 或更高）在
MauiProgram.cs
中注册：`builder.UseMauiApp().UseMauiCommunityToolkit();` XAML 中使用：

<toolkit:TwoPaneView>
    <toolkit:TwoPaneView.Pane1>
        <VerticalStackLayout>
            <Label Text="导航栏/列表" />
            <CollectionView ItemsSource="{Binding Items}" />
        </VerticalStackLayout>
    </toolkit:TwoPaneView.Pane1>
    <toolkit:TwoPaneView.Pane2>
        <VerticalStackLayout>
            <Label Text="详情内容" />
            <Label Text="{Binding SelectedItem.Name}" />
        </VerticalStackLayout>
    </toolkit:TwoPaneView.Pane2>
</toolkit:TwoPaneView>

它会根据窗口宽度自动决定显示单栏（堆叠）还是双栏（并排）——默认临界点是 720px（可配置

WideModeThresholdWidth

）。

手动用 Grid 实现简易分屏

适合轻量场景或需要完全自控布局逻辑的情况。

定义两列 Grid：
ColumnDefinitions="*,*"
（等宽）或
"300,*"
（固定左栏） 绑定数据时注意：选中项变化要同步更新右侧内容 配合
VisualStateGroup
响应窗口尺寸变化（比如小屏时隐藏左栏、加汉堡菜单）

示例片段：

<Grid ColumnDefinitions="300,*">
    <VerticalStackLayout Grid.Column="0">
        <Label Text="菜单" />
        <Button Text="项目1" Command="{Binding SelectCommand}" CommandParameter="1"/>
    </VerticalStackLayout>
    <Frame Grid.Column="1" Padding="20">
        <Label Text="{Binding CurrentContent}" />
    </Frame>
</Grid>

适配不同设备的关键细节

TwoPaneView
默认只在 Windows 和 macOS 上启用双栏；Android/iOS 默认单栏（因屏幕窄），可通过设置
PanePriority="Right"
或监听
SizeChanged
手动控制使用
WindowSizeBehavior
（如
SinglePane
,
Wide
）可强制指定模式记得在 ViewModel 中处理
SelectedItem
变化，并通知 Pane2 更新（INotifyPropertyChanged 或 ObservableProperty）