减小 Xamarin.forms 中 UWP 的 MasterDetailPage 的 Master 的宽度

Posted 2023-03-25

【中文标题】减小 Xamarin.forms 中 UWP 的 MasterDetailPage 的 Master 的宽度

【英文标题】：Reduce the width of Master of the MasterDetailPage for UWP in Xamarin.forms

【发布时间】：2018-11-27 07:47:37

【问题描述】：

我创建了一个 Xamarin 应用程序，并且我需要减小主从页面的主页面的宽度。 我遵循了一种方法来创建 UWP 特定的自定义渲染器。以下是我的代码：

 [assembly: ExportRenderer(typeof(Xamarin.Forms.MasterDetailPage), typeof(CustomMasterDetailRenderer))]
    namespace VirtusContactManager.App.UWP.Renderer
    
        public class CustomMasterDetailRenderer : VisualElementRenderer<Xamarin.Forms.MasterDetailPage, MasterDetailControl>
        
            MasterDetailControl control = new MasterDetailControl();
            protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.MasterDetailPage> e)
            
                base.OnElementChanged(e);
                control.Width = 120;
                SetNativeControl(control);
            
            protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
            
                control.Width = 120;
            
        
    

我已经创建了上面的自定义渲染器。我面临的问题是我无法设置 control.Master 的值，因为它是一个 FrameworkElement 而我想要的是一个页面。 control.Width 设置整个页面的宽度，而不仅仅是Master。

我应该如何将 control.Master 设置为页面。如果这种方法不正确，请建议一种更好的方法来减少 UWP 中母版页的宽度。

【参考方案1】：

当我们查看在 Xamarin Forms 本身中使用的 MasterDetailRenderer 时，您会看到呈现的实际控件是 MasterDetailControl 类型之一（https://github.com/xamarin/Xamarin.Forms/blob/365a60e745d447992e870dd6272226e6b11ec275/Xamarin.Forms.Platform.UAP/MasterDetailControl.cs）。

我们在这里面临的问题是，更改主部件大小的实际属性不是accessibel，因为我们无法访问MasterDetailControl 内的SplitView 控件。 通常你应该使用OpenPaneLenght 属性来调整大小（https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.splitview.openpanelength#Windows_UI_Xaml_Controls_SplitView_OpenPaneLength）。

但是！您可以做的是在用于MasterDetailControl 的模板中设置该属性！如果您在应用级别提供自己的模板，XAML 将覆盖任何模板。

因此，从MasterDetailControlStyle (https://github.com/xamarin/Xamarin.Forms/blob/365a60e745d447992e870dd6272226e6b11ec275/Xamarin.Forms.Platform.UAP/MasterDetailControlStyle.xaml) 复制粘贴 XAML，并将其粘贴到 UWP 项目中的 App.Xaml 中的 ResourceDictionary 标记内。 最后要做的是为SplitView 控件的OpenPaneLength 属性添加一个值。

像这样 - 我在这里将它设置为 10 作为示例以表明它有效：

<Application
    x:Class="XFMasterDetailUWP.UWP.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XFMasterDetailUWP.UWP"
    xmlns:uwp="using:Xamarin.Forms.Platform.UWP"
    RequestedTheme="Light">
    <Application.Resources>
        <ResourceDictionary>
            <Style TargetType="uwp:MasterDetailControl">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="uwp:MasterDetailControl">
                            <SplitView x:Name="SplitView"
                                       OpenPaneLength="10"
                                       IsPaneOpen="Binding IsPaneOpen,RelativeSource=RelativeSource TemplatedParent,Mode=TwoWay" DisplayMode="Overlay">
                                <SplitView.Pane>