Question

我将MapElement添加到MapControl中但是当我旋转MapControl时，我的MapElement随之旋转。是否有可能在元素上有一个固定的标题？

我尝试在MapElement上使用RotateTransform，但Element似乎完全消失了。

我使用以下代码：
此外，<Planes:Airplane />对象只是一个自定义绘制路径。

    <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

我正在向MapControl添加MapElement但是当我旋转MapControl时，我的MapElement随之旋转。是否有可能在元素上有一个固定的标题？

MapElement不会从UIElement继承，MapItemsControl是RenderTransform的来源。因此，无法在MapElement上使用RenderTransform。

但作为一种解决方法，您可以考虑使用根据需要在地图上放置任何控件或图像，并且可以在旋转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;
    }
}

这是效果： MapElementRotationSample

以下是整个演示的链接：{{3}}。

注意：添加图像时将左上角作为锚点。所以你需要根据图像大小来翻译图像。（我的图像是57 * 90，所以我需要翻译它（-28.5，-88）让针尖成为中心点。）

UWP MapControl：MapElement固定标题

1 个答案: