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