AnimatedIcon Klasse

Referenz

Definition

Namespace:: Microsoft.UI.Xaml.Controls

Wichtig

Einige Informationen beziehen sich auf Vorabversionen, die vor dem Release ggf. grundlegend überarbeitet werden. Microsoft übernimmt hinsichtlich der hier bereitgestellten Informationen keine Gewährleistungen, seien sie ausdrücklich oder konkludent.

Bearbeiten

Stellt ein Symbol dar, das ein Visual anzeigt und steuert, das als Reaktion auf Benutzerinteraktionen und Änderungen des visuellen Zustands animieren kann.

Diese Dokumentation gilt für WinUI 2 für UWP (für WinUI im Windows App SDK siehe Windows App SDK Namespaces).

/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.XamlContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Source")]
class AnimatedIcon : IconElement

[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.XamlContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Source")]
public class AnimatedIcon : IconElement

Public Class AnimatedIcon
Inherits IconElement

Vererbung: IconElement
AnimatedIcon

Attribute: ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Beispiele

Tipp

Weitere Informationen, Entwurfsanleitungen und Codebeispiele finden Sie unter Animiertes Symbol.

Öffnen Sie die WinUI 2-Katalog-App, und sehen Sie sich animiertesIcon in Aktion an.

Die App WinUI 2-Katalog umfasst interaktive Beispiele für die meisten WinUI 2-Steuerelemente, -Features und -Funktionen. Rufen Sie die App aus dem Microsoft Store oder den Quellcode auf GitHub ab.

Hinzufügen eines animiertenIcons zu einer Schaltfläche

In diesem Beispiel wird eine Zurück-Schaltfläche veranschaulicht, die ein Zurück-Pfeilsymbol anzeigt, das animiert, wenn Zeigerereignisse auftreten.

AnimatedBackVisualSource ist eine Rückpfeilanimation, die von WinUI bereitgestellt wird.
FallbackIconSource wird verwendet, wenn Animationen nicht wiedergegeben werden können.
Die AddHandler-Methode mit handledEventsToo festgelegt auf true wird für Ereignisse verwendet, die die Schaltfläche als Handled markiert.

<!-- 
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
-->

<AppBarButton x:Name="BackButton" Label="Back"
              muxc:AnimatedIcon.State="Normal"
              PointerEntered="AppBarButton_PointerEntered"
              PointerExited="AppBarButton_PointerExited">
    <muxc:AnimatedIcon>
        <animatedvisuals:AnimatedBackVisualSource/>
        <muxc:AnimatedIcon.FallbackIconSource>
            <muxc:SymbolIconSource Symbol="Back"/>
        </muxc:AnimatedIcon.FallbackIconSource>
    </muxc:AnimatedIcon>
</AppBarButton>

// using muxc = Microsoft.UI.Xaml.Controls;

// Add handlers.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    SettingsButton.AddHandler(UIElement.PointerPressedEvent, 
        new PointerEventHandler(AppBarButton_PointerPressed), true);
    SettingsButton.AddHandler(UIElement.PointerReleasedEvent, 
        new PointerEventHandler(AppBarButton_PointerReleased), true);
    base.OnNavigatedTo(e);
}

// Remove handlers.
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
    SettingsButton.RemoveHandler(UIElement.PointerPressedEvent, 
        (PointerEventHandler)AppBarButton_PointerPressed);
    SettingsButton.RemoveHandler(UIElement.PointerReleasedEvent, 
        (PointerEventHandler)AppBarButton_PointerReleased);
    base.OnNavigatedFrom(e);
}

private void AppBarButton_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    muxc.AnimatedIcon.SetState((UIElement)sender, "PointerOver");
}

private void AppBarButton_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    muxc.AnimatedIcon.SetState((UIElement)sender, "Pressed");
}

private void AppBarButton_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    muxc.AnimatedIcon.SetState((UIElement)sender, "Normal");
}

private void AppBarButton_PointerExited(object sender, PointerRoutedEventArgs e)
{
    muxc.AnimatedIcon.SetState((UIElement)sender, "Normal");
}

Hinweise

Legen Sie die AnimatedIcon.Source-Eigenschaft fest, um das animierte Visual für das Symbol anzugeben. WinUI stellt animierte Visuals für einige gängige Symbole im Microsoft.UI.Xaml.Controls.AnimatedVisuals-Namespace bereit.

In einigen Fällen können Systemeinstellungen oder Einschränkungen verhindern, dass das Symbol animiert wird.

Wenn der Benutzer Animationen in seinen Systemeinstellungen deaktiviert, zeigt den letzten Frame des Zustandsübergangs an, AnimatedIcon in dem sich das Steuerelement befand.
Geben Sie eine FallbackIconSource an, die verwendet werden soll, wenn Animationen nicht unterstützt werden, z. B. in älteren Versionen von Windows, die keine Lottie-Animationen unterstützen.

