c# - 如何旋转放置在地图控件上的图像

Question

问题

我有一个在地图上跟踪车辆的应用程序。但是我不能让小虫子沿着它们的运动方向旋转。基本上都是横着走！啊!

编码

Image vehicleImage = new Image
{
  //Set image size and source
};
RenderTransform rotation= new RotateTransform{Angle = X};
vehicleImage.RenderTransfrom = rotation; 
_mainMap.Children.Add(vehicleImage);
MapControl.SetLocation(vehicleImage, _position);

放置在地图上的图像似乎完全忽略了我尝试应用的任何角度。

Answer 1

要理解为什么旋转不生效，我们先看下图，取自Visual Studio 中的Live Visual Tree——

我使用 aRectangle但在您的情况下，您将在Image那里看到您的控件。当你将它插入到MapControl.Children集合中时，它会被一个特殊的元素包裹起来MapOverlayPresenter（如图所示）。

这MapOverlayPresenter是一个内部元素MapControl，令人惊讶的是，Internet 上没有关于它的确切作用的官方文档。我的猜测是，当您缩放或旋转地图时，此叠加层只是通过向相反方向缩放或旋转来响应，以保持子元素的原始大小和旋转，这会导致您内部的旋转变换Image以某种方式走开。

（PSRotationAngle和RotationAngleInDegreesfrom Composition 在这里也不起作用。）

---

解决方案

解决这个问题的方法很简单——不是Image直接暴露旋转变换，而是创建一个封装这个和它的变换的UserControl被调用，它具有像和负责将信息传递到内部及其属性的依赖属性。ImageControlImageUriPathAngleImageCompositeTransform

ImageControlXAML _

<UserControl x:Class="App1.ImageControl" ...>
    <Image RenderTransformOrigin="0.5,0.5"
           Source="{x:Bind ConvertToBitmapImage(UriPath), Mode=OneWay}"
           Stretch="UniformToFill">
        <Image.RenderTransform>
            <CompositeTransform Rotation="{x:Bind Angle, Mode=OneWay}" />
        </Image.RenderTransform>
    </Image>
</UserControl>

代码ImageControl隐藏

public string UriPath
{
    get => (string)GetValue(UriPathProperty);
    set => SetValue(UriPathProperty, value);
}
public static readonly DependencyProperty UriPathProperty = DependencyProperty.Register(
    "UriPath", typeof(string), typeof(ImageControl), new PropertyMetadata(default(string)));     

public double Angle
{
    get => (double)GetValue(AngleProperty);
    set => SetValue(AngleProperty, value);
}
public static readonly DependencyProperty AngleProperty = DependencyProperty.Register(
    "Angle", typeof(double), typeof(ImageControl), new PropertyMetadata(default(double)));

public BitmapImage ConvertToBitmapImage(string path) => new BitmapImage(new Uri(BaseUri, path));

如何使用这个ImageControl

var vehicleImage = new ImageControl
{
    Width = 80,
    UriPath = "/Assets/car.png",
    Angle = 45
};

_mainMap.Children.Add(vehicleImage);

结果

希望这可以帮助！