Freigeben über

Viewports und Inhalt

direct manipulation verwendet Viewports, Inhalte und Kontakte, um die interaktiven Elemente der Benutzeroberfläche zu beschreiben.

Ein Viewport- ist ein Bereich innerhalb eines Fensters, der Eingaben von Benutzerinteraktionen empfangen und verarbeiten kann. Der Viewport stellt den Bereich des Inhalts dar, der vom Endbenutzer zu einem bestimmten Zeitpunkt (auch als Inhaltsclip bezeichnet) angezeigt werden kann. Der Viewport verfügt über mehrere Funktionen:

  • Er verwaltet den Interaktionszustand (z. B. wenn der Inhalt bearbeitet werden kann, wenn Inhalte bearbeitet werden, wenn Inhalte in der Inertiaanimation enthalten sind) und ordnet Eingaben ausgabetransformationen zu.
  • Sie enthält Inhalte, die als Reaktion auf die Benutzerinteraktion verschoben werden. Dies kann ein HTML-Div-Element (Bildlauf), eine schwenkfähige Liste (der Windows 8-Startbildschirm) oder das Popupmenü für ein Auswahlsteuerelement sein.

Ein Viewport wird durch Aufrufen von CreateViewport-erstellt. Mehrere Viewports können in einem einzigen Fenster erstellt werden, um eine umfassende Benutzeroberfläche zu erzielen.

Content stellt das Element dar, das als Reaktion auf eine Interaktion transformiert wird. Mit anderen Worten, der Inhalt verschiebt oder skaliert, wenn der Benutzer verschiebt oder zusammendrückt. Es gibt zwei Arten von Inhalten:

  • Primären Inhalt ist das einzelne, systeminterne Element innerhalb eines Viewports, das auf Eingabemanipulationen und Dieträgheit reagiert. Der primäre Inhalt wird gleichzeitig mit dem Viewport erstellt und kann nicht aus einem Viewport hinzugefügt oder entfernt werden. Sie können das Verhalten von primären Inhalten mithilfe von Andockpunkten anpassen (weiter unten erläutert).
  • Sekundärer Inhalt relativ zur Bewegung des primären Inhalts verschoben. Sekundärer Inhalt wird separat vom Viewport erstellt und kann einem Viewport hinzugefügt oder daraus entfernt werden. Alle sekundären Inhaltstransformationen werden basierend auf der Transformation des primären Inhalts berechnet. Bestimmte Regeln können angewendet werden, um zu ändern, wie die Transformation basierend auf dem beabsichtigten Zweck des Elements berechnet wird, das während der Erstellung durch seine CLSID identifiziert wird.

In diesem Diagramm, das vor und nach einer Verschiebung zeigt, wurde ein einzelner Kontakt verwendet, um primären Inhalt zu verschieben. Obwohl der Benutzer nicht direkt mit dem Verschiebungsindikator (sekundärer Inhalt) interagiert, wird der sekundäre Inhalt verschoben, wenn der primäre Inhalt verschoben wird. Dies stellt visuelle Hinweise für die Verschiebung des Benutzers bereit.

Diagramm, das vor/nach einer Verschiebung

Konfigurieren eines Viewports

Nachdem Sie den Viewport erstellt haben. das Verhalten mithilfe einer Interaktionskonfigurationkonfigurieren. Die Interaktionskonfiguration gibt an, welche Manipulationen wie Verschiebungen unterstützt werden.

Verschieben ändert die Position des Inhalts entlang der horizontalen oder vertikalen Achse oder beides, wenn ein Benutzer schwenkt. Wenn Sie die Übersetzung auf beiden Achsen konfigurieren, wird der Inhalt in beliebiger Richtung frei verschoben.

