UWP: "Gegen"-Animation entgegen der Drehung

Hi,

ich arbeite gerade an einer App, die auf einer einzelnen Page ein paar Controls hat, die beim Drehen des Gerätes nicht automatisch mit gedreht werden sollen, der Rest aber schon.
Je nachdem, wie sich das Handy dreht, soll sich also alles wie gehabt verhalten (der Inhalt der App soll gedreht werden) bis auf diese paar Controls, die sollen ihre Position relativ zum Gehäuse bei behalten, da würde ich nur den Content manuell drehen.

Geht das überhaupt oder muss ich stattdessen umgekehrt arbeiten, indem ich die restlichen Drehungen im Manifest deaktiviere und meine App ohne die betroffenen Controls manuell drehe?

Meine Überlegung bisher war, dass ich mit einem passenden VisualState die Position der Controls beim Drehen wieder so anpasse, wie ich es haben will.
Das funktioniert auch, sieht aber doof aus, weil die sich erst einmal verschieben und danach wieder zurück "springen".

Hat jemand eine Idee, wie ich das erreichen kann?

Und gibt es eine Möglichkeit/eine fertige Animation, mit der ich ein Grid so drehen kann, dass es nach der Animation wieder den vollständigen Platz ein nimmt? Im Prinzip eine Möglichkeit, die genau das selbe Verhalten immuliert, was ich sehe, wenn ich eine beliebige App offen habe und das Handy drehe: Der ganze Inhalt wird dreht sich, wird dabei kurz kleiner (weil bei 45° Drehung weniger Platz ist) und nimmt danach wieder den ganzen Platz ein - nur eben in der Waagerechten und breiter.
Meine Idee war, dass ich das Drehen zwar erlaubt, aber die Animation vom Windows irgendwie unterdrückt und selber die Dreh-Animation umsetze.

Beste Grüße

Aus der Sicht der View wird eigentlich nichts gedreht, es ändert sich nur die Höhe und die Breite der View.

AFAIK kann man währed der View-Rotation-Animation eigentlich nichts machen, denn die wird auch vom OS selber vorgenommen.

So wie ich das sehe kommt kurz vor der Rotation die Änderung der Höhe/Breite und dann wird vom OS rotiert.

Das ist mir klar, aber gibt es einen Weg, wie ich das unterdrücken kann obwohl das Drehen für die App erlaubt ist?
Ich habs ausprobiert, das zu verbieten, das OrientationChanged-Event wird nicht geworfen - was ja auch sinnvoll ist. Oder muss ich den Sensor dann selber abfragen? Eine kurze Recherche hat mir ein paar Dinge gezeigt, laut denen das möglich ist.

Und ich brauch einen Weg, wie ich das Drehen manuell nach bauen kann.
Hierfür reicht ja ein RotateTransform , das Ding muss ich dann "nur" aus einem VisualState heraus animieren. Mit ein bisschen getrickse lässt sich die Größenänderung beim Drehen sicher auch realisieren.
Oder gibt es dafür schon etwas Vorhandenes?

Jupp, dazu musst du das Drehen verbieten und den Lagesensor abfragen, um die Rotation für die Controls zu ermitteln.

Aber ob sich das wirklich lohnt?

Wie sieht denn das aus, was du darstellen willst?

Etwa so, und die Buttons (oben links, rechts) sollen quasi immer an der Stelle „bleiben“ egal wie gedreht wird?

[B]#########[B]
+- - - - - - -+
|             |
|             |
|   Content   |
|             |
|             |
+- - - - - - -+

Etwa so, und die Buttons (oben links, rechts) sollen quasi immer an der Stelle „bleiben“ egal wie gedreht wird?

So in etwa
Ein Teil ist die Kamera bzw. das Capture-Control dazu.
Ich habe eine Art Overlay, was sich mit dem Handy mit drehen soll.
Da wäre es auch kein Problem, das komplett zu deaktivieren und alle Drehungen zu ignorieren, das Bild kann ich im Nachhinein ja immer noch drehen.

Ich habe aber noch weitere Pages, die unter Anderem Eingaben erwarten.
Diese Pages müssen sich die Handy-Position anpassen können um die Eingabe zu vereinfachen.

Aber wenn ich das alles manuell machen müsste, stellt sich auch die Frage, ob sich das lohnt, oder ob es nicht der bessere Weg ist, das Drehen einfach komplett zu unterbinden.
Geht dann halt nicht, Pech.

Ich hatte gehofft, es gibt einen Weg, der nicht zu lange dauert, aber dem scheint nicht so.

Ich hab gerade kein Win10-Handy hier, aber Android (von Huawei) macht es bei der Kamer-App auch so.
Es verbietet einfach das drehen (sieht man in den Einstellungen) und dreht die Icons entsprechend der Position des Handys.

