评估.NET MAUI：是否支持可调节拆分视图功能？

针对Windows桌面、macOS和iPad平台，你可以通过以下几种方式实现可调节拆分视图：

1. 基于Grid+手势识别手动实现 #

这是最灵活的自定义方案，完全可控，适配所有目标平台：

XAML 布局 #

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" x:Name="LeftPanelColumn"/>
        <ColumnDefinition Width="8"/>
        <ColumnDefinition Width="*" x:Name="RightPanelColumn"/>
    </Grid.ColumnDefinitions>

    <!-- 左侧面板内容 -->
    <Frame Grid.Column="0" BackgroundColor="#F0F0F0" Padding="10">
        <Label Text="左侧面板" VerticalOptions="Center" HorizontalOptions="Center"/>
    </Frame>

    <!-- 可拖拽拆分条 -->
    <BoxView Grid.Column="1" BackgroundColor="#888888" Cursor="SizeWE">
        <BoxView.GestureRecognizers>
            <PanGestureRecognizer PanUpdated="SplitBar_PanUpdated"/>
        </BoxView.GestureRecognizers>
    </BoxView>

    <!-- 右侧面板内容 -->
    <Frame Grid.Column="2" BackgroundColor="#E0F7FA" Padding="10">
        <Label Text="右侧面板" VerticalOptions="Center" HorizontalOptions="Center"/>
    </Frame>
</Grid>

后台拖拽逻辑 #

private void SplitBar_PanUpdated(object sender, PanUpdatedEventArgs e)
{
    if (e.StatusType != GestureStatus.Running) return;

    // 计算新的左侧面板宽度，限制最小宽度为100px避免过度压缩
    var newWidth = LeftPanelColumn.Width.Value + e.TotalX;
    LeftPanelColumn.Width = new GridLength(Math.Max(100, newWidth), GridUnitType.Absolute);
}

你还可以添加平台特定优化，比如在Windows/macOS上设置拆分条的光标样式（上面XAML里的Cursor="SizeWE"已经适配桌面平台），或者拖拽时添加视觉反馈。

2. 使用社区封装的拆分器控件 #

不用重复造轮子，直接用成熟的社区控件：

• Maui.Controls.Splitter：轻量开源的拆分器组件，支持水平/垂直拆分、最小尺寸限制，适配桌面和iPad，可通过NuGet安装。
• Syncfusion SfSplitter：功能完整的商业控件，支持嵌套拆分、多种布局模式，提供免费试用版。
• Telerik UI for MAUI Splitter：企业级控件，附带完善的文档和技术支持。

以Maui.Controls.Splitter为例，使用方式如下：

<!-- 先添加命名空间 xmlns:splitter="clr-namespace:Maui.Controls.Splitter;assembly=Maui.Controls.Splitter" -->
<splitter:Splitter Orientation="Horizontal">
    <splitter:SplitterPane MinimumWidth="100" Width="200">
        <Frame BackgroundColor="#F0F0F0" Padding="10">
            <Label Text="左侧面板"/>
        </Frame>
    </splitter:SplitterPane>
    <splitter:SplitterPane>
        <Frame BackgroundColor="#E0F7FA" Padding="10">
            <Label Text="右侧面板"/>
        </Frame>
    </splitter:SplitterPane>
</splitter:Splitter>

3. 平台特定原生控件嵌入 #

如果优先追求桌面平台的原生体验，可以直接调用对应平台的原生拆分控件：

• Windows：使用WinUI的GridSplitter或SplitView，通过MAUI的平台特定代码嵌入。
• macOS：使用AppKit的NSSplitView，通过自定义Handler或渲染器实现。

比如Windows平台的平台特定优化，在XAML中直接使用WinUI的GridSplitter：

<ContentPage xmlns:winui="clr-namespace:Microsoft.UI.Xaml.Controls;assembly=Microsoft.UI.Xaml">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Frame Grid.Column="0" BackgroundColor="#F0F0F0"/>
        <winui:GridSplitter Grid.Column="1" Width="8" ResizeDirection="Columns" Background="#888888"/>
        <Frame Grid.Column="2" BackgroundColor="#E0F7FA"/>
    </Grid>
</ContentPage>

内容的提问来源于stack exchange，提问作者Fisher8370