Карты Nokia для Windows Phone 8: как изменить дизайн кнопки Microsoft.Phone.Maps.Toolkit?

@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.

Чтобы иметь возможность сбросить дизайн при нажатии на другую канцелярскую кнопку, я просто держу ссылку на канцелярскую кнопку нажатой и сбрасываю ее стиль перед изменением стиля только что нажатой кнопки!

Отлично работает для меня...

Вы можете использовать общий прием, чтобы изменить внешний вид компонентов ТЗ. Это можно использовать практически для всех компонентов ТЗ.

Все компоненты TK имеют стили (определенные в XAML), их нельзя установить с помощью кода. Но вы можете переопределить стиль в своем приложении (имейте в виду, что вы переопределяете стиль в целом, поэтому, если вы измените, например, стили кнопок, все кнопки внутри вашего приложения будут выглядеть так)

Чуть подробнее:

a) Получите источник ТЗ с https://phone.codeplex.com/sourcecontrol/latest.

б) Загляните в Themes/Generic.xaml

c) Рядом с последним элементом вы видите определение стиля для канцелярской кнопки. Начинается с:

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

г) Скопируйте этот стиль (или, конечно, вы можете написать его с нуля) и измените стиль так, как вам нравится.

e) Добавьте этот измененный фрагмент кода в свой Application.Resources (например, в раздел Application.Resources в вашем App.xaml)

Имейте в виду, что вам также необходимо ссылаться на правильное пространство имен TK. Для канцелярской кнопки вам необходимо включить:

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

Теперь ваше приложение использует локально переопределенный стиль для канцелярской кнопки.

Кстати: поскольку TK имеет лицензию Ms-PL, имейте в виду, что, вероятно, существуют лицензионные ограничения, если вы берете исходный код из MSFT.

Лично мне было проще не использовать набор инструментов для кнопок. Вместо этого я написал пользовательский элемент управления «PushPinUC», который я разработал так, как хотел. UserControl подписывается на событие Tap, поэтому я могу разворачивать/убирать его при нажатии.

Вы можете добавить пользовательские элементы управления в свой элемент управления Map, используя следующий код.

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);
    }                        
}

Я нашел решение: добавить к канцелярским кнопкам только один шаблон управления. Панель стека — это канцелярская кнопка с текстовым полем, а сетка перед панелью стека — это канцелярская кнопка без текстового поля. Панель стека с видимостью свернута. Как вы можете видеть, есть 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>

@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 имеет атрибут, представляющий видимость.