Geht dann halt nicht, Pech.

Na dann muss ich meinen Gedanken ja nicht zu Ende denken 😁

Doch, bitte 😄

Mich interessiert das trotzdem.
Vielleicht hab ich ja auch mal Zeit, das am Ende in ein kleines Framework zu gießen, was das automatisch machen kann.
Dann gibts für den Nächsten mit einem ähnlichen Problem die Lösung, die es im Moment noch nicht gibt.

Ich werd's nur nicht mehr bei dem Projekt machen, zumindest nicht im Moment, einfach weil sich das auch finanziell nicht lohnt, soll ja auch irgendwann fertig werden.
Aber für solche interessanten Dinge gibt's ja immer noch die Freizeit ^^

Ok, dann schau dir mal das Bild an.

Das kann man ganz einfach mit einem Grid-Layout hinbekommen und man blendet die Bereiche (X) je nach Lage ein oder aus.

+-+-----+-+
|*|  X  |*|
+-+-----+-+
| |     | |
| |     | |
|X|     |X|
| |     | |
| |     | |
+-+-----+-+
|*|  X  |*|
+-+-----+-+

Du meinst, ich hab sozusagen nicht zwei Buttons sondern acht, von denen aber nur zwei sichtbar sind?
Je nach Drehung wird dann das nächste Pärchen sichtbar gemacht.
In deinem Beispiel würden dann bloß immer zwei Buttons übereinander liegen, aber die sind ja nie beide gleichzeitig sichtbar.

Das wäre dann ungefähr wie die Lösung, die ich gestern ausprobiert habe.
Bloß mit dem Unterschied, dass ich ein RelativePanel verwendet und je nach Lage die AlignXXXWithPanel-Properties anders gesetzt habe.

Der Nachteil daran:
Bei jedem State müssen die RelativePanel-Properties, die die anderen States setzen, auf false gesetzt werden - und das für jeden Button. Ich hab allerdings auch nicht ausprobiert, was passiert, wenn man das nicht tut 😄

In deinem Beispiel, wenn das Handy senkrecht gehalten wird, wären dann folgende Properties gesetzt:

myRelativePanel.HorizontalAlignment="Stretch"
myRelativePanel.VerticalAlignment="Stretch"

myButton1.(RelativePanel.AlignBottomWithPanel)="True"
myButton1.(RelativePanel.AlignLeftWithPanel)="True"
myButton2.(RelativePanel.AlignBottomWithPanel)="True"
myButton2.(RelativePanel.AlignRightWithPanel)="True"

myButton1.(RelativePanel.AlignTopWithPanel)="False"
myButton1.(RelativePanel.AlignRightWithPanel)="False"
myButton2.(RelativePanel.AlignTopWithPanel)="False"
myButton2.(RelativePanel.AlignLeftWithPanel)="False"

Insgesamt also 10 Setter pro VisualState, macht 40 Setter - eine ziemlich volle Angelegenheit.
Kurz Button ein bzw. ausblenden ist da sehr viel einfacher 😄

PS:

Gibt es eigentlich eine vorhandene Möglichkeit, die Veränderung der Positionen in einem Grid oder RelativePanel mit Animationen darzustellen?
Wenn ein Child eine andere Position bekommt, dann soll der dort hin "wandern".
Ich kenne nur den Weg, wie ich die Position direkt (DoubleAnimation gegen die Positions-Property von einem Canvas) animieren kann, aber die hab ich bei einem Grid oder RelativePanel nicht. Da setze ich ja nur die relative Position und die echte Position rechnet das Panel alleine.

Ich meinte das etwas anders:

In die Bereiche mit dem X platziert man Container (mit Buttons und ähnlichem Gedöns) - macht also 4 Container. Die Container werden dann je nach Lage angezeigt oder ausgeblendet, so dass immer nur ein Container sichtbar ist.

Der Bereich in der Mitte ist für den Content gedacht.

Die Bereiche mit dem * bleiben komplett frei.

Man setzt also 4 Eigenschaften und gut ist 😉

Achso meinst Du das

Ist definitiv die einfachere Möglichkeit im Vergleich zu meiner Idee mit dem RelativePanel 😄

Ein bisschen unschön, dass man dann nicht nur zwei Buttons baut sondern acht, aber mit einem klugen Style muss man ja nur den Button schreiben und den Style zuweisen, fertig.

Hi Palladin007,

Ein bisschen unschön, dass man dann nicht nur zwei Buttons baut sondern acht, aber mit einem klugen Style muss man ja nur den Button schreiben und den Style zuweisen, fertig.

Evtl. würde es reichen, den Container zu stylen, anstatt jeden einzelen Button.