Freigeben über

Viewports und Inhalte

  • Artikel

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

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

  • Es verwaltet den Interaktionszustand (z. B. wenn der Inhalt für die Bearbeitung bereit ist, wenn Inhalte manipuliert werden, wenn sich Inhalte in einer Inertia-Animation befinden) und ordnet Eingaben Ausgabetransformationen zu.
  • Es enthält Inhalte, die als Reaktion auf die Benutzerinteraktion verschoben werden. Dies kann ein HTML-div-Element (Scrollen), eine schwenkfähige Liste (der Windows 8 Startbildschirm) oder das Popupmenü für ein Auswahlsteuerelement sein.

Ein Viewport wird erstellt, indem CreateViewport aufgerufen wird. Mehrere Viewports können in einem einzigen Fenster erstellt werden, um eine umfassende Benutzeroberfläche zu erzeugen.

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

  • Primärer Inhalt ist das einzelne, intrinsische Element innerhalb eines Viewports, das auf Eingabemanipulationen und DieTrägheit reagiert. Primärer Inhalt wird gleichzeitig mit dem Viewport erstellt und kann nicht hinzugefügt oder aus einem Viewport entfernt werden. Sie können das Verhalten von primären Inhalten mithilfe von Einrastpunkten anpassen (weiter unten erläutert).
  • Sekundärer Inhalt wird relativ zur Bewegung des primären Inhalts verschoben. Sekundäre Inhalte werden separat vom Viewport erstellt und können einem Viewport hinzugefügt oder 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 bietet visuelle Hinweise darauf, wie weit der Benutzer verschoben hat.

Diagramm vor/nach einem Schwenk

Konfigurieren eines Viewports

Nachdem Sie den Viewport erstellt haben. konfigurieren sie ihr Verhalten mithilfe einer Interaktionskonfiguration. Die Interaktionskonfiguration gibt an, welche Bearbeitungen wie das Verschieben unterstützt werden.

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

Um die Bewegung von Inhalten einzuschränken, konfigurieren Sie Schienen, in der Regel sowohl auf der horizontalen als auch auf der vertikalen Achse. Wenn die Interaktion eines Benutzers in erster Linie auf einer einzelnen Achse verläuft (dargestellt durch die blauen Regionen im nächsten Diagramm), wird der Schwenk gegittert , und der Inhalt bewegt sich nur entlang der schienengebundenen Achse. Wenn der Benutzer geschwend ist und sich derzeit im Rail befindet und eine zweite Schwenkung ausführt, während sich der Inhalt in der Schwungzeit befindet, wird die neue Schale weiterhin gegittert.

Diagramm mit Inhalten in einem Viewport in einem gegitterten Schwenk

Beispiel: Ein Viewport ist für horizontales und vertikales Verschieben konfiguriert. Im ersten Frame wird der Kontakt heruntergefahren. In der zweiten wird ein vertikaler Schwenk initiiert, und der Kontakt wird an der vertikalen Schiene gesperrt. Schließlich wird nach dem Schwenken nur die vertikale Komponente eines diagonalen Schwenks verwendet, um den Inhalt zu verschieben.

Wenn der Benutzer diagonal so schwenkt, dass er sich nicht in den Schienenerkennungsregionen (den weißen Regionen) befindet, wird die Schale entgleist , und der Inhalt bewegt sich frei in beiden Achsen.

Diagramm, das Inhalte zeigt, die sich in einem nicht geplaneten Schwenk bewegen

