Editing and using the Xamarin.Forms source code

Question

I was wondering if it was possible to edit the Xamarin.Forms source code and then use the edited one like you normally would in your xamarin.forms project.

Basically, my goal would be to change the PhoneMasterDetailRenderer in order to change the width value of the Master page. (It is a percentage of the screen, which is 0.8, and so by changing that it should adjust the size of the master?)

Here is the section of code I wish to change:

    void LayoutChildren(bool animated)
    {
        var frame = Element.Bounds.ToRectangleF();
        var masterFrame = frame;
        masterFrame.Width = (int)(Math.Min(masterFrame.Width, masterFrame.Height) * 0.8);

        ...
    }

The issue of not being able to change the width of the master has been a problem for a very long time, and hopefully this may lead to a solution.

Thanks, Daniel.

Answer 1

I don't recommend you to edit the source code. But we can also create our own MasterDetailPage's Renderer. It may be a little difficult, let's do this step by step.

Firstly, define a BindableProperty in our own MasterDetailPage class like:

public readonly static BindableProperty WidthRatioProperty =
            BindableProperty.Create("WidthRatio",
            typeof(float),
            typeof(MyMasterDetailPage),
            (float)0.2);

public float WidthRatio
{
    get
    {
        return (float)GetValue(WidthRatioProperty);
    }
    set
    {
        SetValue(WidthRatioProperty, value);
    }
}

Secondly, try to create our own renderer instead of using the form's default renderer. I post my source code here about my own renderer. In this class I use widthRatio changing the master's width. This property can be set in:

void HandlePropertyChanged(object sender, PropertyChangedEventArgs e)
{
    ...
    else if(e.PropertyName == "WidthRatio")
    {
        widthRatio = ((MyMasterDetailPage)Element).WidthRatio;
    }
}

At last, create the custom renderer inheriting the renderer above like:

[assembly: ExportRenderer(typeof(MyMasterDetailPage), typeof(MyMasterDetailPageRenderer))]
namespace MasterDetailDemo.iOS
{
    public class MyMasterDetailPageRenderer : MyPhoneMasterDetailRenderer
    {
    }
}

You can set the property WidthRatio's value in forms's MasterDetailPage to change the width now. You can run my demo to test it.

Besides if you want to do this on Android, please refer to this thread.