Rotate an image according orientation sensors

Question

Hello Everybody !!
I need to rotate an image according orientation sensors.
In fact, I need when the user rotate the device to the left, the image rotate to the left (like an arrow in GPS).
This is my XAML Code : 
<Canvas Canvas.ZIndex="1"
>
<StackPanel Margin="140,385,0,0">
<Image Source="ms-appx:///Assets/Icons/[email protected]"
Height="50"
x:Name="ArrowFontaine" />
</StackPanel>
</Canvas>
And my C# Code : 
private Compass _compass; // Our app's compass object
// This event handler writes the current compass reading to
// the textblocks on the app's main page.
private async void ReadingChanged(object sender, CompassReadingChangedEventArgs e)
await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
CompassReading reading = e.Reading;
var image = new Image
Height = 50,
Width = 50,
RenderTransform = new RotateTransform()
Angle = 45,
CenterX = reading.HeadingMagneticNorth,
CenterY = (double)reading.HeadingTrueNorth,
Source = new BitmapImage(new Uri("ms-appx:///Assets/Icons/[email protected]"))
ArrowFontaine=image;
public MainPage()
this.InitializeComponent();
_compass = Compass.GetDefault(); // Get the default compass object
// Assign an event handler for the compass reading-changed event
if (_compass != null)
// Establish the report interval for all scenarios
uint minReportInterval = _compass.MinimumReportInterval;
uint reportInterval = minReportInterval > 16 ? minReportInterval : 16;
_compass.ReportInterval = reportInterval;
_compass.ReadingChanged += new TypedEventHandler<Compass, CompassReadingChangedEventArgs>(ReadingChanged);
I need the "ArrowFontaine" rotate according the device rotation to an angle of 45°.
Can you tell me where the error in my code please?
Please do not send me msdn link because most of my code from there
Thanx

Answer 1

Hi DiddyRennes,
>>In fact, I need when the user rotate the device to the left, the image rotate to the left (like an arrow in GPS).
I would suggest you creating RotateTransform in xaml and change the Angle from code behind:
<Canvas>
<StackPanel Canvas.Left="145" Canvas.Top="86">
<Image Source="ms-appx:///Assets/Avatar.png"
Height="100"
x:Name="ArrowFontaine" RenderTransformOrigin="0.5,0.5" >
<Image.RenderTransform>
<RotateTransform x:Name="rotateTransform1" Angle="0" CenterX="0.5" CenterY="0.5"/>
</Image.RenderTransform>
</Image>
<Button Content="Action" Click="Button_Click" />
</StackPanel>
</Canvas>
private async void ReadingChanged(object sender, CompassReadingChangedEventArgs e)
await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
CompassReading reading = e.Reading;
rotateTransform1.Angle = reading.HeadingMagneticNorth;//Change something here
Screenshot:
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.