Fixed clipping of WinUI/UWP MapPath

MapControl/Shared/MapPanel.cs

@@ -264,17 +264,7 @@ namespace MapControl
 
         private static void ArrangeElement(FrameworkElement element, Point position)
         {
-            var rect = new Rect(position.X, position.Y, 0d, 0d);
+            var rect = new Rect(position, GetDesiredSize(element));
-
-            if (element.DesiredSize.Width >= 0d && element.DesiredSize.Width < double.PositiveInfinity)
-            {
-                rect.Width = element.DesiredSize.Width;
-            }
-
-            if (element.DesiredSize.Height >= 0d && element.DesiredSize.Height < double.PositiveInfinity)
-            {
-                rect.Height = element.DesiredSize.Height;
-            }
 
             switch (element.HorizontalAlignment)
             {
@@ -309,17 +299,7 @@ namespace MapControl
 
         private static void ArrangeElement(FrameworkElement element, Size parentSize)
         {
-            var rect = new Rect();
+            var rect = new Rect(new Point(), GetDesiredSize(element));
-
-            if (element.DesiredSize.Width >= 0d && element.DesiredSize.Width < double.PositiveInfinity)
-            {
-                rect.Width = element.DesiredSize.Width;
-            }
-
-            if (element.DesiredSize.Height >= 0d && element.DesiredSize.Height < double.PositiveInfinity)
-            {
-                rect.Height = element.DesiredSize.Height;
-            }
 
             switch (element.HorizontalAlignment)
             {
@@ -391,5 +371,25 @@ namespace MapControl
 
             element.Arrange(rect);
         }
+
+        internal static Size GetDesiredSize(UIElement element)
+        {
+            var width = 0d;
+            var height = 0d;
+
+            if (element.DesiredSize.Width >= 0d &&
+                element.DesiredSize.Width < double.PositiveInfinity)
+            {
+                width = element.DesiredSize.Width;
+            }
+
+            if (element.DesiredSize.Height >= 0d &&
+                element.DesiredSize.Height < double.PositiveInfinity)
+            {
+                height = element.DesiredSize.Height;
+            }
+
+            return new Size(width, height);
+        }
     }
 }

MapControl/UWP/MapControl.UWP.csproj

@@ -230,6 +230,9 @@
     <Compile Include="..\WinUI\Animatable.WinUI.cs">
       <Link>Animatable.WinUI.cs</Link>
     </Compile>
+    <Compile Include="..\WinUI\CanvasPanel.cs">
+      <Link>CanvasPanel.cs</Link>
+    </Compile>
     <Compile Include="..\WinUI\GeoImage.WinUI.cs">
       <Link>GeoImage.WinUI.cs</Link>
     </Compile>

MapControl/WinUI/CanvasPanel.cs

@@ -0,0 +1,48 @@
+// XAML Map Control - https://github.com/ClemensFischer/XAML-Map-Control
+// Copyright © 2023 Clemens Fischer
+// Licensed under the Microsoft Public License (Ms-PL)
+
+using System.Linq;
+using Windows.Foundation;
+#if WINUI
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+#elif UWP
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+#endif
+
+namespace MapControl
+{
+    /// <summary>
+    /// Replacement for WinUI and UWP Canvas, which clips MapPath child elements.
+    /// </summary>
+    public class CanvasPanel : Panel
+    {
+        protected override Size MeasureOverride(Size availableSize)
+        {
+            availableSize = new Size(double.PositiveInfinity, double.PositiveInfinity);
+
+            foreach (var element in Children.OfType<UIElement>())
+            {
+                element.Measure(availableSize);
+            }
+
+            return new Size();
+        }
+
+        protected override Size ArrangeOverride(Size finalSize)
+        {
+            foreach (var element in Children.OfType<UIElement>())
+            {
+                var x = Canvas.GetLeft(element);
+                var y = Canvas.GetTop(element);
+                var p = new Point(double.IsNaN(x) ? 0d : x, double.IsNaN(y) ? 0d : y);
+
+                element.Arrange(new Rect(p, MapPanel.GetDesiredSize(element)));
+            }
+
+            return finalSize;
+        }
+    }
+}

SampleApps/UniversalApp/MainPage.xaml

@@ -17,7 +17,7 @@
                 <Setter Property="Template">
                     <Setter.Value>
                         <ControlTemplate TargetType="map:MapItem">
-                            <Canvas>
+                            <map:CanvasPanel>
                                 <VisualStateManager.VisualStateGroups>
                                     <VisualStateGroup x:Name="CommonStates">
                                         <VisualState x:Name="Normal"/>
@@ -54,12 +54,20 @@
                                         </VisualState>
                                     </VisualStateGroup>
                                 </VisualStateManager.VisualStateGroups>
+                                <!-- Path with transformed Geometry -->
                                 <Path Fill="Red" Opacity="0.4" IsHitTestVisible="False">
                                     <Path.Data>
                                         <EllipseGeometry RadiusX="20" RadiusY="20"
                                                          Transform="{Binding MapTransform, RelativeSource={RelativeSource TemplatedParent}}"/>
                                     </Path.Data>
                                 </Path>
+                                <!-- MapPath with Location, requires CanvasPanel parent to avoid clipping -->
+                                <map:MapPath Stroke="Green" StrokeThickness="2" IsHitTestVisible="False"
+                                             Location="{TemplateBinding Location}">
+                                    <map:MapPath.Data>
+                                        <EllipseGeometry RadiusX="20" RadiusY="20"/>
+                                    </map:MapPath.Data>
+                                </map:MapPath>
                                 <Path x:Name="selectedPath" Fill="White" Opacity="0">
                                     <Path.Data>
                                         <EllipseGeometry RadiusX="12" RadiusY="12"/>
@@ -73,7 +81,7 @@
                                 <Grid Canvas.Left="15" Canvas.Top="-8">
                                     <TextBlock Margin="2,0,2,0" Text="{Binding Name}"/>
                                 </Grid>
-                            </Canvas>
+                            </map:CanvasPanel>
                         </ControlTemplate>
                     </Setter.Value>
                 </Setter>

SampleApps/WinUiApp/MainWindow.xaml

@@ -24,7 +24,7 @@
                 <Setter Property="Template">
                     <Setter.Value>
                         <ControlTemplate TargetType="map:MapItem">
-                            <Canvas>
+                            <map:CanvasPanel>
                                 <VisualStateManager.VisualStateGroups>
                                     <VisualStateGroup x:Name="CommonStates">
                                         <VisualState x:Name="Normal"/>
@@ -61,12 +61,20 @@
                                         </VisualState>
                                     </VisualStateGroup>
                                 </VisualStateManager.VisualStateGroups>
+                                <!-- Path with transformed Geometry -->
                                 <Path Fill="Red" Opacity="0.4" IsHitTestVisible="False">
                                     <Path.Data>
                                         <EllipseGeometry RadiusX="20" RadiusY="20"
                                                          Transform="{Binding MapTransform, RelativeSource={RelativeSource TemplatedParent}}"/>
                                     </Path.Data>
                                 </Path>
+                                <!-- MapPath with Location, requires CanvasPanel parent to avoid clipping -->
+                                <map:MapPath Stroke="Green" StrokeThickness="2" IsHitTestVisible="False"
+                                             Location="{TemplateBinding Location}">
+                                    <map:MapPath.Data>
+                                        <EllipseGeometry RadiusX="20" RadiusY="20"/>
+                                    </map:MapPath.Data>
+                                </map:MapPath>
                                 <Path x:Name="selectedPath" Fill="White" Opacity="0">
                                     <Path.Data>
                                         <EllipseGeometry RadiusX="12" RadiusY="12"/>
@@ -80,7 +88,7 @@
                                 <Grid Canvas.Left="15" Canvas.Top="-8">
                                     <TextBlock Margin="2,0,2,0" Text="{Binding Name}"/>
                                 </Grid>
-                            </Canvas>
+                            </map:CanvasPanel>
                         </ControlTemplate>
                     </Setter.Value>
                 </Setter>

SampleApps/WpfApplication/MainWindow.xaml

@@ -48,12 +48,20 @@
                                         </VisualState>
                                     </VisualStateGroup>
                                 </VisualStateManager.VisualStateGroups>
+                                <!-- Path with transformed Geometry -->
                                 <Path Fill="Red" Opacity="0.4" IsHitTestVisible="False">
                                     <Path.Data>
                                         <EllipseGeometry RadiusX="20" RadiusY="20"
                                                          Transform="{Binding MapTransform, RelativeSource={RelativeSource TemplatedParent}}"/>
                                     </Path.Data>
                                 </Path>
+                                <!-- MapPath with Location -->
+                                <map:MapPath Stroke="Green" StrokeThickness="2" IsHitTestVisible="False"
+                                             Location="{TemplateBinding Location}">
+                                    <map:MapPath.Data>
+                                        <EllipseGeometry RadiusX="20" RadiusY="20"/>
+                                    </map:MapPath.Data>
+                                </map:MapPath>
                                 <Path x:Name="selectedPath" Fill="White" Opacity="0">
                                     <Path.Data>
                                         <EllipseGeometry RadiusX="12" RadiusY="12"/>