Benutzerdefinierte Animationen

Sie können benutzerdefinierte Animationen erstellen, die als animiertes Symbol in Ihrer App verwendet werden. Animationen können mit Adobe AfterEffects erstellt werden. Anschließend können Sie diese Ausgabe mit der Lottie-Windows-Bibliothek verwenden, um eine benutzerdefinierte Klasse zu generieren, die IAnimatedVisualSource2 implementiert. Sie können diese Klasse als Quelle für ein animiertes Symbol verwenden. Weitere Informationen finden Sie unter Verwenden von Lottie zum Erstellen animierter Inhalte für ein AnimiertesIcon.

Steuern des Status des animierten Symbols

Sie ändern die Wiedergabeposition und den Zustand der Animation, indem Sie die angefügte Eigenschaft AnimatedIcon.State festlegen. Die state-Eigenschaft akzeptiert einen Zeichenfolgenwert, der den visuellen Zustand beschreibt, z. B. "Normal", "PointerOver" oder "Pressed". Sie können auch einen bestimmten Zustandsübergang angeben, z. B. "PressedToNormal".

Eine animierte Symbolquelle enthält Marker, die eine Position in der Animationszeitachse einem visuellen Zustand zuordnen. Die Zeichenfolgenwerte, die von unterstützt Source werden, um die State angefügte Eigenschaft festzulegen, werden in der Markers Auflistung definiert. Weitere Informationen finden Sie unter Definieren von AnimatedIcon-Markern.

Animierte visuelle Quellen, die in Steuerelementvorlagen verwendet werden, verfügen häufig über einen komplexeren Satz dieser Markers Zuordnung zu Steuerungszuständen, während animierte Visuals für allgemeinere Verwendung oft einen einfacheren Satz dieser Markers Zuordnung zu Zeigerereignissen haben.

Festlegen des Zustands

Sie können die -Eigenschaft für oder AnimatedIcon für einen Vorgänger in der XAML-Struktur festlegen. In beiden Fällen müssen Sie die Syntax der angefügten Eigenschaft wie folgt verwenden:

<muxc:AnimatedIcon muxc:AnimatedIcon.State="Normal">...</muxc:AnimatedIcon>

Wichtig

Wenn Sie der XAML-Struktur einen AnimatedIcon hinzufügen und die State Eigenschaft für ein Vorgängerelement festlegen, muss die State Eigenschaft auf einen Anfangswert festgelegt werden, bevor das animierte Symbol zuerst geladen wird, damit das Symbol animiert werden kann. In der Regel legen Sie den Anfangszustand in XAML fest, wie hier gezeigt.

<StackPanel muxc:AnimatedIcon.State="Normal" ...>
   <muxc:AnimatedIcon>
       <animatedvisuals:AnimatedBackVisualSource/>
   </muxc:AnimatedIcon>
</StackPanel>

Verwenden von visuellen Zuständen

Sie können dem ControlTemplate eines XAML-Steuerelements hinzufügen AnimatedIcon und einen VisualStateManager verwenden, um dessen Zustand festzulegen. Einige Steuerelemente, z. B . NavigationViewItem, legen automatisch den Zustand für ein AnimatedIcon fest, das als Symbol festgelegt ist.

Ein Beispiel, das den visuellen Zustand einer Steuerelementvorlage festlegt AnimatedIcon.State , finden Sie unter CheckBox_themeresources.xaml im WinUI-GitHub-Repository. Das CheckBox Steuerelement verwendet das Häkchen AnimatedAcceptVisualSource . Die visuellen Zustandssetzer sehen wie folgt aus:

<VisualState x:Name="CheckedPointerOver">
    ...
    <VisualState.Setters>
        <Setter Target="CheckGlyph.(AnimatedIcon.State)" Value="PointerOverOn"/>
    </VisualState.Setters>
</VisualState>

Behandeln von Zeigerereignissen

Um die AnimatedIcon Reaktion auf Benutzerinteraktionen zu ermöglichen, müssen Sie die angefügte Eigenschaft AnimatedIcon.State als Reaktion auf einige Zeigerereignisse festlegen. In dieser Tabelle sind die Zeigerereignisse aufgeführt, die Sie in der Regel behandeln, sowie allgemeine Zustände, die diesen Ereignissen zugeordnet sind. (Allerdings wird nicht jede animierte Symbolquelle genau diesen Zuständen zugeordnet.)

Ereignis	State
PointerEntered	"`PointerOver`"
PointerPressed	"`Pressed`"
PointerReleased	"`Normal`"
PointerExited	"`Normal`"

Tipp