Um die Bewegung des Inhalts einzuschränken, konfigurieren Sie Schienen, in der Regel sowohl auf der horizontalen als auch auf der vertikalen Achse. Wenn sich die Interaktion eines Benutzers in erster Linie entlang einer einzelnen Achse befindet (dargestellt durch die blauen Bereiche im nächsten Diagramm), wird die Verschiebung geschienenen und der Inhalt wird nur entlang der geschiedenen Achse verschoben. Wenn der Benutzer verschiebt und zurzeit geschienen ist und eine zweite Verschiebung ausführt, während sich der Inhalt in der Schwungzeit befindet, wird die neue Verschiebung weiterhin geschienen.

Diagramm mit Inhalten in einem Viewport in einer geschienenen Verschiebung

Beispiel: Ein Viewport ist für die horizontale und vertikale Verschiebung konfiguriert. Im ersten Frame kommt der Kontakt nach unten. Im zweiten wird eine vertikale Verschiebung initiiert, und der Kontakt ist an die vertikale Schiene gesperrt. Nachdem die Verschiebung geschienen ist, wird nur die vertikale Komponente einer diagonalen Verschiebung verwendet, um den Inhalt zu verschieben.

Wenn der Benutzer diagonal verschiebt, sodass er sich nicht in den Schienenerkennungsbereichen (den weißen Bereichen) befindet, wird die Verschiebung entläufet und der Inhalt wird frei in beiden Achsen verschoben.

Diagramm mit Inhalten, die sich in einer ungeläufen Verschiebung

Zoomen ändert den Skalierungsfaktor des Inhalts, wenn ein Benutzer den Skalierungsfaktor zusammendrückt oder gestreckt. Der Punkt, an dem der Inhalt skaliert wird (als Zoommittelpunkt bezeichnet), befindet sich in der Mitte der Kontakte. Wenn Sie die horizontale oder vertikale Ausrichtung festgelegt haben, ändert sich die Zoommitte, um die Ausrichtung beizubehalten.

Diagramm mit dem Zoomen von Inhalten mit einer angegebenen Ausrichtung

Sie können dieses Verhalten überschreiben, indem Sie die Entsperrungsmitte angeben, wodurch die Zoommitte in der Mitte der Kontakte festgelegt wird.

Diagramm mit dem Zoomen von Inhalten mit entsperrter Zoommitte

Trägheit ist die graduelle Verzögerung einer Manipulation, sowohl das Schwenken als auch das Zoomen, nachdem alle Kontakte (bei Toucheingabe) oder nach der Tastatur-/Mauseingabe (z. B. Durch Klicken auf eine Bildlaufleiste oder durch Drücken der Pfeiltasten) aufgehoben wurden. Wenn ein Benutzer den Inhalt bearbeitet, wird die Manipulation nicht sofort beendet, nachdem der Kontakt aufgehoben wurde. Stattdessen wird der Inhalt in der aktuellen Richtung und Geschwindigkeit fortgesetzt und verlangsamt sich allmählich zu einem Stopp.

Andockpunkte und Begrenzungen

Eine Trägheitsanimation findet statt, nachdem die Manipulation beendet wurde, weil ein Finger vom Bildschirm (im Falle einer Toucheingabe) oder als Ergebnis einer Tastatur-/Mausaktion (z. B. Pfeiltasten, Bildlauf auf der Seite nach oben/unten, Mausrad-Bildlauf usw.) aufgehoben wurde.

Es gibt zwei Informationen, die die Inertia-Animation definieren:

  • Der Restpunkt der Animation – die endgültige Endposition der jeweiligen Transformationskomponente.
  • Die Animationsdauer, Kurve, Geschwindigkeit – diese werden durch den Typ des Ruhepunkts bestimmt.

Die Inertia-Animation wird von Andockpunkten und Begrenzungen beeinflusst. Grenzen geben die maximalen und minimalen Restpunkte für Inhalte an. Wenn Inhalte während der Tia eine Grenze erreichen, wird eine Begrenzungsanimation angewendet. Snap points are defined on the primary content to modify the rest point and modify the inertia animation curve itself.

Sie definieren Andockpunkte mit SetSnapInterval, wenn der Inhalt regelmäßig platziert oder mit SetSnapPoints, wenn der Inhalt ungleich verteilt ist. Hier ist ein Beispiel für Andockpunkte:

