3

デフォルトでは、次のようになります: http://wp.qmatteoq.com/wp-content/uploads/2013/01/map.png . http://www.themobileindian.com/images/nnews/2012/11/9225/Nokia-Maps.jpgのように、Nokia Maps に表示されるようにしたいと思います。それらをタップするたびに、アイコンと説明が切り替わります。

リソースに画鋲用の 2 つのテンプレートがあるとします。

<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

0

@デペチー

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 に答える
0

解決策を見つけました。画鋲にコントロール テンプレートを 1 つだけ追加します。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>

于 2013-05-22T14:19:40.400 に答える