CODEWITHSUNDEEP
silverlightbing-mapswindows-phone-7.1windows-phone-7
Stefan Cvetanovski
Stefan Cvetanovski

Reputation: 298

ZIndex of pushpins in WP7 bing map control

I have a Bing silverlight map control for Windows phone 7. I am trying to display on top currently selected pushpin. Here is the snippet:

<my:Map x:Name="map" Canvas.ZIndex="1" CredentialsProvider="{StaticResource Credentials}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                CopyrightVisibility="Collapsed" LogoVisibility="Collapsed">
            <my:MapItemsControl x:Name="Pushpins">
                <my:MapItemsControl.ItemTemplate >
                    <DataTemplate>
                        <my:Pushpin Location="{Binding Location}" Canvas.ZIndex="{Binding Zindex}" PositionOrigin="0.515625,0.859375" Content="{Binding Id}" Template="{StaticResource PushpinControlTemplate}" Tap="Pushpin_Tap"/>
                    </DataTemplate>
                </my:MapItemsControl.ItemTemplate>
            </my:MapItemsControl>
</my:Map>

The control is ignoring the ZIndex. Am I missing something or the ZIndex is not supported. The ZIndex is property of a class which implements INotifyPropertyChanged

private int _zIndex;
    public int Zindex
    {
        get { return _zIndex; }
        set
        {
            _zIndex = value;
            OnPropertyChanged(new PropertyChangedEventArgs("Zindex"));
        }
    }

Upvotes: 2

Views: 3254

Answers (3)

Raj Rao
Raj Rao

Reputation: 9138

I had the same problem where I had multiple pushpins close together and the problem was exacerbated when I had additional content to show when the pushpin was clicked.

The way I got around this problem was to remove the pushpin and then re-add it. That way it became the topmost pushpin.

map1.Children.Remove(pushpin);
map1.Children.Add(pushpin);

Upvotes: 10

kman
kman

Reputation: 31

In a recent project I used two map layers to achieve this. The first map layer was bound to my list of pushpins ("resultsLayer"), the 2nd map layer was bound to a single 'SelectedItem' ("selectedLayer") on my view model.

The 2nd map layer will render on top of the first one. So, when a pushpin on the first layer was selected, it was removed from the collection (consequently removed from the layer) and set to be the selected pin which added it to the 2nd layer. The puspin control template for the 2nd layer contained the 'callout' which in my case was a button with some text in it that the user could click to open another page.

Here is my xaml:

    <m:Map CredentialsProvider="xxxx" x:Name="map" Center="{Binding MapCenter, Mode=TwoWay}" ZoomLevel="{Binding MapZoomLevel, Mode=TwoWay}">
        <m:MapLayer x:Name="resultsLayer" Visibility="{Binding IsBusy, Converter={StaticResource booleanNotCollapsedConverter}}">
            <m:MapItemsControl ItemsSource="{Binding VenuesFound}">
                <m:MapItemsControl.ItemTemplate>
                    <DataTemplate>
                        <m:Pushpin Location="{Binding VLocation}" PositionOrigin="BottomCenter" >
                            <m:Pushpin.Template>
                                <ControlTemplate>
                                    <Image x:Name="mapPin" Grid.Row="1" Source="{Binding MapPin}" Stretch="None" />
                                </ControlTemplate>
                            </m:Pushpin.Template>
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="Tap">
                                    <gs:EventToCommand Command="{Binding SelectPinCommand}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </m:Pushpin>
                    </DataTemplate>
                </m:MapItemsControl.ItemTemplate>
            </m:MapItemsControl>
        </m:MapLayer>
        <m:MapLayer x:Name="selectedLayer" DataContext="{Binding SelectedV}" Visibility="{Binding IsBusy, Converter={StaticResource booleanNotCollapsedConverter}}">
            <m:Pushpin Location="{Binding VLocation}" PositionOrigin="BottomCenter">
                <m:Pushpin.Template>
                    <ControlTemplate>
                        <StackPanel>
                            <Button Style="{StaticResource PushPinCallout}" Command="{Binding SelectItemCommand}">
                                <TextBlock Text="{Binding Name}" Foreground="White" Margin="2" TextWrapping="Wrap" />
                            </Button>
                            <Image x:Name="mapPin" Grid.Row="1" Source="{Binding MapPin}" Stretch="None" />
                        </StackPanel>
                    </ControlTemplate>
                </m:Pushpin.Template>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Tap">
                        <gs:EventToCommand Command="{Binding SelectPinCommand}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </m:Pushpin>
        </m:MapLayer>
    </m:Map>

Upvotes: 2

Matt Lacey
Matt Lacey

Reputation: 65556

As the BingMapsControl is not a Silverlight control it does not have any concept of a canvas.

Instead of trying to ensure the selected one is at the front, I'd change the selected pin to be of a larger, more prominent style.
It doesn't make sense (to me) to be able to control the z-index of pins as doing so could create a scenario where a pin appears to be on top of another pin, rather than on the map.

Upvotes: 1

Related Questions