3

默认情况下，它们看起来像这样：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}"/>

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

4

5 回答 5

1

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

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

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

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

前提是您在具有 Pushpin 作为 TargetType 的资源字典中创建了 PushpinStyle。

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

对我来说效果很好...

于 2013-06-21T13:10:07.643 回答
0

您可以使用一般技巧来修改 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) 将此修改后的代码片段添加到您的 Application.Resources（例如，您的 App.xaml 中的 Application.Resources 部分）

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

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

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

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

于 2013-05-14T09:20:27.707 回答
0

我个人发现不将工具包用于图钉更容易。相反，我编写了一个用户控件“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);
    }                        
}
于 2013-05-14T11:49:04.970 回答
0

我找到了一个解决方案：只向图钉添加一个控件模板。堆栈面板是带有文本框的图钉，而堆栈面板之前的网格是没有文本框的图钉。堆栈面板的可见性已折叠。如您所见，点击事件有 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>

于 2013-05-22T14:19:40.400 回答
0

@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 有一个表示可见性的属性。

于 2013-05-23T08:51:28.680 回答