Fixed clipping of WinUI/UWP MapPath

This commit is contained in:
ClemensFischer 2023-01-21 14:41:03 +01:00
parent fd13503613
commit a282ba1b5e
6 changed files with 101 additions and 26 deletions

View file

@ -264,17 +264,7 @@ namespace MapControl
private static void ArrangeElement(FrameworkElement element, Point position)
{
var rect = new Rect(position.X, position.Y, 0d, 0d);
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;
}
var rect = new Rect(position, GetDesiredSize(element));
switch (element.HorizontalAlignment)
{
@ -309,17 +299,7 @@ namespace MapControl
private static void ArrangeElement(FrameworkElement element, Size parentSize)
{
var rect = new Rect();
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;
}
var rect = new Rect(new Point(), GetDesiredSize(element));
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);
}
}
}

View file

@ -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>

View file

@ -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;
}
}
}

View file

@ -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>

View file

@ -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>

View file

@ -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"/>