- Use ContentView for ViewAnnotation instead

Author: tuyen-vuduc

src/libs/Mapbox.Maui/IMapboxView.cs

@@ -30,7 +30,7 @@ public partial interface IMapboxView : IView
 
     Light Light { get; set; }
 
-    DataTemplate DefaultViewAnnotationTemplate { get; set; }
+    ContentView AnnotationView { get; set; }
     IViewAnnotationController ViewAnnotationController { get; }
 
     IAnnotationController AnnotationController { get; }

src/libs/Mapbox.Maui/MapboxView.cs

@@ -223,7 +223,7 @@ public MapboxStyle MapboxStyle
         set => SetValue(MapboxStyleProperty, value);
     }
 
-    public DataTemplate DefaultViewAnnotationTemplate { get; set; }
+    public ContentView AnnotationView { get; set; }
     public IViewAnnotationController ViewAnnotationController { get; internal set; }
     public IAnnotationController AnnotationController { get; internal set; }
     public IMapFeatureQueryable QueryManager { get; internal set; }

src/libs/Mapbox.Maui/Models/ViewAnnotations/IViewAnnotationController.cs

@@ -2,6 +2,6 @@
 
 public interface IViewAnnotationController
 {
-    public void AddViewAnnotation(ViewAnnotationOptions options, DataTemplate dataTemplate = default);
+    public void AddViewAnnotation(ViewAnnotationOptions options, ContentView contentView = default);
     public void RemoveAllViewAnnotations();
 }

src/libs/Mapbox.Maui/Platforms/Android/ViewAnnotations/MapboxViewHandler.ViewAnnotations.cs

@@ -1,39 +1,41 @@
 
+using Android.Content;
+using Android.Views;
 using MapboxMaui.ViewAnnotations;
+using Microsoft.Maui.Platform;
 
 namespace MapboxMaui;
 
 partial class MapboxViewHandler : IViewAnnotationController
 {
-    public void AddViewAnnotation(ViewAnnotationOptions options, DataTemplate dataTemplate = null)
+    public void AddViewAnnotation(ViewAnnotationOptions options, ContentView contentView = default)
     {
         var mapView = mapboxFragment?.MapView;
 
         if (mapView == null) return;
 
-        dataTemplate = dataTemplate ?? VirtualView.DefaultViewAnnotationTemplate;
+        contentView = contentView ?? VirtualView.AnnotationView;
 
-        if (dataTemplate == null)
+        if (contentView == null)
         {
             throw new InvalidOperationException("DataTemplate must be provided eiher via this method parameter or via DefaultViewAnnotationTemplate");
         }
 
-        var xview = (View)dataTemplate.CreateContent();
-        xview.Parent = VirtualView as Element;
-        xview.BindingContext = options;
-        xview.HeightRequest = options.Height ?? xview.HeightRequest;
-        xview.WidthRequest = options.Width ?? xview.WidthRequest;
+        contentView.Parent = VirtualView as Element;
+        contentView.BindingContext = options;
 
-        var platformHandler = TemplateHelpers.GetHandler(
-            xview,
-            VirtualView.Handler.MauiContext);
-        platformHandler.PlatformView.LayoutParameters = new Android.Views.ViewGroup.LayoutParams(
-            (int) options.Width.Value.PointToPixel(),
-            (int)options.Height.Value.PointToPixel()
-        );
+        var handler = contentView.ToHandler(MauiContext);
+
+        var viewGroup = new ContentViewGroup(Context)
+        {
+            LayoutParameters = new ViewGroup.LayoutParams(
+                ViewGroup.LayoutParams.WrapContent,
+                ViewGroup.LayoutParams.WrapContent),
+            CrossPlatformLayout = handler.VirtualView as ICrossPlatformLayout,
+        };
 
         mapView.ViewAnnotationManager.AddViewAnnotation(
-            platformHandler.PlatformView,
+            viewGroup,
             options.ToPlatform());
     }
 
@@ -45,4 +47,26 @@ public void RemoveAllViewAnnotations()
 
         mapView.ViewAnnotationManager.RemoveAllViewAnnotations();
     }
+
+    class ViewAnnotationView : ViewGroup
+    {
+        public ViewAnnotationView(Context context)
+            : base(context)
+        {
+            
+        }
+
+        protected override void OnLayout(bool changed, int l, int t, int r, int b)
+        {
+            if (ChildCount == 0) return;
+
+            var view = this.GetChildAt(0);
+            view.Layout(l, t, r, b);
+        }
+
+        protected override void OnMeasure(int widthMeasureSpec, int heightMeasureSpec)
+        {
+            base.OnMeasure(widthMeasureSpec, heightMeasureSpec);
+        }
+    }
 }