Diagramm, das zeigt, wie sich Andockpunkte auf das Verschieben von auswirken

Im Diagramm gibt es einen Teilinhalt mit einer Reihe von Unterinhaltsblöcken – Nachrichtenelemente in einer Newsreader-Typ-App oder -Elemente in einer Rasteransicht. Die Absicht besteht darin, den linken Rand eines Elements an der linken Kante des Viewports anzudockt, nachdem Trägheit beendet wurde.

Es gibt zwei Gruppen von Andockpunkttypen:

  • Optional im Vergleich zu obligatorischen: Ein optionaler Andockpunkt andockt die Inertia-Animation nur, wenn sich der Inertia-Restpunkt in der Nähe des Andockpunkts befindet. Ein obligatorischer Andockpunkt wird immer an einem angegebenen Andockpunkt angedockt.
  • single vs. Multiple: Ein mehrfacher Andockpunkttyp ermöglicht dem Inhalt, viele Andockpunkte hinter sich zu verschieben, bevor er an einem Andockpunkt in der Nähe seines natürlichen Ruhepunkts zur Ruhe kommt. Ein einzelner Andockpunkttyp wählt den nächsten nächsten Andockpunkt als Restpunkt für die Inertia-Animation aus.

Das nächste Diagramm zeigt, wie Andockpunkttypen die Restposition der Inertia-Animation ändern.

Diagramm, das zeigt, wie Inertiät und Andockpunkte

In diesem Diagramm wird der Trägheitsanfangspunkt als "Start" und die natürliche Trägheitsendposition bezeichnet, wenn Andockpunkte nicht als "Ende" vorhanden sind. Die vertikalen Linien markieren die verschiedenen Andockpunkte. In dieser Tabelle wird beschrieben, wie sich jede Art von Andockpunkt auf die Endposition der Animation auswirkt.

Punkttyp Beschreibung
Obligatorischer Single Andockpunkt P1 wird ausgewählt, da es sich um den ersten Andockpunkt in Richtung Trägheit handelt.
Obligatorisches Vielfaches Andockpunkt P2 wird ausgewählt, da er dem Endpunkt in Richtung Trägheit am nächsten kommt
Optional single Andockpunkt P1 wird ausgewählt, da es sich um den ersten Andockpunkt handelt, der während der Trägheit aufgetreten ist.
Optionales Vielfaches Andockpunkt P2 wird ausgewählt, da er sich nahe dem natürlichen Endpunkt befindet.

Offset für Andockpunkte und RTL-Szenarien

Diagramm mit rtl snap point use

Mit dem SetSnapCoordinate API können Sie den Andockpunktoffset und die Koordinatensystem anwenden, das alle Andockpunkte oder Andockintervalle mithilfe des angegebenen Offset-/Koordinatensystems versetzt.

Das Koordinatensystem ist in RTL-Szenarien sehr nützlich, in denen Sie Andockpunkte vom linken Rand des Inhalts in umgekehrter Richtung beschreiben möchten. Im vorherigen Diagramm wird SetSnapCoordinate mit dem DIRECTMANIPULATION_MOTION_TRANSLATEX und DIRECTMANIPULATION_COORDINATE_MIRRORED Flag verwendet, das die Andockpunkte automatisch vom linken Rand des Inhalts versetzt und sie in der Reihenfolge von rechts nach links bereitstellt: S1 ist bei 0px, S2 ist bei 50px (usw.). Alle Offsetsätze mit SetSnapCoordinate werden von diesem linken Rand des Inhalts automatisch versetzt, einschließlich des richtigen Skalierungsfaktors.

Sie verwenden fast immer SetSnapCoordinate mit dem Ursprung Parameter festgelegt, um das Festlegen von Andockpunkten außerhalb des Inhaltsbereichs zu vermeiden.

