c# - UWP MapControl: MapElement の固定見出し

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

MapElement を MapControl に追加していますが、MapControl を回転すると、MapElement も一緒に回転します。要素に固定見出しを付けることは可能ですか?

MapElementは、 の元であるUIElementを継承していませんRenderTransform。そのため、MapElement で RenderTransform を使用することはできません。

ただし、回避策として、MapItemsControlを使用して必要に応じて任意のコントロールまたは画像をマップに配置し、MapControl を回転させるときに画像を回転または移動することを検討できます。

MainPage.Xaml:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel VerticalAlignment="Center">
        <Maps:MapControl
        Width="500"
        Height="500"
        x:Name="myMap"            
        ZoomInteractionMode="GestureAndControl"
        TiltInteractionMode="GestureAndControl"   
        MapServiceToken="MapServiceToken">
            <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。

注: 画像は、左上のポイントをアンカー ポイントとして追加されます。そのため、画像サイズに合わせて画像を平行移動する必要があります。