How to customize a MkMapView Callout/View in Xamarin.Forms.Maps

Question

I want to fully customize a Callout in iOS in order to show a picture to the left and 3 lines of text however I can't seem to display the lines, it just shows one line no matter what I've tried, here's my code to get a custom callout:

CustomMapRenderer.cs

protected override MKAnnotationView GetViewForAnnotation(MKMapView mapView, IMKAnnotation annotation)
    {
        MKAnnotationView annotationView = null;

        if (annotation is MKUserLocation)
            return null;

        var customPin = GetCustomPin(annotation as MKPointAnnotation);
        if (customPin == null)
        {
            return null;
        }

        annotationView = mapView.DequeueReusableAnnotation(customPin.Name);
        if (annotationView == null)
        {
            annotationView = new CustomMKAnnotationView(annotation, customPin.Name);
            annotationView.Image = UIImage.FromFile("icon.png");
            annotationView.CalloutOffset = new CGPoint(0, 0);
            annotationView.LeftCalloutAccessoryView = new UIImageView(UIImage.FromFile("icon.png"));
            annotationView.RightCalloutAccessoryView = new UIImageView(UIImage.FromFile("icon_heart_red_24.png"));
            ((CustomMKAnnotationView)annotationView).Name = customPin.Name;
            ((CustomMKAnnotationView)annotationView).Url = customPin.Url;
            ((CustomMKAnnotationView)annotationView).Description = customPin.PlaceDescription;
            annotationView.CanShowCallout = true;
        }
        else
        {
            annotationView.Annotation = annotation;
        }

        configureDetailView(annotationView);

        return annotationView;
    }


void configureDetailView(MKAnnotationView annotationView)
    {
        int width = 100;
        int height = 50;

        var snapshotView = new UIView();
        snapshotView.TranslatesAutoresizingMaskIntoConstraints = false;
        NSDictionary views = NSDictionary.FromObjectAndKey(snapshotView, new NSString("snapshotView"));
        snapshotView.AddConstraints(NSLayoutConstraint.FromVisualFormat("H:[snapshotView(200)]", new NSLayoutFormatOptions(), null, views));
        snapshotView.AddConstraints(NSLayoutConstraint.FromVisualFormat("V:[snapshotView(50)]", new NSLayoutFormatOptions(), null, views));

        var options = new MKMapSnapshotOptions();
        options.Size = new CGSize(width, height);
        options.MapType = MKMapType.SatelliteFlyover;
        options.Camera = MKMapCamera.CameraLookingAtCenterCoordinate(annotationView.Annotation.Coordinate, 250, 65, 0);

        var snapshotter = new MKMapSnapshotter(options);
        snapshotter.Start((snapshot, error) =>
        {
            if (snapshot != null)
            {
                UILabel label = new UILabel();
                UILabel label2 = new UILabel();
                UILabel label3 = new UILabel();
                label.Text = ((CustomMKAnnotationView)annotationView).Description;
                label2.Text = ((CustomMKAnnotationView)annotationView).Description2;
                label3.Text = ((CustomMKAnnotationView)annotationView).Description3;
                label.Frame = new CGRect(0, 0, 200, 50);
                // Add your custom controls here
                snapshotView.AddSubviews(label, label2, label3);
            }
        });

        annotationView.DetailCalloutAccessoryView = snapshotView;
    }

I found this code online but I don't know how to add my custom controls like it says in the snapshotter.Start() method.

Can you help me get it to work like this:

//   -------------------------
//  |  ______   Title         |
//  | |      | text           |
//  | |Image | text     Button|
//  | |      | text           |
//  |  ------                 |
//   -------------------------
//

Thank you so much for your help

Answer 1

Try to add code in configureDetailView method .

void configureDetailView(MKAnnotationView annotationView)
        {
            int width = 100;
            int height = 50;

            var snapshotView = new UIView();
            snapshotView.TranslatesAutoresizingMaskIntoConstraints = false;
            NSDictionary views = NSDictionary.FromObjectAndKey(snapshotView, new NSString("snapshotView"));
            snapshotView.AddConstraints(NSLayoutConstraint.FromVisualFormat("H:[snapshotView(200)]", new NSLayoutFormatOptions(), null, views));
            snapshotView.AddConstraints(NSLayoutConstraint.FromVisualFormat("V:[snapshotView(50)]", new NSLayoutFormatOptions(), null, views));

            var options = new MKMapSnapshotOptions();
            options.Size = new CGSize(width, height);
            options.MapType = MKMapType.SatelliteFlyover;
            options.Camera = MKMapCamera.CameraLookingAtCenterCoordinate(annotationView.Annotation.Coordinate, 250, 65, 0);

            var snapshotter = new MKMapSnapshotter(options);
            snapshotter.Start((snapshot, error) =>
            {
                if (snapshot != null)
                {
                    UILabel label = new UILabel();
                    UILabel label2 = new UILabel();
                    UILabel label3 = new UILabel();
                    label.Text = ((CustomMKAnnotationView)annotationView).Description1;
                    label2.Text = ((CustomMKAnnotationView)annotationView).Description2;
                    label3.Text = ((CustomMKAnnotationView)annotationView).Description3;
                    UIButton uIButton = new UIButton(UIButtonType.System);
                    uIButton.SetTitle("hello", UIControlState.Normal);
                    
                    uIButton.Frame = new CGRect(150, 10,100,15);
                    label.Frame = new CGRect(50, 0, 100, 15);
                    label2.Frame = new CGRect(50, 10, 100, 15);
                    label3.Frame = new CGRect(50, 20, 100, 15);
                    // Add your custom controls here
                    snapshotView.AddSubviews(label, label2, label3,uIButton);
                }
            });

            annotationView.DetailCalloutAccessoryView = snapshotView;
        }