Windows Phone 8 诺基亚地图：如何更改 Microsoft.Phone.Maps.Toolkit 图钉的设计？答案

【问题标题】：Windows Phone 8 Nokia Maps: How to change the design of a Microsoft.Phone.Maps.Toolkit Pushpin?Windows Phone 8 诺基亚地图：如何更改 Microsoft.Phone.Maps.Toolkit 图钉的设计？
【发布时间】：2013-05-13 15:10:58
【问题描述】：

默认，它们看起来像这样：http://wp.qmatteoq.com/wp-content/uploads/2013/01/map.png。我想让它们在诺基亚地图上看起来像这样：http://www.themobileindian.com/images/nnews/2012/11/9225/Nokia-Maps.jpg，所以它们占用的空间更少。每次我点击它们时，它们都会在图标和描述之间切换。

假设我有两个资源中的图钉模板：

<ControlTemplate x:Key="1" TargetType="maptk:Pushpin">
        <Grid x:Name="ContentGrid" Background="Transparent" Margin="-4,0,0,0">
            <StackPanel >
                <Grid Background="Black">
                    <StackPanel Margin="5,5,0,0">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Tap">
                                <cmd:EventToCommand PassEventArgsToCommand="False"
                                                    CommandParameter="{Binding}"
                                                    Command="{Binding ElementName=NearbyMap, Path=DataContext.Pushpin_OnTapCommand}"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                        <TextBlock  Text="{Binding Location}" Foreground="White" />
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding LocationName}" Foreground="White" />
                            <TextBlock Text="-" Foreground="White" Padding="3,0"/>
                            <TextBlock Text="{Binding LocationName}" Foreground="White" />
                        </StackPanel>
                        <TextBlock Text="{Binding LocationName}" Foreground="White" />
                        <TextBlock Text="{Binding LocationName}" Foreground="White" />

                    </StackPanel>
                </Grid>
                <Polygon Fill="Black"  Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left" />
                <Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
                    <Grid.RenderTransform>
                        <CompositeTransform Rotation="-45"/>
                    </Grid.RenderTransform>
                    <Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26" />
                    <Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Green" Width="16" />
                </Grid>
            </StackPanel>
        </Grid>
    </ControlTemplate>

    <ControlTemplate TargetType="maptk:Pushpin"  x:Key="2">
        <Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" >
            <Grid.RenderTransform>
                <CompositeTransform Rotation="-45"/>
            </Grid.RenderTransform>
            <Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26"/>
            <Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Red" Width="16"/>
        </Grid>
    </ControlTemplate>

和图钉控件：

<maptk:Pushpin x:Name="PushPins" GeoCoordinate="{Binding Location}" Visibility="Visible" Content="{Binding LocationName}" Template="{StaticResource 2}"/>

如何通过一些触发器或其他东西在它们之间切换？

【问题讨论】：

你有没有想出一个好的解决方案？自己找一个...

标签： xaml windows-phone-8 pushpin here-api

【解决方案1】：

@Rares 找到了另一个解决方案，在我的情况下效果很好......

所以这里的一般问题只是，如何在点击图钉时切换/更改设计。好吧，似乎当您将图钉添加到地图时，它们会从工具包中获得设计，但您仍然可以通过在代码中设置 Style 属性来更改它！

因此，如果您将每个图钉连接到图钉点击事件，您只需在 XAML 页面后面的代码中执行以下操作：

private void Pushpin_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    ((Pushpin)sender).Style = Application.Current.Resources["PushpinStyle"] as Style;
}

假设您在资源字典中创建了一个 PushpinStyle，该资源字典将 Pushpin 作为 TargetType。

为了能够在按下另一个图钉时重置设计，我只保留对按下的图钉的引用并重置它的样式，然后再更改新按下的图钉的样式！

非常适合我...

【讨论】：

【解决方案2】：

您可以使用通用技巧来修改 TK 组件的外观。这可用于几乎所有 TK 组件。

所有 TK 组件都有样式（在 XAML 中定义），这些不能通过代码设置。但是您可以覆盖应用程序中的样式（请记住，您通常会覆盖样式，因此如果您修改例如图钉样式，应用程序中的所有图钉将看起来像这样）

更详细一点：

a) 从https://phone.codeplex.com/sourcecontrol/latest获取TK源码

b) 查看 Themes/Generic.xaml

c) 在最后一个元素旁边，您会看到图钉的样式定义。开头：

<!-- Default Style used for Pushpin -->
    <Style TargetType="maptk:Pushpin">
...

d) 复制这个样式（当然也可以从头开始写），然后修改成你喜欢的样式

e) 将此修改后的代码 sn-p 添加到您的 Application.Resources（例如，您的 App.xaml 中的 Application.Resources 部分）

请记住，您还需要引用正确的 TK 命名空间。对于图钉，您需要包括：

   xmlns:maptk="clr-namespace:Microsoft.Phone.Maps.Toolkit"

现在您的应用为您的图钉使用本地覆盖样式。

顺便说一句：由于 TK 是 Ms-PL 许可的，请记住，如果您从 MSFT 获取原始源代码，可能存在许可限制。

【讨论】：

这不是我想要的。这些图钉看起来像这样wp.qmatteoq.com/wp-content/uploads/2013/01/map.png，我正在寻找的是它们之间的切换。还是谢谢。
复制样式时，图钉看起来完全一样。真的。但是您现在可以将其修改为您喜欢的任何内容，例如您可以更改样式以使它们看起来像第二张图片。诺基亚图钉（作为一种样式）不是工具包的一部分（它们由诺基亚制造）。
是的，我知道我可以改变他们的风格，但这不是我想要的。我想在 Tap 事件中切换它们。