Wenn Sie die AnimatedIcon in einem Button-Steuerelement oder einem anderen Steuerelement platzieren, das über ein Click-Ereignis verfügt, werden die PointerPressed Ereignisse und PointerReleased als Behandelt markiert. Um diese Ereignisse auf einer Schaltfläche zu behandeln, verwenden Sie die AddHandler-Methode, um den Ereignishandler zu verbinden, und geben Sie als trueanhandledEventsToo. Verwenden Sie RemoveHandler , um den Ereignishandler zu trennen.

Im Abschnitt Beispiele finden Sie Beispielcode, der diese Ereignishandler veranschaulicht.

Angefügte XAML-Eigenschaften

AnimatedIcon ist die Hostdienstklasse für eine angefügte XAML-Eigenschaft.

Um den XAML-Prozessorzugriff auf die angefügten Eigenschaften zu unterstützen und auch äquivalente Get - und Set-Vorgänge für Code verfügbar zu machen, verfügt jede angefügte XAML-Eigenschaft über ein Paar von Get- und Set-Accessormethoden. Eine weitere Möglichkeit zum Abrufen oder Festlegen des Werts im Code besteht darin, das Abhängigkeitseigenschaftensystem zu verwenden, entweder GetValue oder SetValue aufzurufen und das Bezeichnerfeld als Abhängigkeitseigenschaftsbezeichner zu übergeben.

Konstruktoren

AnimatedIcon()

Initialisiert eine neue Instanz der AnimatedIcon-Klasse .

Diese Dokumentation gilt für WinUI 2 für UWP (für WinUI im Windows App SDK siehe Windows App SDK Namespaces).

Eigenschaften

FallbackIconSource	Ruft das statische Symbol ab, das verwendet werden soll, wenn das animierte Symbol nicht ausgeführt werden kann, oder legt es fest. Diese Dokumentation gilt für WinUI 2 für UWP (für WinUI im Windows App SDK siehe Windows App SDK Namespaces).
FallbackIconSourceProperty	Identifiziert die FallbackIconSource-Abhängigkeitseigenschaft . Diese Dokumentation gilt für WinUI 2 für UWP (für WinUI im Windows App SDK siehe Windows App SDK Namespaces).
MirroredWhenRightToLeft	Ruft einen Wert ab, der angibt, ob das Symbol gespiegelt wird, wenn flowDirectionauf RightToLeft festgelegt ist, oder legt diesen fest. Diese Dokumentation gilt für WinUI 2 für UWP (für WinUI im Windows App SDK siehe Windows App SDK Namespaces).
MirroredWhenRightToLeftProperty	Identifiziert die MirroredWhenRightToLeft-Abhängigkeitseigenschaft . Diese Dokumentation gilt für WinUI 2 für UWP (für WinUI im Windows App SDK siehe Windows App SDK Namespaces).
Source	Ruft das animierte Visual ab, das vom -Objekt angezeigt wird, oder legt es `AnimatedIcon` fest. Diese Dokumentation gilt für WinUI 2 für UWP (für WinUI im Windows App SDK siehe Windows App SDK Namespaces).
SourceProperty	Identifiziert die Source-Abhängigkeitseigenschaft . Diese Dokumentation gilt für WinUI 2 für UWP (für WinUI im Windows App SDK siehe Windows App SDK Namespaces).
StateProperty	Identifiziert die angefügte Xaml-Eigenschaft AnimatedIcon.State . Diese Dokumentation gilt für WinUI 2 für UWP (für WinUI im Windows App SDK siehe Windows App SDK Namespaces).

Angefügte Eigenschaften

State

Eigenschaft, die der Entwickler auf AnimatedIcon festlegt.

Diese Dokumentation gilt für WinUI 2 für UWP (für WinUI im Windows App SDK siehe Windows App SDK Namespaces).

Methoden

GetState(DependencyObject)

Ruft den Wert der angefügten AnimatedIcon.State-Eigenschaft für das angegebene DependencyObject ab.

Diese Dokumentation gilt für WinUI 2 für UWP (für WinUI im Windows App SDK siehe Windows App SDK Namespaces).

SetState(DependencyObject, String)

Gibt den Wert der angefügten AnimatedIcon.State-Eigenschaft für das angegebene DependencyObject an.

Diese Dokumentation gilt für WinUI 2 für UWP (für WinUI im Windows App SDK siehe Windows App SDK Namespaces).

Gilt für:

AnimatedIcon Klasse

Definition

Beispiele

Hinzufügen eines animiertenIcons zu einer Schaltfläche

Hinweise

Benutzerdefinierte Animationen

Steuern des Status des animierten Symbols

Festlegen des Zustands

Verwenden von visuellen Zuständen

Behandeln von Zeigerereignissen

Angefügte XAML-Eigenschaften

Konstruktoren

Eigenschaften

Angefügte Eigenschaften

Methoden

Gilt für:

Weitere Informationen

Feedback

Feedback

Zusätzliche Ressourcen