src/libs/Mapbox.Maui/Platforms/iOS/ViewAnnotations/MapboxViewHandler.ViewAnnotations.cs

@@ -1,33 +1,31 @@
 
 using MapboxMapsObjC;
 using MapboxMaui.ViewAnnotations;
+using Microsoft.Maui.Platform;
 
 namespace MapboxMaui;
 
 partial class MapboxViewHandler : IViewAnnotationController
 {
-    public void AddViewAnnotation(ViewAnnotationOptions options, DataTemplate dataTemplate = null)
+    public void AddViewAnnotation(ViewAnnotationOptions options, Microsoft.Maui.Controls.ContentView contentView = default)
     {
         var mapView = PlatformView.MapView;
 
         if (mapView == null) return;
 
-        dataTemplate = dataTemplate ?? VirtualView.DefaultViewAnnotationTemplate;
+        contentView = contentView ?? VirtualView.AnnotationView;
 
-        if (dataTemplate == null)
+        if (contentView == null)
         {
             throw new InvalidOperationException("DataTemplate must be provided eiher via this method parameter or via DefaultViewAnnotationTemplate");
         }
 
-        var xview = (View)dataTemplate.CreateContent();
-        xview.Parent = VirtualView as Element;
-        xview.BindingContext = options;
-        xview.HeightRequest = options.Height ?? xview.HeightRequest;
-        xview.WidthRequest = options.Width ?? xview.WidthRequest;
+        contentView.Parent = VirtualView as Element;
+        contentView.BindingContext = options;
 
-        var platformHandler = TemplateHelpers.GetHandler(
-            xview,
-            VirtualView.Handler.MauiContext);
+        var platformHandler = contentView.ToHandler(
+            VirtualView.Handler.MauiContext
+        );
 
         mapView
             .ViewAnnotations()

src/qs/MapboxMauiQs/Examples/MarkersAndCallouts/ViewAnnotations/64.ViewAnnotationWithPointAnnotation/ViewAnnotationWithPointAnnotationExample.cs

@@ -21,7 +21,7 @@ public ViewAnnotationWithPointAnnotationExample()
         iOSPage.SetUseSafeArea(this, false);
         Content = map = new MapboxView();
 
-        map.DefaultViewAnnotationTemplate = new DataTemplate(typeof(SimpleViewAnnodationView));
+        map.AnnotationView = new SimpleViewAnnodationView();
 
         map.MapReady += Map_MapReady;
         map.MapLoaded += Map_MapLoaded;
@@ -105,23 +105,20 @@ private void AddPointAnnotationAt(IPosition value)
         pointAnnotationManager.AddAnnotations(pointAnnotation);
     }
 
-    class SimpleViewAnnodationView : Grid
+    class SimpleViewAnnodationView : ContentView
     {
         public SimpleViewAnnodationView()
         {
-            RowDefinitions.Add(new RowDefinition
+            var grid = new Grid()
             {
-                Height = 16,
-            });
-            RowDefinitions.Add(new RowDefinition
-            {
-                Height = 48,
-            });
-            RowDefinitions.Add(new RowDefinition
-            {
-                Height = 32,
-            });
-            BackgroundColor = Colors.Purple;
+                RowDefinitions =
+                {
+                    new() { Height = 16 },
+                    new() { Height = 48 },
+                    new() { Height = 32 },
+                },
+                BackgroundColor = Colors.Purple,
+            };
 
             var label = new Label
             {
@@ -156,14 +153,16 @@ public SimpleViewAnnodationView()
                 HorizontalOptions = LayoutOptions.Center,
             };
 
-            Add(label);
-            Add(btnClose);
-            Add(btnSelect);
+            grid.Add(label, row: 1);
+            grid.Add(btnClose, row: 0);
+            grid.Add(btnSelect, row: 2);
 
-            Grid.SetRow(btnClose, 0);
             Grid.SetRowSpan(btnClose, 2);
-            Grid.SetRow(label, 1);
-            Grid.SetRow(btnSelect, 2);
+
+            Content = grid;
+
+            HeightRequest = 144;
+            WidthRequest = 168;
         }
     }