【解决方案3】：

我个人发现不使用图钉工具包更容易。相反，我编写了一个用户控件“PushPinUC”，我按照自己的意愿设计了它。 UserControl 订阅 Tap 事件 - 因此我可以在按下它时展开/缩回。

您可以使用以下代码将用户控件添加到您的地图控件。

private void BindPushpins(IEnumerable<PushpinIVM> pushpins)
{         
    foreach (var pushpin in pushpins)
    {
        var pushPinUC = new PushpinUC { Pushpin = pushpin };
        var mapOverlay = new MapOverlay { GeoCoordinate = pushpin.Location, Content = pushPinUC };
        var mapLayer = new MapLayer { mapOverlay };
        Map.Layers.Add(mapLayer);
    }                        
}

【讨论】：

【解决方案4】：

我找到了一个解决方案：只向图钉添加一个控件模板。 stackpanel 是带有文本框的图钉，stackpanel 之前的网格是不带文本框的图钉。堆栈面板的可见性已折叠。如您所见，点击事件有 2 个触发器，我只是将带有文本框的图钉的可见性设置为可见或折叠。您可以使用任何图像作为图钉。

<ctrls:BaseUserControl.Resources>
    <ControlTemplate x:Key="PushPinTemplate" TargetType="maptk:Pushpin">
        <Grid x:Name="ContentGrid" Background="Transparent" Margin="-4,0,0,0">
            <Grid Height="40" Width="30" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" >
                <Image Source="/Assets/Images/push1.png" Width="40" Height="40">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Tap">
                            <cmd:EventToCommand PassEventArgsToCommand="True"
                                                    Command="{Binding ElementName=NearbyMap, Path=DataContext.Rectangle_OnTapCommand}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Image>
            </Grid>
            <StackPanel x:Name="DetailsPanel" Visibility="{Binding Path=Visibility}">
                <Grid x:Name="TestGrid" Background="Black">
                    <StackPanel Margin="5,5,0,0">
                        <!--TextBlock tap-->
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Tap">
                                <cmd:EventToCommand PassEventArgsToCommand="True"                                                    
                                                    Command="{Binding ElementName=NearbyMap, Path=DataContext.Pushpin_OnTapCommand}"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                        <TextBlock  Text="{Binding LocationName}" Foreground="White" FontSize="25"/>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding StreetName}" Foreground="White" />
                            <TextBlock Text="{Binding StreetNumber}" Foreground="White" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding DistanceToDisplay}" Foreground="White" />
                        </StackPanel>

                    </StackPanel>
                </Grid>
                <Polygon Fill="Black"  Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left" Visibility="Visible"/>
                <Grid Height="40" Width="30" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
                    <Image Source="/Assets/Images/push2.png" Width="40" Height="40">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Tap">
                                <cmd:EventToCommand PassEventArgsToCommand="True"
                                                    Command="{Binding ElementName=NearbyMap, Path=DataContext.Rectangle_OnTapCommand}"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Image>
                </Grid>
            </StackPanel>
        </Grid>
    </ControlTemplate>
</ctrls:BaseUserControl.Resources>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <maps:Map x:Name="NearbyMap" 
                  Center="{Binding MapCenter, Mode=TwoWay}"
                  ZoomLevel="15"
                  dp:MapPushPinDependency.ItemsSource="{Binding Path=Locations, Mode=OneWay}"
              >
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Tap">
                <cmd:EventToCommand PassEventArgsToCommand="True"
                                    Command="{Binding ElementName=NearbyMap, Path=DataContext.Map_OnTapCommand}"/>

            </i:EventTrigger>
        </i:Interaction.Triggers>
        <maptk:MapExtensions.Children>
            <maptk:MapItemsControl Name="StoresMapItemsControl">
                <maptk:MapItemsControl.ItemTemplate>
                    <DataTemplate>
                        <maptk:Pushpin x:Name="PushPins" GeoCoordinate="{Binding Location}" Visibility="Visible" Content="{Binding LocationName}" Template="{StaticResource PushPinTemplate}"/>
                    </DataTemplate>
                </maptk:MapItemsControl.ItemTemplate>              
            </maptk:MapItemsControl>
            <maptk:UserLocationMarker x:Name="UserLocationMarker" Visibility="Visible" GeoCoordinate="{Binding MyLocation}"/>
        </maptk:MapExtensions.Children>
    </maps:Map>
</Grid>

【讨论】：

当你点击另一个图钉时如何切换回原始状态？

【解决方案5】：

@Depechie

private void RectangleTapAction(GestureEventArgs e)
    {
        var pushpinControl = TryFindParent<Pushpin>(e.OriginalSource as UIElement);
        var pushpin = (pushpinControl as FrameworkElement).DataContext as PushPinModel;

        Locations.Where(t => t.Id != pushpin.Id).ToList().ForEach(t => t.Visibility = Visibility.Collapsed);
        pushpin.Visibility = pushpin.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;

        e.Handled = true;

    }

Locations 是一个 ObservableCollection 并且有一个 Linq，我在其中隐藏了其他图钉的文本框。 PushPinModel 有一个表示可见性的属性。

【讨论】：