locked
Rotate an image according orientation sensors RRS feed

  • 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/flecheMap@2x.png"
                           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/flecheMap@2x.png"))
    
    
                    };
    
                    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


    • Edited by DiddyRennes Wednesday, January 28, 2015 10:27 AM
    Wednesday, January 28, 2015 10:26 AM

Answers

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

    • Marked as answer by DiddyRennes Thursday, January 29, 2015 11:22 AM
    Thursday, January 29, 2015 9:41 AM
  • Hello Franklin,

    Thanx but I've just found the answer.

    I used this sample : 

    https://code.msdn.microsoft.com/Universal-Templatable-86376b2e

    • Marked as answer by DiddyRennes Thursday, January 29, 2015 11:22 AM
    Thursday, January 29, 2015 11:22 AM

All replies

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

    • Marked as answer by DiddyRennes Thursday, January 29, 2015 11:22 AM
    Thursday, January 29, 2015 9:41 AM
  • Hello Franklin,

    Thanx but I've just found the answer.

    I used this sample : 

    https://code.msdn.microsoft.com/Universal-Templatable-86376b2e

    • Marked as answer by DiddyRennes Thursday, January 29, 2015 11:22 AM
    Thursday, January 29, 2015 11:22 AM
  • Hello Franklin,

    Thanx but I've just found the answer.

    I used this sample : 

    https://code.msdn.microsoft.com/Universal-Templatable-86376b2e


    Glad that you've solved your issue, thank you for sharing your solution here:)

    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.

    Thursday, January 29, 2015 11:33 AM