AnimatedIcon Klasse

Definition

/// [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

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>

<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.)

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

Eigenschaften

Angefügte Eigenschaften

Methoden

Gilt für:

Weitere Informationen

• AnimatedVisualPlayer
• Übersicht über animierte Symbole
• VisualStateManager
• Lottie-Windows