Wenn der Viewport beispielsweise 200x200 ist und der Inhalt 1000x200 ist und die Schnittstelle RTL ist, hat der Viewport den linken Rand bei x=800, wenn der Viewport zum ersten Mal angezeigt wird. Rufen Sie SetSnapCoordinate mit SetSnapCoordinate(DIRECTMANIPULATION_MOTION_TRANSLATEX, DIRECTMANIPULATION_COORDINATE_MIRRORED, 1000.0) auf, um anzugeben, dass die Andockpunkte von rechts nach links berechnet werden sollen, beginnend am rechten Rand des Inhalts.

Verhaltensweisen

Ein Verhalten ist ein Objekt, das an einen Viewport angefügt werden kann, um zu ändern, wie direct Manipulation die Ausgabetransformation des primären oder sekundären Inhalts eines Viewports behandelt. Ein Verhaltensobjekt kann sich auf einen oder mehrere Aspekte einer Manipulation auswirken, z. B. die Verarbeitung von Eingaben oder die Anwendung der Inertia-Animation. Beispielsweise wirkt sich ein autocroll-Verhalten auf die Inertiationsanimation aus, indem eine Bildlaufanimation an einem Ende des primären Inhalts ausgeführt wird. Ein Querziehkonfigurationsverhalten wirkt sich auf die Eingabeverarbeitung durch direkte Manipulation aus, die erkennt, wann eine Folie querziehende Aktion ausgeführt wird.

Ein Verhaltensobjekt wird erstellt, indem CreateBehavioraufgerufen wird, das einem Viewport hinzugefügt wurde und dann sein Verhalten asynchron konfiguriert wird. Wenn Sie das Verhalten aus dem Viewport entfernen, werden die Effekte entfernt.

Koordinatensystem

Es gibt drei Hauptkoordinatensysteme, die von Direct Manipulationverwendet werden:

  • Clientkoordinatensystem – beschreibt das Rechteck des Clientfensters. Einheiten sind in Pixeln.
  • Viewport-Koordinatensystem – beschreibt das Rechteck eines Bereichs innerhalb des Clients, der Eingaben verarbeiten kann. Einheiten sind anwendungsdefiniert (mit SetViewportRect).
  • Inhaltskoordinatensystem – beschreibt das Rechteck oder die Größe des primären Inhalts. Einheiten sind anwendungsdefiniert (mit SetContentRect).

Für alle drei Systeme werden Koordinaten relativ zum jeweiligen oberen linken Ursprung definiert und sind positiv nach rechts und unten. Diese Koordinatensysteme werden im nächsten Diagramm veranschaulicht. Nur der Abschnitt des Inhalts innerhalb des Viewportrechtecks kann vom Endbenutzer angezeigt oder bearbeitet werden.

Diagramm, das zeigt, wie Inhalte, Client- und Viewportkoordinaten

Verwandelt

Direct Manipulation verwaltet mehrere unterschiedliche Transformationen, die zur gesamt angezeigten Ausgabe beitragen.

  • Inhaltstransformation – die anfängliche Transformation, die von Direct Manipulation basierend auf einer Manipulation oder Unträgheit berechnet wurde. Es erfasst die Effekte von Andockpunkten, Schienen, Standardüberlauf (Manipulation), Standardüberpracht (Trägheit) und ZoomToRect-Animationen.
  • Ausgabetransformation – die endgültige visuelle oder Ausgabetransformation. Es ist die Kombination sowohl des Inhalts als auch der Synchronisierungstransformationen.
  • Synchronisierungstransformation – berechnet, wenn Sie SyncContentTransform-aufrufen. Sie hilft direct Manipulation eine neue Inhaltstransformation anzuwenden, die von der Anwendung bereitgestellt wird, während gleichzeitig die vorhandene Ausgabetransformation beibehalten wird.
  • Anzeigetransformation – die von der Anwendung als Teil der Nachbearbeitung angewendet wird. Weitere Informationen finden Sie unter SyncDisplayTransform-.

