Xamarin Forms UWP平台如何缩小汉堡菜单宽度？

在UWP平台上，Xamarin.Forms的MasterDetailPage默认绑定的原生控件是SplitView，它的侧边栏（Pane）宽度默认固定为320px——直接在XAML里给Master页面设置WidthRequest不会生效，因为这个属性并没有被映射到原生SplitView的PaneWidth属性上。不过我们可以通过自定义平台渲染器来解决这个问题，具体步骤如下：

步骤1：创建自定义MasterDetailPage子类 #

在你的共享项目中，先定义一个继承自MasterDetailPage的自定义控件，添加一个可绑定属性来控制侧边栏宽度：

using Xamarin.Forms;

namespace YourAppNamespace // 替换成你的项目命名空间
{
    public class CustomMasterDetailPage : MasterDetailPage
    {
        // 定义可绑定属性，默认宽度设为UWP原生默认值320
        public static readonly BindableProperty MasterWidthProperty =
            BindableProperty.Create(
                nameof(MasterWidth), 
                typeof(double), 
                typeof(CustomMasterDetailPage), 
                320.0);

        public double MasterWidth
        {
            get => (double)GetValue(MasterWidthProperty);
            set => SetValue(MasterWidthProperty, value);
        }
    }
}

步骤2：在UWP项目中实现自定义渲染器 #

在UWP项目里创建一个渲染器类，将自定义控件的MasterWidth属性映射到原生SplitView的PaneWidth：

using YourAppNamespace;
using YourAppNamespace.UWP; // 替换成你的UWP项目命名空间
using Xamarin.Forms.Platform.UWP;

[assembly: ExportRenderer(typeof(CustomMasterDetailPage), typeof(CustomMasterDetailPageRenderer))]
namespace YourAppNamespace.UWP
{
    public class CustomMasterDetailPageRenderer : MasterDetailPageRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<MasterDetailPage> e)
        {
            base.OnElementChanged(e);

            if (Control != null && Element is CustomMasterDetailPage customMasterPage)
            {
                // 获取UWP原生的SplitView控件
                var splitView = Control as Windows.UI.Xaml.Controls.SplitView;
                if (splitView != null)
                {
                    // 初始设置侧边栏宽度
                    splitView.PaneWidth = customMasterPage.MasterWidth;

                    // 监听属性变化，实时更新宽度
                    customMasterPage.PropertyChanged += (sender, args) =>
                    {
                        if (args.PropertyName == CustomMasterDetailPage.MasterWidthProperty.PropertyName)
                        {
                            splitView.PaneWidth = customMasterPage.MasterWidth;
                        }
                    };
                }
            }
        }
    }
}

步骤3：在XAML中使用自定义控件 #

把原来的MasterDetailPage替换成我们的CustomMasterDetailPage，并通过MasterWidth属性设置你想要的宽度（比如你需要的100）：

<local:CustomMasterDetailPage MasterWidth="100">
    <local:CustomMasterDetailPage.Master>
        <local:SideDrawerListPage x:Name="sideDrawerListPage" />
    </local:CustomMasterDetailPage.Master>
    
    <!-- 这里放你的Detail页面内容 -->
    <local:CustomMasterDetailPage.Detail>
        <!-- ... -->
    </local:CustomMasterDetailPage.Detail>
</local:CustomMasterDetailPage>

补充说明 #

• 确保你的SideDrawerListPage内部没有设置超出MasterWidth的固定宽度元素，避免内容被截断或者撑开侧边栏；
• 这个方法只针对UWP平台生效，Android/iOS平台依然可以通过WidthRequest直接控制侧边栏宽度。

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