Das Zoomen ändert den Skalierungsfaktor des Inhalts, wenn ein Benutzer einklemmt oder dehnt. Der Punkt, um den der Inhalt skaliert wird (als Zoomzentrum 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, das das Zoomen von Inhalten mit einer angegebenen Ausrichtung zeigt

Sie können dieses Verhalten überschreiben, indem Sie das Entsperrzentrum angeben, wodurch das Zoomzentrum in der Mitte der Kontakte festgelegt wird.

Diagramm zum Zoomen von Inhalten mit entsperrter Zoomzentrale

Die Trägheit ist die graduelle Verzögerung einer Manipulation, sowohl beim Schwenken als auch beim Zoomen, nachdem alle Kontakte angehoben wurden (im Falle der Berührung) oder nach der Tastatur-/Mauseingabe (z. B. Klicken auf eine Bildlaufleiste oder Drücken der Pfeiltasten). Wenn ein Benutzer den Inhalt bearbeitet, wird die Bearbeitung nicht sofort beendet, nachdem der Kontakt aufgehoben wurde. Stattdessen setzt sich der Inhalt in der aktuellen Richtung und Geschwindigkeit fort und verlangsamt sich allmählich bis zu einem Stopp.

Einrastpunkte und Begrenzungen

Eine Trägheitsanimation erfolgt nach dem Ende der Bearbeitung durch Das Heben eines Fingers vom Bildschirm (bei Berührung) oder durch eine Tastatur-/Mausaktion (z. B. Pfeiltasten, Seite nach oben/unten, Mausradlauf usw.).

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

  • Der Ruhepunkt der Animation – die endende Position der jeweiligen Transformationskomponente.
  • Animationsdauer, Kurve, Geschwindigkeit – diese werden durch den Typ des Ruhepunkts bestimmt.

Die Inertia-Animation wird durch Einrastpunkte und Begrenzungen beeinflusst. Grenzen geben die maximalen und minimalen Ruhepunkte für Inhalte an. Wenn Inhalte während der Inertia eine Grenze erreichen, wird eine Begrenzungsanimation angewendet. Einrastpunkte werden für den primären Inhalt definiert, um den Ruhepunkt zu ändern und die Kurve der Anträgheitsanimation selbst zu ändern.

Sie definieren Einrastpunkte mit SetSnapInterval , wenn sich der Inhalt regelmäßig im Abstand befindet, oder mit SetSnapPoints , wenn der Inhalt ungleichmäßig angeordnet ist. Hier sehen Sie ein Beispiel für Einrastpunkte:

Diagramm, das zeigt, wie sich im Inhalt festgelegte Einrastpunkte auf das Verschieben auswirken

Im Diagramm befindet sich ein Inhalt mit einer Reihe von Unterinhaltsblöcken – Nachrichtenelemente in einer App vom Typ Nachrichtenleser oder Elemente in einer Rasteransicht. Die Absicht besteht darin, den linken Rand eines Elements am linken Rand des Viewports einzurasten, nachdem die Trägheit beendet wurde.

Es gibt zwei Gruppen von Anrastpunkttypen:

  • Optional im Vergleich zu Obligatorisch: Ein optionaler Einrastpunkt nimmt die Animation nur dann an, wenn sich der Ruhepunkt in der Nähe des Einrastpunkts befindet. Ein obligatorischer Einrastpunkt rastet die Inertia-Animation immer an einen angegebenen Einrastpunkt ein.
  • Single vs. Multiple: Ein mehrfacher Einrastpunkttyp ermöglicht es dem Inhalt, sich an vielen Snappunkten zu bewegen, bevor er an einem Einrastpunkt in der Nähe des natürlichen Ruhepunkts zur Ruhe kommt. Ein einzelner Einrastpunkttyp wählt den nächsten Einrastpunkt als Ruhepunkt für die Inertia-Animation aus.

Im nächsten Diagramm wird veranschaulicht, wie Einrastpunkttypen die Ruheposition der Inertia-Animation ändern.

Diagramm, das zeigt, wie Inerrägheits- und Einrastpunkte interagieren

In diesem Diagramm wird der Trägheitsstartpunkt als "Start" und die natürliche Trägheitsendposition ohne Einrastpunkte als "Ende" bezeichnet. Die vertikalen Linien markieren die verschiedenen Einrastpunkte. In dieser Tabelle wird beschrieben, wie sich jeder Typ von Einrastpunkt auf die Endposition der Animation auswirkt.

Punkttyp BESCHREIBUNG
Obligatorische Einzel Der Einrastpunkt P1 wird ausgewählt, weil er der erste Einrastpunkt in Richtung der Tia ist.
Obligatorisches Vielfaches Der Einrastpunkt P2 wird ausgewählt, weil er dem Endpunkt in Richtung der Schwungträgheit am nächsten ist.
Optional einzel Der Einrastpunkt P1 wird ausgewählt, da er der erste Anrastpunkt ist, der während der Inertia auftritt
Optional mehrere Der Einrastpunkt P2 wird ausgewählt, weil er sich in der Nähe des natürlichen Endpunkts befindet.

Snappunktoffset und RTL-Szenarien

Diagramm der Verwendung des RTL-Snappunkts

Sie wenden das Offset- und Koordinatensystem des Snappunkts mithilfe der SetSnapCoordinate-API an, die alle Einrastpunkte oder Einrastintervalle mit dem angegebenen Offset-/Koordinatensystem offsett.

Das Koordinatensystem ist sehr nützlich in RTL-Szenarien, in denen Sie Einrastpunkte 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 Einrastpunkte automatisch vom linken Rand des Inhalts versetzt und sie in rechts-nach-links-Reihenfolge bereitstellt: S1 ist bei 0px, S2 bei 50px (usw.). Jeder Offsetsatz, der SetSnapCoordinate verwendet , wird automatisch von diesem linken Rand des Inhalts versetzt, einschließlich des richtigen Skalierungsfaktors.

Sie verwenden fast immer SetSnapCoordinate mit festgelegtem Ursprungsparameter , um das Festlegen von Einrastpunkten außerhalb des Inhaltsbereichs zu vermeiden.

Wenn der Viewport beispielsweise 200 x 200 und der Inhalt 1000 x 200 und die Schnittstelle RTL ist, befindet sich der Viewport bei der ersten Darstellung des Viewports am linken Rand bei x=800. Rufen Sie SetSnapCoordinate mit SetSnapCoordinate(DIRECTMANIPULATION_MOTION_TRANSLATEX, DIRECTMANIPULATION_COORDINATE_MIRRORED, 1000.0) auf, um anzugeben, dass die Andockpunkte beginnend am RECHTEN Rand des Inhalts von rechts nach links berechnet werden sollen.

Verhalten

Ein Verhalten ist ein Objekt, das an einen Viewport angefügt werden kann, um zu ändern, wie die direkte Bearbeitung 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 Automatisches Rollenverhalten auf die Inertia-Animation aus, indem eine Bildlaufanimation an einem Ende des primären Inhalts ausgeführt wird. Ein folieübergreifendes Konfigurationsverhalten wirkt sich auf die Eingabeverarbeitung der direkten Manipulation aus, die erkennt, wenn eine Übergreifende Aktion ausgeführt wird.

Ein Verhaltensobjekt wird durch Aufrufen von CreateBehavior erstellt, einem Viewport hinzugefügt, und dann wird sein Verhalten asynchron konfiguriert. Wenn Sie das Verhalten aus dem Viewport entfernen, werden die Auswirkungen entfernt.

Koordinatensystem

Es gibt drei Standard Koordinatensysteme, die von der direkten Manipulation verwendet werden:

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

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

Diagramm, das zeigt, wie Inhalts-, Client- und Viewportkoordinaten interagieren

Transformationen

Direct Manipulation verwaltet mehrere verschiedene Transformationen, die zur gesamten angezeigten Ausgabe beitragen.

  • Inhaltstransformation : Die anfängliche Transformation, die durch direkte Manipulation basierend auf einer Manipulation oder Einer UnzuvereHung berechnet wird. Es erfasst die Effekte von Anrastpunkten, Geländern, Standardüberlauf (Manipulation), Standardüberlauf (Trägheit) und ZoomToRect-Animationen.
  • Ausgabetransformation : die endgültige Visuelle oder Ausgabetransformation. Es ist die Kombination aus dem Inhalt und den Synchronisierungstransformationen.
  • Synchronisierungstransformation : Wird berechnet, wenn Sie SyncContentTransform aufrufen. Die direkte Manipulation hilft dabei, eine neue Inhaltstransformation anzuwenden, die von der Anwendung bereitgestellt wird, während gleichzeitig die vorhandene Ausgabetransformation beibehalten wird.
  • Anzeigetransformation – wird von der Anwendung als Teil der Nachverarbeitung angewendet. Weitere Informationen finden Sie unter SyncDisplayTransform .

Da die Ausgabetransformation eine Oberfläche visuell auf dem Bildschirm versetzt, führt Direct Manipulation die erforderliche Rundung für die 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 dem Vorhandensein von Remotedesktop. Der Rundungsmechanismus für sekundären Inhalt 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 verschiedene Faktoren darauf einfluss haben.

Hinweis

Dies bedeutet, dass die Komponenten einer Inhaltstransformation möglicherweise nicht integral sind und Unterpixeloffsets enthalten können. Clients, die die direkte Manipulation verwenden, werden empfohlen, getOutputTransform zu verwenden, um die richtige visuelle Transformation zu berechnen, die bei Verwendung des manuellen Updatemodus auf den Inhalt angewendet wird. Wenn Sie den automatischen Updatemodus mit dem integrierten Compositor verwenden, wendet Direct Manipulation diese Transformation automatisch im Auftrag des Clients an. Diese Transformation wird durch die direkte Bearbeitung generiert, um visuell ansprechende Ergebnisse beim Verfassen der visuellen Ausgabe sicherzustellen.

Viewportzustand

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

Diagramm mit Interaktionszuständen für die Direktmanipulation

  • Erstellen: Der Viewport wird erstellt und kann noch keine Eingaben verarbeiten. Um eingaben zu verarbeiten, rufen Sie IDirectManipulationViewport::Enable auf. Wenn Enable nicht aufgerufen wird, wechselt der Viewport in den Status Deaktiviert.

    Hinweis

    Dies ist der Anfangszustand der Interaktion.

  • Aktiviert: Der Viewport ist bereit für die Verarbeitung von Eingaben. Wenn ein Kontakt ausfällt (SetContact wird aufgerufen) und eine Manipulation erkannt wird, wechselt der Viewport in Wird ausgeführt.

  • Wird ausgeführt: Der Viewport verarbeitet derzeit Eingaben und aktualisiert Inhalte. Wenn der Kontakt angehoben wird, wechselt der Viewport zu "Inertia", wenn er konfiguriert ist.

  • Inertia : Der Inhalt bewegt sich in einer Inertia-Animation. Sobald die Erägheit abgeschlossen ist, wechselt der Viewport zu Bereit. Wenn die automatische Deaktivierung für den Viewport festgelegt wurde, wechselt sie von "Inertia" zu "Bereit" und dann zu "Deaktiviert".

  • Bereit: Der Viewport ist bereit für die Verarbeitung von Eingaben. Wenn ein Kontakt ausfällt (SetContact wird aufgerufen) und eine Manipulation erkannt wird, wechselt der Viewport in Wird ausgeführt.

  • Angehalten: Der Viewport wird möglicherweise angehalten, wenn seine Eingabe auf ein übergeordnetes Element in der SetContact-Kette heraufgestuft wurde. Dies wird ausführlicher unter Mehrere Viewports: Treffertests und Viewporthierarchie erläutert.

  • Deaktiviert: Der Viewport verarbeitet keine Eingaben oder führt keine Rückrufe aus. Ein Viewport kann aus verschiedenen Zuständen deaktiviert werden, indem IDirectManipulationViewport::D isable aufgerufen wird. Wenn die automatische Deaktivierung für den Viewport festgelegt wurde, wechselt sie automatisch zu Deaktiviert, nachdem eine Bearbeitung verarbeitet wurde. Um einen deaktivierten Viewport erneut zu aktivieren, rufen Sie IDirectManipulationViewport::Enable auf.

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