Storyboardanimationen für visuelle Zustände

Storyboardanimationen für visuelle Zustände (XAML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Mit visuellen Zuständen wird durch Änderungen am Zustand eines Steuerelements die UI geändert. Dabei werden XAML-Steuerelementvorlagen für den aktuellen Zustand geladen. Das Modell für visuelle Zustände stellt für Benutzer Feedback zum aktuellen Zustand der UI bereit und erhält die Trennung von Entwurf und Logik aufrecht, die von XAML-Steuerelementen verwendet wird. Um Eigenschaften für einen visuellen Zustand zu ändern, definieren Sie in XAML einen Satz mit Storyboardanimationen. Für die Animationen für visuelle Zustände wird dieselbe XAML-Syntax wie für Storyboardanimationen verwendet. Es gibt jedoch einige bewährte Methoden für die Definition der Animationen, damit diese für einen visuellen Zustand geeignet sind. Animationen für visuelle Zustände sollten entweder sofortiger Art (Dauer von 0) oder relativ kurz sein, d. h. weniger als eine Sekunde lang. Außerdem ist es wichtig, den Satz der Animationen, die für visuelle Zustände verwendet werden, so zu entwerfen, dass alle zustandsbezogenen Änderungen auf einen Originalwert zurückgesetzt werden, wenn dieser Zustand nicht mehr gilt.

Roadmap: Wie hängt dieses Thema mit anderen zusammen? Informationen finden Sie unter:

Animationen ohne Dauer

Nutzen Sie nach Möglichkeit immer Animationen ohne Dauer, um Eigenschaftsänderungen anzuwenden, die Teil eines visuellen Zustands sind. Bei einer Animation ohne Dauer ist sichergestellt, dass es sich um eine unabhängige Animation handelt, die daher nur eine minimale Auswirkung auf die Leistung des UI-Threads hat. Dies wirkt sich auf die Reaktionsfähigkeit des Steuerelements und der App aus, die das Steuerelement verwendet.

Gelegentlich ist für eine Animation des visuellen Zustands eine Animation mit Übersetzungstransformation erforderlich. Diese Art von Animation sieht mit einer Dauer von 0 nicht gut aus. Versuchen Sie jedoch, die Dauer kurz zu halten (unter einer Sekunde), da Benutzer nicht gut mit Elementen interagieren können, die sich bewegen. Wenn die Dauer nicht 0 ist, ist nicht mehr sichergestellt, dass es sich um eine unabhängige Animation handelt. Es ist daher also wichtig, welche Eigenschaft Sie animieren. Sie können auch erwägen, diese Arten von Zuständen mit einem VisualTransition-Element mit einer Dauer zu entwerfen, wobei die Zielanimation des visuellen Zustands jedoch keine Dauer aufweist.

Weitere Informationen zu den Auswirkungen einer abhängigen Animation und dazu, welche Animationen als abhängig eingestuft werden, finden Sie im Abschnitt "Abhängige und unabhängige Animationen" des Themas Storyboardanimationen.

Erstellen von visuellen Zuständen mit Wiederherstellung der Originalwerte

Für visuelle Zustände unterscheidet sich das scheinbare FillBehavior-Element einer Storyboardanimation von dem Verhalten, das sich bei der direkten Anwendung auf eine UI-Elementeigenschaft ergibt. Wenn ein visueller Zustand in einen anderen Zustand geändert wird, werden alle auf den vorherigen visuellen Zustand angewendeten Eigenschaftsänderungen und die zugehörigen Animationen abgebrochen – auch dann, wenn der neue visuelle Zustand nicht ausdrücklich eine neue Animation auf eine Eigenschaft anwendet. (Im Gegensatz dazu weist eine Storyboardanimation, die als Ziel direkt eine Eigenschaft der App-UI verwendet, das HoldEnd-Verhalten auf. Weitere Informationen finden Sie unter Storyboardanimationen.)

Für viele Änderungen des visuellen Zustands definieren Sie lediglich einen neuen visuellen Zustand, der leer ist (ohne Animationen und Storyboard-Wert). Von Ihrer Steuerelementlogik kann der leere visuelle Zustand aufgerufen werden, um die Animationen zu deaktivieren, die von anderen visuellen Zuständen im selben VisualStateGroup-Element angewendet werden. Viele Steuerelementvorlagen verfügen z. B. über einen Zustand mit dem Namen "Normal" unter dem VisualStateGroup-Element "CommonStates", der nicht über einen Storyboard-Wert verfügt. Die Steuerelementlogik kann den Zustand "Normal" nutzen, um die anderen Animationen des visuellen Zustands in derselben Gruppe abzubrechen, z. B. "PointerOver", "Disabled" usw.

Hinweis  Wenn ein Steuerelement in einen leeren visuellen Zustand versetzt wird, verwenden die Eigenschaften eines Steuerelements die Werte der Originalvorlage oder andere Standardwerte, es sei denn, die XAML für die UI-Definition verfügt über einen Wert, oder der App-Code ändert den Wert zur Laufzeit. Genauer gesagt: Wenn die Animation für den Eigenschaftswert deaktiviert wird, wird der Wert gemäß der Vorrangigkeit des Abhängigkeitseigenschaftswerts neu ausgewertet. Weitere Informationen zu diesem Konzept finden Sie unter Übersicht über Abhängigkeitseigenschaften.
 

Visuelle Zustände für die zeigerbezogene Interaktion

Die meisten Steuerelemente, von denen visuelle Zustände definiert werden und die ausgewählt oder aufgerufen werden können, verfügen über eine visuelle Hauptgruppe mit dem Namen "CommonStates". In "CommonStates" werden normalerweise die folgenden benannten Zustände verwendet:

  • "Normal"
  • "PointerOver"
  • "Pressed"
  • "Disabled"

"Normal" ist der Zustand, wenn das Steuerelement nicht betätigt wurde, wenn es nicht deaktiviert ist und wenn sich der Zeiger nicht auf seinem Treffertestbereich befindet. "PointerOver" und "Pressed" sind in der Regel Zustände, die von relativ kurzer Dauer und an eine Benutzeraktion gebunden sind.

"Disabled" wird verwendet, wenn der Wert von IsEnabled auf false festgelegt ist oder wenn anhand von anderen Eigenschaften, z. B. IsReadOnly, deklariert wird, dass das Steuerelement nicht verwendet werden kann. Diese Eigenschaften werden normalerweise vom App-Code festgelegt. Von Ihrer App-Logik werden möglicherweise Steuerelemente für Kontexte deaktiviert, in denen Benutzer stattdessen ein anderes Steuerelement verwenden sollen, wobei das deaktivierte Steuerelement jedoch nicht vollständig ausgeblendet wird.

Meistens ändern Sie beim Arbeiten mit einem visuellen Zustand ein vorhandenes Design, und zwar entweder ausgehend von der Vorlagenkopie, mit der Sie begonnen haben, oder von der Standardvorlage der Steuerelementklasse, die Sie als Basisklasse verwenden. Sie können diese vorhandenen Entwurfsverhalten als Richtlinien dafür nutzen, was den Benutzern bei den einzelnen visuellen "CommonStates"-Zuständen jeweils angezeigt werden soll. Falls Sie weitere Fragen zum Design dieser visuellen Zustände haben oder Hilfe beim Schreiben einer Vorlage benötigen, die sich von anderen vorhandenen Vorlagen stark unterscheidet, finden Sie entsprechende Informationen unter Richtlinien für visuelles Feedback und Reaktion auf Benutzerinteraktionen. Bei Eingaben per Finger und Maus werden jeweils Zeigerereignisse generiert. Auf der Ebene der visuellen Zustände werden diese Interaktionsmodi normalerweise nicht unterschieden.

Angeben des visuellen Fokus

Einer der wichtigeren Aspekte der Interaktivität und des Zustands, die bzw. den ein Steuerelement bereitstellen soll, ist die Information an Benutzer, wann das Steuerelement in einer UI den Fokus besitzt. Ein Steuerelement mit Fokus ist das einzige Steuerelement, das Tastatureingaben akzeptiert. Daher ist es wichtig, dass Benutzer wissen, wann ein Textbereich der UI den Fokus besitzt. Aus Gründen der Barrierefreiheit ist es außerdem wichtig, den Fokus auch für Steuerelemente zu identifizieren, für die keine Tastatureingabe zum Eingeben von Text verwendet wird. Steuerelemente (z. B. Schaltflächen) sollten einen Aufrufmodus unterstützen, damit mit einer Taste der Tastatur (meist die Leertaste oder Eingabetaste) die gleiche Aktion durchgeführt werden kann, die per Fingereingabe oder Klick auf eine Schaltfläche möglich ist. Bei einem korrekten Entwurf können Benutzer die TAB-TASTE und andere Tasten zum Interagieren mit einer UI verwenden, ohne dabei die Fingereingabe oder die Maus zu nutzen. Weitere Informationen dazu, warum dies wichtig ist, finden Sie unter Implementieren von Barrierefreiheit für den Tastaturzugriff.

Für einen typischen visuellen Zustand wird ein Rectangle-Element verwendet, das anfänglich nicht sichtbar ist, um den Fokus anzugeben (Opacity="0"). Das Rectangle-Element ist ein direkt untergeordnetes Element der Vorlagenstammebene, wobei es sich in der Regel um eine der Bereichsklassen handelt. Stellen Sie sicher, dass für das Rectangle-Element ein schmales Stroke-Element verwendet wird, sodass nur der Füllbereich um den Inhalt des Steuerelements abgedeckt ist, wenn es den Fokus besitzt. Andernfalls kann es vorkommen, dass bei einem Steuerelement mit angezeigtem Fokus wichtige Inhalte für Benutzer verdeckt werden. Bei einem typischen Design eines visuellen Zustands sind die Zustände Teil eines VisualStateGroup-Elements mit dem Namen "FocusStates". Außerdem sind zwei Zustände mit den Namen "Focused" und "Unfocused" vorhanden.

Im VisualStateGroup-Element von "FocusStates" sollten Sie einen separaten leeren visuellen Zustand mit der Bezeichnung "PointerFocused" definieren. Die Fokusanzeige sollte nicht eingeblendet werden, wenn es sich um einen Zeiger handelt, mit dem der Fokus auf ein Steuerelement geleitet wird. Mithilfe der Fokusanzeige wird der elementspezifische Fokus angezeigt, der von Benutzern per TAB-Sequenz gesteuert wird, oder der anfängliche programmgesteuerte Fokus nach dem ersten Laden der App-Seite.

Weitere visuelle Zustände

  • Bei Steuerelementen wie CheckBox wird das VisualStateGroup-Element "CheckStates" definiert. In der Standardvorlage lauten die benannten Zustände in dieser Gruppe wie folgt: "Checked", "Unchecked", "Indeterminate".
  • Steuerelemente, die das Initiieren einer Drag & Drop-Aktion unterstützen, verfügen über eine Gruppe mit dem Namen "DragStates", in der eine Reihe von Zuständen enthalten ist. Diese Zustände werden im Start-XAML angezeigt, wenn Sie z. B. eine Kopie der GridViewItem-Steuerelementvorlage bearbeiten.
  • Steuerelemente mit Unterstützung der Elementauswahl weisen in den Vorlagen für ihre Elementtypen mehrere auswahlbezogene Zustände auf. Die Namen der Gruppen und Zustände variieren je nach Steuerelement. Sie können die Namen anzeigen, wenn Sie eine Kopie der Vorlage bearbeiten.
  • Einige Microsoft Visual Studio-Projekte für Apps aus der Windows 8-Ära definieren visuelle Zustände für Ansichtszustände des Anzeigebereichs. In den Vorlagen von Windows 8.1 ist dies nicht mehr der Fall.

XAML-Beispielcode

Hier ist XAML-Beispielcode für einen typischen Satz visueller Zustände in einem VisualStateGroup-Element von "CommonStates" angegeben. Dieser wird direkt aus den Windows-Runtime-Standardvorlagen für Steuerelemente und andere UI-Elemente übernommen. Sie können eine Kopie der XAML der Standardvorlage bearbeiten, falls Sie einige AppBar-Schaltflächen in Ihrer App anpassen möchten. Wie im Folgenden ersichtlich, wurde der Beispielcode, ausgehend von der vollständigen Vorlage, leicht bearbeitet (mit Auslassungszeichen ...), weil Sie nicht die gesamte Datei und nicht jeden visuellen Zustand sehen müssen, um die Grundprinzipien zu verstehen.


<Style x:Key="BackButtonStyle" TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Grid x:Name="RootGrid">
...
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
...
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames 
                    Storyboard.TargetName="RootGrid"
                    Storyboard.TargetProperty="Visibility"
                  >
                    <DiscreteObjectKeyFrame Value="Collapsed" KeyTime="0"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
...
          </VisualStateManager.VisualStateGroups>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

  • Beim Zustand "Disabled" wird eine Storyboardanimation auf die Visibility-Eigenschaft angewendet. Die Visibility-Eigenschaft verwendet eine Enumeration. Zum Animieren benötigen Sie also ein DiscreteObjectKeyFrame-Element, um Value auf eine bestimmte Enumerationskonstante der Visibility-Enumeration festzulegen. Das Anwenden einer Änderung auf das Visibility-Element eines Kompositionselements oder auch auf das gesamte Steuerelement ist bei Definitionen visueller Zustände häufig anzutreffen.
  • Beachten Sie, dass der Zustand "Normal" leer ist. Die Steuerelementlogik kann diesen Zustand laden, um den visuellen Zustand mit dem Namen "Disabled" abzubrechen und das Visibility-Element auf seinen von der Vorlage definierten Wert zurückzusetzen, also den Visible-Standardwert.

Steuerelementlogik zur Verwendung von visuellen Zuständen

Bei einer typischen Steuerelementlogik werden verschiedene Eingabeereignisse und Statuseigenschaften verwendet, um zu ermitteln, welcher visuelle Zustand aus den unterschiedlichen Gruppen mit Zuständen in einem Steuerelement zur Laufzeit aktiv sein soll.

  • Zeigerbezogene visuelle Zustände (z. B. "PointerOver" und "Pressed") können geändert werden, indem die Eingabeereignisse PointerEntered und PointerExited behandelt werden. Normalerweise behandeln Steuerelemente diese Ereignisse, indem sie die integrierten Handler OnPointerEntered und OnPointerExited überschreiben.
  • "Disabled" kann von IsEnabledChanged oder von Handlern für Änderungen an anderen steuerelementspezifischen Eigenschaften wie IsReadOnly aufgerufen werden.
  • Fokusbezogene visuelle Zustände können geändert werden, indem die Ereignisse GotFocus und LostFocus behandelt werden. Normalerweise behandeln Steuerelemente diese Ereignisse, indem sie die integrierten Handler OnGotFocus und OnLostFocus überschreiben. Für OnGotFocus sollte die Steuerelementlogik das FocusState-Element überprüfen, um zu ermitteln, ob die Fokusänderung durch den Zeiger verursacht wurde. Wenn ja, sollte der Zustand "PointerFocused" anstelle von "Focused" verwendet werden.

VisualTransition-Element

Zusätzlich zur Definition der verschiedenen benannten visuellen Zustände kann ein VisualStateGroup-Element auch über eine Sammlung von VisualTransition-Elementen verfügen. Mit einem VisualTransition-Element wird ein Animationsverhalten definiert, das ausgeführt wird, wenn eine Zustandsänderung erfolgt (Aufruf von GoToState). Sie sehen einen visuellen Übergang, wenn zwischen dem an der Zustandsänderung beteiligten alten und neuen Zustand Unterschiede bei den Eigenschaftswerten bestehen und ein VisualTransition-Element vorhanden ist, das auf den alten bzw. neuen benannten Zustand als From- oder To-Wert verweist.

Für ein VisualTransition-Element wird normalerweise keine Dauer von 0 verwendet, weil der Zweck eines visuellen Übergangs darin besteht, eine zeitabhängige Änderung des visuellen Zustands darzustellen.

Grob gesagt gibt es zwei Möglichkeiten zum Definieren eines VisualTransition-Elements: mithilfe eines spezifischen Storyboard -Elements, von dem eine oder mehrere Eigenschaften definiert werden, wenn Sie eine zeitabhängige Storyboardanimation anwenden, oder mithilfe des GeneratedDuration-Verhaltens.

Von einem spezifischen Storyboard werden quasi die Verfahren angewandt, die in diesem Thema und im Thema Storyboardanimationen beschrieben sind, jedoch mit der Ausnahme, dass Animationen ohne Dauer in diesem Storyboard nicht verwendet werden sollten. Bei den in den visuellen Übergängen animierten Eigenschaften muss es sich nicht um Eigenschaften handeln, bei denen zwischen den visuellen Zuständen des Übergangs gewechselt wird.

Ein GeneratedDuration-Verhalten muss lediglich einen Nicht-Nullwert für GeneratedDuration aufweisen. Anschließend wird vom System für visuelle Zustände bestimmt, welche Eigenschaften ihren Wert zwischen den alten und neuen Zuständen ändern, und eine interpolierte Animation zwischen den geänderten Werten mit der entsprechenden Dauer generiert. Das GeneratedDuration-Verhalten funktioniert nur für Werte, die per Animation interpoliert werden können: Double-, Point- oder Color-Werte.

Für ein VisualTransition-Element definieren Sie die visuellen Zustände, zwischen denen für das VisualTransition-Element der Übergang durchgeführt werden soll. Mit From wird auf den alten Zustand verwiesen, und mit To wird auf den neuen Zustand verwiesen. Wenn Sie einen Wert für From haben, jedoch nicht für To (oder umgekehrt), wird der nicht festgelegte Wert so interpretiert, als ob auf einen beliebigen anderen Zustand verwiesen wird, der sich ebenfalls in derselben Gruppe visueller Zustände befindet. Ein VisualTransition-Element ohne From und To hat keinerlei Auswirkung.

Anstelle der standardmäßigen linearen Interpolation können Sie auch ein anderes Interpolationsverhalten verwenden, indem Sie einen Wert für GeneratedEasingFunction festlegen. Eine Liste der möglichen verwendbaren Beschleunigungsfunktionen und der mathematischen Formeln vom Typ "Funktion in Abhängigkeit der Zeit", die dabei jeweils genutzt werden, finden Sie unter Keyframeanimationen und Animationen für Beschleunigungsfunktionen.

Gehen Sie bei Verwendung des GeneratedDuration-Verhaltens mit Bedacht vor. Da es sich der Definition nach um eine Animation ohne Dauer handelt, kann es vorkommen, dass Sie versehentlich eine abhängige Animation für Eigenschaften erstellen, die sich ändern, und so die Leistung des Steuerelements oder der App beeinträchtigt wird.

VisualState-Animationen werden immer ausgeführt, wenn ein Zustand eintritt. Dies gilt auch, wenn das Steuerelement zum ersten Mal angezeigt wird. Bei VisualTransition-Animationen ist dies nicht der Fall. Es wird kein Übergang in den ersten geladenen Zustand durchgeführt. Dies gilt auch, wenn ein Übergang vorhanden ist, für den der erste Zustand als To-Element angegeben ist.

Ändern von Vorlagenkopien

Tools wie Visual Studio bieten ein einfaches Verfahren, für ein Steuerelement eine neue Vorlage zu erstellen. Beginnen Sie dazu mit einer Kopie eines Segments der XAML der Windows-Runtime-Standardvorlage und Platzieren Sie dieses so, dass es von der App und dem Projekt verwendet und modifiziert werden kann. Alle visuellen Zustände für ein Steuerelement sind in dieser Vorlage ebenfalls enthalten, und zwar im XAML-Knoten VisualStateManager.VisualStateGroups direkt unterhalb des Stammelements des Vorlageninhalts im Template-Hauptstilsetter. Stellen Sie beim Verwenden einer Vorlagenkopie stets sicher, dass Sie alle benannten visuellen Zustände und Gruppen mit visuellen Zuständen reproduzieren, mit der die Vorlage gestartet werden muss. Wenn Sie dies nicht tun, fehlen für das Steuerelement möglicherweise wichtige visuelle Zustände, mit denen Benutzer über UI-Interaktionen informiert werden. Die Steuerelementlogik versucht, GoToState aufzurufen, um auf erwartete benannte Zustände zuzugreifen, die in Ihrer benutzerdefinierten XAML-Vorlage nicht vorhanden sind. Gemäß VisualStateManager-Verhalten verbleibt das Steuerelement in dem letzten visuellen Zustand, der korrekt geladen wurde. Beispielsweise kann das Steuerelement auch dann im Zustand "PointerOver" gefangen sein, wenn sich der Zeiger nicht mehr auf dem Steuerelement befindet. Dies kann vorkommen, wenn Sie den Zustand "Normal" nicht angeben, der normalerweise aufgerufen wird, wenn der Zeiger das Steuerelement verlässt.

Weitere Informationen zum Ändern von Steuerelementvorlagen finden Sie unter Schnellstart: Steuerelementvorlagen.

Verwenden Sie für die Animation derselben Eigenschaft nicht visuelle Zustände aus verschiedenen Gruppen.

Die meisten Modelle für visuelle Zustände besitzen mehrere Gruppen für visuelle Zustände. Dabei ist jede Gruppe verantwortlich für die Darstellung des Zustands für einen Satz von Bedingungen, die exklusiv in dieser Gruppe gelten. Beispiel: Ein Steuerelement enthält eine Gruppe, die auf Zeigerereignisse reagiert, einen Satz, der auf den aktuellen Tastaturfokus reagiert, und einen Zustand für die Texteingabe. Ein solches Steuerelement verwendet also mehrere Zustände gleichzeitig. Wenn Zustände aus verschiedenen Gruppen dieselbe Eigenschaft als Aktion für einen visuellen Zustand ändern, ist nicht mehr ermittelbar, welcher Wert verwendet wird. In diesem Fall ist entscheidend, welcher Zustand zuletzt eingegeben wurde. Nicht empfohlene Vorgehensweise. Möglicherweise ist es erforderlich, eng verwandte Elemente in die Steuerelementvorlage aufzunehmen. Damit stellen Sie sicher, dass verschiedene Gruppen für visuelle Zustände unterschiedliche Elemente verwenden, wenn sie Eigenschaften animieren, die sich auf den visuellen Zustand des Steuerelements auswirken.

Verwenden der Animationsbibliothek in visuellen Zuständen

Die Animationsbibliothek für die Windows-Runtime umfasst mehrere Designanimationen. Designanimationen sind Animationen für eine oder mehrere Eigenschaften vordefinierter Windows-Runtime-XAML-UI-Arten. Einige der Windows-Runtime-XAML-Steuerelemente enthalten Designanimationen innerhalb der standardmäßigen visuellen Zustände. Diese sind an zwei möglichen Positionen zu finden:

  • Als eine der Animationen im VisualState.Storyboard-Steuerelement für mindestens einen visuellen Zustand des Steuerelements. An dieser Position wird die Designanimation ausgeführt, wenn der visuelle Zustand verwendet wird (wenn die Steuerelementlogik das GoToState-Element aufruft, das auf den Zustand verweist).
  • Als eine der Animationen in VisualTransition.Storyboard, innerhalb von VisualStateGroup.Transitions. An dieser Position wird die Designanimation ausgeführt, wenn der Visual State-Manager den Übergang zwischen den beiden relevanten benannten Zuständen ausführt.

Wenn Sie mit einer XAML-Kopie der standardmäßigen Steuerelementvorlage beginnen, die Sie mit Vorlage bearbeiten/Kopie bearbeiten in Microsoft Visual Studio abgerufen haben, werden möglicherweise Designanimationen in Ihrer Ausgangskopie angezeigt. In der Regel sollten Sie Designanimationen nicht aus einer Steuerelementvorlage entfernen. Die Designanimationen erfüllen einen Zweck: Sie sollen nicht nur das Erscheinungsbild für das XAML-Steuerelement bereitstellen, sondern auch die Windows-Benutzerfreundlichkeit insgesamt unterstreichen.

Um eine Designanimation zu verwenden, müssen Sie auf die Animation in einem bestimmten Bereich innerhalb der Vorlage verweisen. Hierfür legen Sie das TargetName-Attribut der Designanimation mit einer Zeichenfolge fest, die das x:Name-Element einer der Vorlagenteile ist, der an anderer Stelle in der Vorlage definiert ist (Dies sind die Teile, die die Startvorlage definieren). Designanimationen verweisen auf spezifische Eigenschaften und manchmal auf mehr als eine zugehörige Eigenschaft im Hintergrund. Da nicht sofort offensichtlich ist, auf welche Eigenschaften eine Designanimation verweist, ist auch nicht offensichtlich, auf welche Teile Sie mit dem TargetName-Element verweisen müssen, damit das Ziel und die Eigenschaften ordnungsgemäß animiert werden.

Wichtig  Verwenden Sie nicht Storyboard.TargetName oder Storyboard.TargetProperty, wenn Sie auf eine Designanimation verweisen. Das Zielmodell steht in Konflikt mit dem nicht angefügten TargetName-Attribut und der Natur des Eigenschaftsziels nach Designanimationen.
 

Wenn die Standardvorlagen oder -stile eine bestimmte Designanimation verwenden, wird diese in den Animationsthemen gelistet, die die Art und Weise und den Zeitpunkt für die Verwendung der spezifischen Bibliotheksanimationen dokumentieren. Betrachten Sie beispielsweise Animieren von Zeigeraktionen, sehen Sie den Abschnitt "Zeigeranimationen in standardmäßigem Windows-Runtime-Steuerelementverhalten", in dem vermerkt ist, dass ListViewItem und GridViewItem ein PointerDownThemeAnimation-Element in einem ihrer visuellen Zustände der Standardvorlage einschließen. Möglicherweise ist dies auch in der Stil- und Vorlagendokumentation für Steuerelemente vermerkt. Unter ListViewItem-Stile und -Vorlagen sehen Sie genau, wo das PointerDownThemeAnimation-Element im Abschnitt "Standardformat" vorhanden ist, der die vollständige XAML anzeigt.

Die Designanimationen sind im Allgemeinen nicht ohne Dauer, aber von kurzer Dauer, normalerweise weniger als 2 Sekunden. Sie sind sorgfältig aufgebaut, sodass sie auf Eigenschaften abzielen, die keine abhängigen Animationen ergeben.

Die meisten der Designanimationen weisen keine weiteren Eigenschaften außer TargetName und die von Timeline geerbten Eigenschaften auf. Einige der Designanimationen weisen allerdings zusätzliche Eigenschaften auf. Beispielsweise weist PopInThemeAnimation eine FromHorizontalOffset-Eigenschaft auf, die die Startposition der Animation ändert. Nehmen Sie hier Änderungen nur mit Bedacht vor, da es sich um Standardwerte handelt, die eine einheitliche Windows-Benutzererfahrung darstellen. Das drastische Ändern des Verhaltens kann sich ebenso negativ auswirken wie das vollständige Entfernen der Designanimation.

Wie bereits erwähnt, weisen bestimmte Steuerelemente standardmäßig Designanimationen in ihren visuellen Zuständen oder visuellen Übergängen auf. In einigen Fällen können jedoch die Eigenschaften einer Bibliotheksanimation, die ein Steuerelement für seine visuellen Zustände oder seinen Stil verwendet, gestaltet werden, ohne dass die Steuerelementvorlage vollständig ersetzt werden muss. Dies wird durch das Ändern des TemplateSettings-Eigenschaftswerts eines solchen Steuerelements ermöglicht. Die Designanimationen der folgenden Steuerelemente können außerhalb der Vorlagen geändert werden, indem auf die unterstützende Eigenschaft verwiesen wird:

In der Animationsbibliothek ist ein weiterer Animationstyp vorhanden, der sog. Designübergang. Diese Animation wird für *Transitions-Eigenschaften für spezifische Steuerelemente oder ggf. die UIElement.Transitions-Eigenschaft verwendet. Diese Eigenschaften befinden sich nicht innerhalb der visuellen Zustände. Allerdings sind Designübergänge im Allgemeinen relevant für die Steuerelementgestaltung, da *Transitions-Eigenschaften im standardmäßigen (implizierter Schlüssel) Style für ein Control oder ggf. für andere UI-Elemente, z. B. TextBlock-Elemente, festgelegt werden. Einige der zuvor aufgeführten TemplateSettings-Elemente wirken sich auf die Designübergänge aus. Weitere Infos zur Verwendung von Designübergängen finden Sie unter Animieren der Benutzeroberfläche und Schnellstart: Animieren der Benutzeroberfläche anhand von Bibliotheksanimationen.

Visuelle Zustände für andere Szenarien als Steuerelementvorlagen

Die Verwendung von visuellen Zuständen beim Definieren aktueller UI-Zustände ist nicht auf Szenarien mit Steuerelementvorlagen beschränkt. Sie können jederzeit visuelle Zustände nutzen, wenn Sie einen Satz mit Eigenschaftsänderungen anwenden möchten, die nur während einer erkennbaren Bedingung gelten sollen. Beispielsweise können Sie visuelle Zustände für Seiten Ihrer App verwenden, um App- oder Fensterzustände zu ermitteln und als Reaktion darauf die Layouteigenschaften zu ändern. Für visuelle Zustände bei Szenarien ohne Vorlagen ist Code erforderlich, um die Überwachung von Zustandsänderungen sicherzustellen und den richtigen visuellen Zustand für das UI-Element aufzurufen, von dem die Zustände verwendet werden. Dies kann das Behandeln von Ereignissen einschließen, die Teil des App-Modells sind, z. B. die Ereignisse im Window-Objekt, Systemgeräteereignisse, die Änderungen der Bildschirmausrichtung oder der Auflösung erkennen bzw. Aktivierungshandler im Application-Objekt. Manche dieser Konzepte überschneiden sich mit dem Anwendungsmodell und mit der Art und Weise, wie Ihre App Ansichtszustände nachverfolgt – siehe Schnellstart: Entwerfen von Apps für verschiedene Fenstergrößen.

Verwandte Themen

Reaktion auf Benutzerinteraktionen
Storyboardanimationen
Roadmap für das Erstellen von Apps mit C#, C++ oder VB
Übersicht über Abhängigkeitseigenschaften
Keyframeanimationen und Animationen für Beschleunigungsfunktionen
Schnellstart: Steuerelementvorlagen
VisualStateManager
VisualState
VisualTransition
Storyboard
Storyboard.TargetProperty

 

 

Anzeigen:
© 2016 Microsoft