Da die Ausgabetransformation zum visuellen Offset einer Oberfläche auf dem Bildschirm vorgesehen ist, führt direct Manipulation die erforderliche Rundung der Ausgabetransformationskomponenten durch, sodass Text und andere Inhalte immer an einer integralen Pixelgrenze gerendert/zusammengesetzt werden. Der Rundungsmechanismus hängt von mehreren Faktoren ab, einschließlich der Geschwindigkeit der Bewegung und des Vorhandenseins von Remotedesktop. Der Rundungsmechanismus für sekundäre Inhalte stimmt mit dem des primären Inhalts überein, wobei der Unterschied in der Bewegung zwischen den beiden berücksichtigt wird. Clients von GetOutputTransform sollten nicht vom genauen Rundungsmechanismus der Ausgabetransformation abhängen, da sich verschiedene Faktoren darauf auswirken.

Anmerkung

Dies bedeutet, dass die Komponenten einer Inhaltstransformation möglicherweise nicht integral sind und Unterpixelversatz enthalten können. Clients, die direct manipulation verwenden, werden empfohlen, die GetOutputTransform- zu verwenden, um die richtige visuelle Transformation zu berechnen, die bei Verwendung des manuellen Aktualisierungsmodus auf den Inhalt angewendet werden soll. Wenn Sie den automatischen Updatemodus mit dem integrierten Kompositor verwenden, wendet direct Manipulation diese Transformation automatisch im Auftrag des Clients an. Diese Transformation wird von direct Manipulation generiert, um beim Verfassen der visuellen Ausgabe visuell ansprechende Ergebnisse sicherzustellen.

Viewport-Zustand

Während die Eingabe verarbeitet wird, verwaltet der Viewport den Interaktionszustand und die Zuordnung von Eingaben zu Ausgabetransformationen. Überprüfen Sie den Interaktionsstatus des Viewports, indem Sie GetStatus-aufrufen.

Diagramm mit Interaktionszuständen

  • Building – der Viewport wird erstellt und kann noch keine Eingaben verarbeiten. Rufen Sie zum Verarbeiten der Eingabe IDirectManipulationViewport::Enableauf. Wenn Enable nicht aufgerufen wird, wechselt der Viewport zum Status "Deaktiviert".

    Anmerkung

    Dies ist der Anfangszustand der Interaktion.

  • Aktiviert – der Viewport kann Eingaben verarbeiten. Wenn ein Kontakt angezeigt wird (SetContact aufgerufen wird) und eine Manipulation erkannt wird, wechselt der Viewport zur Ausführung.

  • Wird ausgeführt – der Viewport verarbeitet derzeit Eingaben und Aktualisierten Inhalte. Wenn der Kontakt aufgehoben wird, wechselt der Viewport bei Konfiguration zu "Inertia".

  • Inertia – der Inhalt bewegt sich in einer Unträgheitsanimation. Sobald die Inertiät abgeschlossen ist, wechselt der Viewport auf "Ready". Wenn die automatische Deaktivierung für den Viewport festgelegt wurde, wechselt sie von "Inertia" zu "Ready" und dann zu "Disabled".

  • Bereit – der Viewport kann Eingaben verarbeiten. Wenn ein Kontakt angezeigt wird (SetContact aufgerufen wird) und eine Manipulation erkannt wird, wechselt der Viewport zur Ausführung.

  • Angehalten – der Viewport wird möglicherweise angehalten, wenn die Eingabe in der SetContact- Kette zu einem übergeordneten Element höhergestuft wurde. Dies wird in Mehreren Viewports genauer erläutert: Treffertests und Viewporthierarchie.

  • Deaktiviert – der Viewport verarbeitet weder Eingaben noch Rückrufe. Ein Viewport kann von verschiedenen Zuständen deaktiviert werden, indem IDirectManipulationViewport::D isableaufgerufen wird. Wenn die automatische Deaktivierung für den Viewport festgelegt wurde, wechselt sie automatisch zu "Deaktiviert", nachdem eine Manipulation verarbeitet wurde. Rufen Sie zum erneuten Aktivieren eines deaktivierten Viewports IDirectManipulationViewport::Enableauf.

Mehrere Viewports: Treffertests und Viewporthierarchie, ActivateConfiguration, GetOutputTransform, SyncDisplayTransform-