TargetInvocationException in customized ContentPageRenderer Android

Question

I'm trying to move a Button in the NavigationBar from the right side to the left in a custom page renderer in Android. CropDetailPage is a content page in the shared code.

[assembly: ExportRenderer(typeof(CropDetailPage),typeof(CropDetailPageRenderer))]
namespace MyApp.Droid
{
public class CropDetailPageRenderer : PageRenderer
    {
        public CropDetailPageRenderer(Context context)
            : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || Element == null)
            {
                return;
            }

            var bar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
            bar.SetBackgroundColor(Android.Graphics.Color.Azure);
            // Only have 1 child
            bar.GetChildAt(0).SetX(10); 
        }
    }
}

I'm getting this exception when I try to open the refered page

System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation.

I've tried commenting the code inside my OnElementChanged method, but the exception keeps happening, so I know it's not coming from the logic.

Also, is this the right way to customize the appearance of a Toolbar? Since I wanted to move my button to the left, I just thought of changing the X coordinate.

Any ideas to what's happening ?

Edit: Xaml for button

<ContentPage.ToolbarItems>
    <ToolbarItem Text="Back" Command="{Binding GoBackCommand}"></ToolbarItem>
</ContentPage.ToolbarItems>
<ContentPage.Content>
 ....
</ContentPage.Content>

Answer 1

I'm trying to move a Button in the NavigationBar from the right side to the left

If your Button is in your Toolbar.axml, you could change the Button's position like this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
       <Button
           android:text="Button"
           android:layout_alignParentRight="true"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>
    </RelativeLayout>

</android.support.v7.widget.Toolbar>

Update:

You could refer to my answer:

Herer is a simple solution, create a picture which color is same with the Toolbar, in my project, my picture is blue.png :

Place it left side of the Toolbar, add some blank ToolbarItem between the picture and your ToolbarItem to adjust the space.

<ContentPage.ToolbarItems>
    <ToolbarItem  Text="Button" Order="Primary" Priority="0"/>
    <ToolbarItem  Order="Primary" Priority="0" />
    <ToolbarItem  Order="Primary" Priority="0" />
    <ToolbarItem  Order="Primary" Priority="0" />
    <ToolbarItem  Order="Primary" Priority="0" />
    <ToolbarItem  Order="Primary" Priority="0" />
    <ToolbarItem  Order="Primary" Priority="0" />
    <ToolbarItem  Order="Primary" Priority="1" Icon="blue"/>
</ContentPage.ToolbarItems>

Effect.

Update 2:

You could try using BoxView from the blog: Custom App Header in Forms, it allows us to easily change height, icons, font-family background gradient for all content page with the header.