Xamarin iOS adding Custom back button

Question

I want to customise back-button so i can prompt user with confirmation box.
For that i have removed default navigation back button by setting its hidden property to 'True'
and i am adding new left bar button item.

But UI for the left bar button is not same as it is for default back button. please find attached screenshot.
Please find below code for Left bar button added-

UIImage image = UIImage.FromBundle("BackButton");
UIButton customButton = new UIButton(UIButtonType.Custom);

customButton.SetImage(image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), UIControlState.Normal);
customButton.Frame = new CGRect(0, 0,
100, 44);
customButton.ImageEdgeInsets = new UIEdgeInsets(0,
-40, 0, -40);
this.NavigationItem.SetHidesBackButton(true, false);
var backButton = new
UIBarButtonItem(customButton);

this.NavigationItem.LeftBarButtonItem = backButton;

Thanks in advance !

Answer 1

You would better scale the image before you set the background image.

UIImage image = UIImage.FromBundle("BackButton").ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);


UIImage newImg = ScalingImageToSize(image, new CGSize(30, 30)).ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
UIButton customButton = new UIButton(UIButtonType.Custom);

            customButton.SetImage(newImg.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), UIControlState.Normal);
customButton.Frame = new CGRect(0, 0, 50, 50);
customButton.ImageEdgeInsets = new UIEdgeInsets(0, -40, 0, -40);

NavigationController.NavigationBar.BackIndicatorImage = newImg;
NavigationController.NavigationBar.BackIndicatorTransitionMaskImage = newImg;

UIBarButtonItem buttonItem = new UIBarButtonItem(customButton);

NavigationItem.BackBarButtonItem = buttonItem;

 public UIImage ScalingImageToSize(UIImage sourceImage, CGSize newSize)
    {

        if (UIScreen.MainScreen.Scale == 2.0) //@2x iPhone 6 7 8 
        {
            UIGraphics.BeginImageContextWithOptions(newSize, false, 2.0f);
        }


        else if (UIScreen.MainScreen.Scale == 3.0) //@3x iPhone 6p 7p 8p...
        {
            UIGraphics.BeginImageContextWithOptions(newSize, false, 3.0f);
        }

        else
        {
            UIGraphics.BeginImageContext(newSize);
        }

        sourceImage.Draw(new CGRect(0, 0, newSize.Width, newSize.Height));

        UIImage newImage = UIGraphics.GetImageFromCurrentImageContext();

        UIGraphics.EndImageContext();

        return newImage;

    }

Option 2

You can create a custom navigationBar as you want .

public class xxxViewController: UIViewController
    {
        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);



            NavigationController.NavigationBar.Hidden = true;


            double height = IsiphoneX();

            UIView backView = new UIView()
            {
                BackgroundColor = UIColor.White,
                Frame = new CGRect(0,20,UIScreen.MainScreen.Bounds.Width, height),

            };

            // set 
            UIButton backBtn = new UIButton() {

                Frame = new CGRect(20, height-44, 40, 44),
                Font = UIFont.SystemFontOfSize(18),

            } ;


            UIImage image = UIImage.FromBundle("BackButton");

            UIImage newImg = ScalingImageToSize(image, new CGSize(30, 30));




 backBtn.SetBackgroundImage(newImg.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), UIControlState.Normal);



            backBtn.AddTarget(this,new Selector("GoBack"),UIControlEvent.TouchUpInside);

            UILabel titleLabel = new UILabel() {
                Frame=new CGRect(UIScreen.MainScreen.Bounds.Width/2-75, 0,150, height),
                Font = UIFont.SystemFontOfSize(20),
                Text = "xxx",
                TextColor = UIColor.Black,
                Lines = 0,

            };

            UILabel line = new UILabel() {

                Frame = new CGRect(0, height, UIScreen.MainScreen.Bounds.Width, 0.5),
                BackgroundColor = UIColor.Black,

            };

            backView.AddSubview(backBtn);
            backView.AddSubview(titleLabel);
            backView.AddSubview(line);

            View.AddSubview(backView);
        }


         double IsiphoneX()
        {

            double height = 44;

            if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0))
            {
                if (UIApplication.SharedApplication.Delegate.GetWindow().SafeAreaInsets.Bottom > 0.0)
                {
                    height = 64;
                }
            }

            return height;
        }

        [Export("GoBack")]
        void GoBack()
        {
            NavigationController.PopViewController(true);
        }

        public override void ViewWillDisappear(bool animated)
        {
            base.ViewWillDisappear(animated);

            NavigationController.NavigationBar.Hidden = false;
        }

    }

You can set the property of title , backButton and navigationBar as you need (such as text , color ,BackgroundColor ,font e.g.)