c# - dev - UWP MapControl: título fijo de MapElement

bing map dev center

Question

Estoy agregando un MapElement a mi MapControl, pero cuando giro el MapControl, mi MapElement gira junto con él. ¿Es posible tener un encabezado fijo en el elemento?

He intentado usar un RotateTransform en el MapElement pero el elemento parece desaparecer por completo.

Estoy usando el siguiente código:
Además, el objeto <Planes:Airplane /> es solo una ruta dibujada personalizada.

 <Maps:MapControl x:Name="Map" Style="None" Grid.Row="2" TiltInteractionMode="GestureAndControl" ZoomInteractionMode="GestureAndControl" RotateInteractionMode="GestureAndControl" MapServiceToken="TOKEN HERE">
<!-- Airplane Layer -->
<Planes:Airplane x:Name="Airplane" Type="Prop" MaxHeight="80" Maps:MapControl.NormalizedAnchorPoint="0.5,0.5" />
</Maps:MapControl>

Answer 1

Estoy agregando un MapElement a mi MapControl, pero cuando giro el MapControl, mi MapElement gira junto con él. ¿Es posible tener un encabezado fijo en el elemento?

MapElement no hereda de UIElement , que es el origen de RenderTransform . Por lo tanto, no es posible usar RenderTransform en un MapElement.

Pero como solución, puede considerar utilizar MapItemsControl para colocar cualquier control o imagen en el mapa como desee y puede rotar o traducir la imagen cuando rota MapControl.

MainPage.Xaml:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel VerticalAlignment="Center">
<Maps:MapControl
Width="500"
Height="500"
x:Name="myMap"
ZoomInteractionMode="GestureAndControl"
TiltInteractionMode="GestureAndControl"
MapServiceToken="RJRqnypOQjjYoi6JxDOU~ObLGsO4GuIpqfRBu-7U5_A~AiqxkstUMp1CBfdrCfIX-B9UAha0CJ2hM3--ZVXOdW2j8-l6bG40Po_wL5gWNQgo">
<Maps:MapItemsControl x:Name="mapItems">
<Maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding ImageSourceUri}"
Maps:MapControl.Location="{Binding Location}">
<Image.RenderTransform>
<TransformGroup>
<RotateTransform Angle="{Binding Rotate.Angle}"
CenterX="{Binding Rotate.CenterX}"
CenterY="{Binding Rotate.CenterY}"/>
<TranslateTransform X="{Binding Translate.X}"
Y="{Binding Translate.Y}"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</StackPanel>
</DataTemplate>
</Maps:MapItemsControl.ItemTemplate>
</Maps:MapItemsControl>
</Maps:MapControl>
<Button Name="myAdd" Click="myAdd_Click">Click Me to Add Element</Button>
<Button Name="btnRotate" Click="btnRotate_Click">Click Me to Rotate Element</Button>
</StackPanel>
</Grid>

MainPage.xaml.cs:

public class InterestPoint
{
public Uri ImageSourceUri { get; set; }
public Geopoint Location { get; set; }
public RotateTransform Rotate{ get; set; }
public TranslateTransform Translate { get; set; }
public Point CenterPoint { get; set; }
}
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private List<InterestPoint> InitInterestPoints(BasicGeoposition location)
{
List<InterestPoint> points = new List<InterestPoint>();
points.Add(new InterestPoint {
ImageSourceUri = new Uri("ms-appx:///Assets/mappin.png"),
Location = new Geopoint(location),
Rotate=new RotateTransform
{
Angle=15,
CenterX=28.5,
CenterY=88
},
Translate=new TranslateTransform
{
X=-28.5,
Y=-90
}
});
return points;
}
private void myAdd_Click(object sender, RoutedEventArgs e)
{
mapItems.ItemsSource = InitInterestPoints(myMap.Center.Position);
}
private void btnRotate_Click(object sender, RoutedEventArgs e)
{
var points = mapItems.ItemsSource as List<InterestPoint>;
points[0].Rotate.Angle += 10;
}
}

Aquí está el efecto:

Y aquí está el enlace a la demostración completa: MapElementRotationSample .

Notas: La imagen se agrega tomando el punto de la izquierda hacia arriba como punto de anclaje. Entonces, necesita traducir la imagen de acuerdo con el tamaño de la imagen. (Mi imagen es 57 * 90, así que necesito traducirla (-28.5, -88) para que el punto de la aguja sea el punto central).