Reduce the width of Master of the MasterDetailPage for UWP in Xamarin.forms

Question

I have created a Xamarin Application and in that I am required to reduce the width of the Master of the Master-Detail Page. I have followed an approach to create a UWP specific Custom Renderer. Below is my code :

 [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;
            }
        }
    }

I have created the above Custom Renderer. The issue that I am facing is that I am unable to set the value of control.Master as it is a FrameworkElement and what I want is a Page.
control.Width sets the width of the entire page instead of just the Master.

How should I set the control.Master to a page.
If this approach is not correct , Kindly suggest a better way to reduce the width of Master page in UWP.

Answer 1

When we look at the MasterDetailRenderer that is being used in Xamarin Forms itself, you'll see that the actual control rendered is one of type MasterDetailControl ( https://github.com/xamarin/Xamarin.Forms/blob/365a60e745d447992e870dd6272226e6b11ec275/Xamarin.Forms.Platform.UAP/MasterDetailControl.cs ).

Problem we face here, is that the actual property to change the size of the Master part is not accessibel because we can't get to the SplitView control inside the MasterDetailControl. Normally you should use the OpenPaneLenght property to tweak the size ( https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.splitview.openpanelength#Windows_UI_Xaml_Controls_SplitView_OpenPaneLength ).

But! What you could do, is set that property inside the template that is being used for the MasterDetailControl! XAML will override any template if you provide your own at your app level.

So copy paste the XAML from the MasterDetailControlStyle ( https://github.com/xamarin/Xamarin.Forms/blob/365a60e745d447992e870dd6272226e6b11ec275/Xamarin.Forms.Platform.UAP/MasterDetailControlStyle.xaml ) and paste it inside your App.Xaml in the UWP project inside a ResourceDictionary tag. Last thing to do is add a value for the OpenPaneLength property of the SplitView control.

Like so - I've set it to 10 as example here to show that it works:

<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>