How to rotate image placed on a Mapcontrol

坚强是说给别人听的谎言 提交于 2019-12-11 05:56:56

问题


The issue

I've got an application that tracks vehicles on a map. However I cannot get the little buggers to rotate in the direction of their motion. Basically, all of them are going sideways! Ugh!

The code

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

The Image, placed on the map, seems to completely ignore any angle I try to apply.


回答1:


To understand why the rotation doesn't take effect, let's first take a look at the image below, which is taken from the Live Visual Tree in Visual Studio -

I use a Rectangle but in your case, you will see your Image control there instead. When you insert it into the MapControl.Children collection, it will be wrapped with a special element called MapOverlayPresenter (as shown in the picture).

This MapOverlayPresenter is an internal element within MapControl and surprisingly, there's no official documentation on the Internet on what exactly it does. My guess is, as you zoom or rotate the map, this overlay simply responds by zooming or rotating in the opposite direction in order to maintain the original size and rotation of the child element, and this is causing the rotation transform of your inner Image to somehow get lost.

(P.S. RotationAngle and RotationAngleInDegrees from Composition have no effect here either.)


Solution

The way to work around this is simple - instead of exposing the rotation transform on the Image directly, create a UserControl called ImageControl which encapsulates this Image and its transform, with dependency properties like UriPath and Angle that are responsible for passing the information down to the inner Image and its CompositeTransform property.

The ImageControl XAML

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

The ImageControl code-behind

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

How to use this ImageControl

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

_mainMap.Children.Add(vehicleImage);

Outcome

Hope this helps!



来源:https://stackoverflow.com/questions/45248112/how-to-rotate-image-placed-on-a-mapcontrol

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!