ArrangeOverride not being called on children? - wpf

Question

I'm using an MVVM-oriented fork of the GreatMaps.NET library (https://greatmaps.codeplex.com/), but my question comes down to a basic issue with using a custom Canvas as my ItemsPanel for an ItemsControl. Essentially, the map is an ItemsControl, with a MapCanvas placing its children as follows:
protected override Size ArrangeOverride(Size arrangeSize)
{
foreach (UIElement child in Children)
{
PointLatLng position = new PointLatLng(GetTop(child), GetLeft(child));
GMapControl map = Owner as GMapControl;
if (map != null)
{
GPoint p = map.FromLatLngToLocal(position);
p.Offset(-(long)(map.MapTranslateTransform.X + child.DesiredSize.Width * 0.5), -(long)(map.MapTranslateTransform.Y + child.DesiredSize.Height * 0.5));
Rect rect = new Rect(p.X, p.Y, child.DesiredSize.Width, child.DesiredSize.Height);
child.Arrange(rect);
}
}
return arrangeSize;
}
This works because my ItemContainerStyle binds to Latitude and Longitude in the ViewModel for each map item as follows (along with ZIndex, which I have set to 99 as a placeholder):
<Setter Property="Canvas.Left" Value="{Binding Longitude}" />
<Setter Property="Canvas.Top" Value="{Binding Latitude}" />
<Setter Property="Canvas.ZIndex" Value="{Binding ZIndex}" />
I'm using DataTemplates with DataType fields to adjust how each element gets displayed, and that part is working properly.
There are elements (such as lines for routes on the map) that I need to have not as point-elements but as sequences of subelements. To do this, I just followed the pattern, and made a DataTemplate where I use another MapCanvas bound to the same MapControl as its Owner (here, MapOverlay is just a copy of MapCanvas that overrides OnRender to draw lines between its children):
<DataTemplate DataType="{x:Type viewModels:RouteViewModel}">
<ItemsControl ItemsSource="{Binding Locations}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<wpf:MapOverlay Name="MapOverlay" Owner="{Binding Path=., RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type wpf:GMapControl}}}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding Longitude}" />
<Setter Property="Canvas.Top" Value="{Binding Latitude}" />
<Setter Property="Canvas.ZIndex" Value="{Binding ZIndex}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Ellipse Fill="Blue" Stroke="Black" Width="10" Height="10"></Ellipse>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
To keep the bindings working, the RouteViewModel still has its own Lat/Lng, which seem to only work when I position them at the initial point of the list of points along the route:
public double Latitude => Locations.Select(loc => loc.Latitude).FirstOrDefault();
public double Longitude => Locations.Select(loc => loc.Longitude).FirstOrDefault();
In Summary:
I have a GMapControl ItemsControl using a MapCanvas to geospatially position elements. DataTypes are used to select which DataTemplate gets used for each element. This works for point-based elements such as markers.
One of the DataTemplates is an ItemsControl using yet another MapCanvas variant (MapOverlay) as its ItemsPanel to draw lines between subelements. This works at launch, when its ArrangeOverride executes.
Panning the map works, though ArrangeOverride does not get called in the MapOverlay.
The problem: while my elements appear initially correctly positioned, zooming the map (which is triggering an InvalidateVisual and UpdateLayout via the map control) does not cause ArrangeOverride to be called on the nested MapOverlay. This causes the route to no longer be positioned properly -- it does not scale.
Any suggestions as to why the arrange invalidation is not trickling down to the nested MapOverlay and/or tips on how to fix it?
Addendum: The route was only placed correctly when the map was initially positioned at its first element -- the Latitude/Longitude of the route as a whole is a separate issue that I would welcome ideas on.

Answer 1

Not actually an answer to your question, but it may give you a general idea how to show a route, i.e. a collection of circles connected by lines.
The following sample use the XAML MapControl library, but may well be implemented based on any other map library that has some kind of MapItemsControl (e.g. MS Bing Maps).
The idea is to have a collection of Location instances that make up your route. You would have a MapPolyline and bind its Locations property to the route points collection. Then put a MapItemsControl on top of it and bind its ItemsSource to the same collection. Note that the ItemTemplate uses Path controls with EllipseGeometries instead of Ellipses, because they are centered at the point location, while Ellipses are top/left aligned.
<map:MapPanel>
<map:MapPolyline Locations="{Binding RouteLocations}"
Stroke="DarkBlue" StrokeThickness="3"/>
<map:MapItemsControl ItemsSource="{Binding RouteLocations}">
<map:MapItemsControl.ItemContainerStyle>
<Style TargetType="map:MapItem">
<Setter Property="map:MapPanel.Location" Value="{Binding}"/>
</Style>
</map:MapItemsControl.ItemContainerStyle>
<map:MapItemsControl.ItemTemplate>
<DataTemplate>
<Path Fill="Red">
<Path.Data>
<EllipseGeometry RadiusX="5" RadiusY="5"/>
</Path.Data>
</Path>
</DataTemplate>
</map:MapItemsControl.ItemTemplate>
</map:MapItemsControl>
</map:MapPanel>
If the route points aren't Locations you could use binding converters in both bindings to convert from your route point type to Location.