Customized animation in response to device orientation change

Question

Hi gurus,

I'm working on a metro app javascript project targeted for tablets. My customer requires that when the device orientation changes, there should be a nice rotation animation for some of the elements in the page so that the elements do not look upside down.

My current approach is that I set autoRotationPreferences to landscape, use Windows.Devices.Sensors.SimpleOrientationSensor to observe the reading change, and animate the elements using msTransform property accordingly. It seems to work well for most types of elements. But when I try to do the same for select elements or flyouts, I found the popup menu of the select element still retain its origianl degree and flyout cannot be rotated initially.

It seems it is an undertaking to achieve my goal, so I am here to call for some suggestions on this. Any idea is appreciated!

Answer 1

Hi Noo,

Context menus and flyouts are transient.  I would not expect them to automatically behave the way you want.  You could search through the HTML DOM for these and act on them perhaps.

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Hi jeff,

Thank you for the reply. My application involves some other controls that cannot be rotated as expected(e.g. more options dialog for configuring video device). I guess they just can not be rotated if my app is launched wth the tablet in portrait mode.

Anyway, my customer now tends to cancel the feature, so I can just rely on setting autoRotationPreferences to none.