Silverlight ZOrder doesn' work for me in Bing control

Question

I'm trying to make my popup widget to be on top in a map but setting Canvas.ZOrder doesn't help.

Here is XAML:

<m:Map x:Name="MainMap"
            Margin="0,6,3,3"
            ZoomLevel="{Binding MapZoomLevel, Mode=TwoWay}"
            Center="{Binding MapCenter, Mode=TwoWay}"
            CopyrightVisibility="Collapsed"
            CredentialsProvider="{Binding BingCredentialsProvider}"
            UseInertia="True" 
            Mode="Road" Grid.Column="2" Grid.Row="1">
            <m:MapItemsControl ItemsSource="{Binding Source={StaticResource WorkLayerData}}">
                <m:MapItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Canvas
                            m:MapLayer.Position="{Binding Location}">
                            <Button                                
                                Width="{Binding PushpinWidth}" Height="{Binding PushpinWidth}"
                                Margin="{Binding PushpinMargin}"
                                Style="{StaticResource LooklessButtonStyle}"
                                Command="{Binding DataContext.SelectedPushpinChangedCommand, ElementName=LayoutRoot}"
                                CommandParameter="{Binding}"
                                Cursor="Hand">
                                <Ellipse
                                    Width="{Binding PushpinWidth}" Height="{Binding PushpinWidth}" Stroke="Black" Fill="{Binding IsGPSDataRecent, Converter={StaticResource BoolToGreenRedBrushConverter}}" StrokeThickness="1">
                                    <ToolTipService.ToolTip>
                                        <TextBlock Text="{Binding DeviceId}" />
                                    </ToolTipService.ToolTip>
                                </Ellipse>
                            </Button>

                            <!-- Show black dot over actual GPS point -->
                            <Ellipse
                                Width="10" Height="10" Stroke="Black" Fill="Black" StrokeThickness="1"
                                Margin="-5,-5,0,0"
                                Visibility="{Binding IsSelected, Converter={StaticResource BoolToVisibilityConverter}}" />

                            <Border
                                Width="200"
                                BorderThickness="1" BorderBrush="DarkGray"
                                Visibility="{Binding IsSelected, Converter={StaticResource BoolToVisibilityConverter}}">
                                <Border.Effect>
                                    <DropShadowEffect BlurRadius="5"  Color="#FF000000" Opacity="0.5" ShadowDepth="2" />
                                </Border.Effect>
                                <ContentControl Template="{StaticResource TrackedAssetControlTemplate}" />
                            </Border>
                        </Canvas>                                               
                    </DataTemplate>
                </m:MapItemsControl.ItemTemplate>
            </m:MapItemsControl>
        </m:Map>

I tried to set ZIndex on a border but no luck. Here is how it looks when IsSelected = true (see other dots with ZIndex higher on top)

Answer 1

In order to bring an item in a MapItemsControl to front it is necessary to set the ZIndex of the item container. You can do that in code behind by retrieving the item container from the MapItemsControl's ItemContainerGenerator.

In case you don't want that, you could apply an attached helper property to the top-level container (the Canvas) in the DataTemplate for your map items. As this Canvas is the direct child of the item container, the helper property would have to set the ZIndex of the visual parent of the Canvas. If that sounds weird, here is the code for the attached property, in a helper class called MapItem:

public class MapItem
{
    public static readonly DependencyProperty ZIndexProperty =
        DependencyProperty.RegisterAttached("ZIndex", typeof(int),
            typeof(MapItem), new PropertyMetadata(ZIndexChanged));

    public static int GetZIndex(DependencyObject obj)
    {
        return (int)obj.GetValue(ZIndexProperty);
    }

    public static void SetZIndex(DependencyObject obj, int value)
    {
        obj.SetValue(ZIndexProperty, value);
    }

    private static void ZIndexChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        // set ZIndex on parent of obj
        Canvas.SetZIndex((UIElement)VisualTreeHelper.GetParent(obj), (int)e.NewValue);
    }
}

In your DataTemplate you may now bind the helper property to one of your VM properties, perhaps by using an appropriate binding converter:

<DataTemplate x:Key="MapItemDataTemplate">
    <!-- setting the helper property MapItem.ZIndex on Canvas
         sets the Canvas.ZIndex property on the item container -->
    <Canvas local:MapItem.ZIndex="{Binding ...}">
        ...
    </Canvas>
</DataTemplate>