AnimatedIcon Classe

Definizione

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

Ereditarietà

IconElement

AnimatedIcon

Attributi

ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Esempio

L'app Raccolta WinUI 2 include esempi interattivi della maggior parte dei controlli, delle funzionalità e delle funzionalità winUI 2. Ottenere l'app da Microsoft Store o ottenere il codice sorgente in GitHub.

Aggiungere un oggetto AnimatedIcon a un pulsante

In questo esempio viene illustrato un pulsante Indietro che visualizza un'icona freccia indietro che anima quando si verificano eventi puntatore.

• AnimatedBackVisualSource è un'animazione con freccia indietro fornita da WinUI.
• FallbackIconSource viene usato quando non è possibile riprodurre le animazioni.
• Il metodo AddHandler con handledEventsToo impostato su true viene utilizzato per gli eventi che il pulsante contrassegna come Handled.

<!-- 
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");
}

Commenti

Impostare la proprietà AnimatedIcon.Source per specificare l'oggetto visivo animato per l'icona. WinUI fornisce oggetti visivi animati per alcune icone comuni nello spazio dei nomi Microsoft.UI.Xaml.Controls.AnimatedVisuals .

In alcuni casi, le impostazioni di sistema o le limitazioni possono impedire l'animazione dell'icona.

• Se l'utente disattiva le animazioni nelle impostazioni di sistema, AnimatedIcon visualizza il fotogramma finale della transizione di stato in cui si trovava il controllo.
• Specificare un oggetto FallbackIconSource da usare quando le animazioni non sono supportate, ad esempio nelle versioni precedenti di Windows che non supportano le animazioni Lottie.

Animazioni personalizzate

Puoi creare animazioni personalizzate da usare come icona animata nella tua app. Le animazioni possono essere create con Adobe AfterEffects, quindi puoi usare tale output con la libreria Lottie-Windows per generare una classe personalizzata che implementa IAnimatedVisualSource2. È possibile usare questa classe come Origine per un'icona animata. Per altre informazioni, vedere Usare Lottie per creare contenuto animato per un oggetto AnimatedIcon.

Controllare lo stato dell'icona animata

Per modificare la posizione di riproduzione e lo stato dell'animazione, impostare la proprietà associata AnimatedIcon.State . La proprietà state accetta un valore stringa che descrive lo stato di visualizzazione, ad esempio "Normal", "PointerOver" o "Pressed". È anche possibile specificare una transizione di stato specifica, ad esempio "PressedToNormal".

Un'icona animata Source contiene Marcatori che eseguono il mapping di una posizione nella sequenza temporale dell'animazione a uno stato di visualizzazione. I valori stringa supportati da un Source oggetto per impostare la State proprietà associata vengono definiti nell'insieme Markers . Per altre info, vedi Definire indicatori AnimatedIcon.

Le origini visive animate usate nei modelli di controllo spesso hanno un set più complesso di tale mappa agli stati di Markers controllo, mentre gli oggetti visivi animati per un uso più generale spesso hanno un set più semplice di Markers tale mappa agli eventi puntatore.

Dove impostare lo stato

Puoi impostare la proprietà su AnimatedIcon o su un predecessore nell'albero XAML. In entrambi i casi, è necessario usare la sintassi della proprietà associata, come illustrato di seguito:

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

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

Usare gli stati di visualizzazione

Puoi aggiungere un AnimatedIcon oggetto all'oggetto ControlTemplate di un controllo XAML e usare visualStateManager per impostarne lo stato. Alcuni controlli, ad esempio NavigationViewItem, impostano automaticamente lo stato di un AnimatedIcon oggetto impostato come Icona.

Per visualizzare un esempio che imposta AnimatedIcon.State lo stato di visualizzazione di un modello di controllo, vedere CheckBox_themeresources.xaml nel repository GitHub winUI. Il CheckBox controllo usa AnimatedAcceptVisualSource per il segno di spunta. I setter dello stato di visualizzazione sono simili ai seguenti:

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

Gestire eventi relativi al puntatore

Per fare in modo che risponda AnimatedIcon all'interazione dell'utente, è necessario impostare la proprietà associata AnimatedIcon.State in risposta ad alcuni eventi puntatore. Questa tabella mostra gli eventi del puntatore che si gestiranno in genere e gli stati comuni che eseguono il mapping a questi eventi. Tuttavia, non tutte le origini delle icone animate verranno mappate esattamente a questi stati.

Vedere la sezione Esempi per il codice di esempio che illustra questi gestori eventi.

Proprietà associate XAML

AnimatedIcon è la classe del servizio host per una proprietà associata XAML.

Per supportare l'accesso del processore XAML alle proprietà associate e anche per esporre operazioni get e set equivalenti al codice, ogni proprietà associata XAML ha una coppia di metodi della funzione di accesso Get e Set. Un altro modo per ottenere o impostare il valore nel codice consiste nell'usare il sistema di proprietà di dipendenza, chiamando GetValue o SetValue e passando il campo dell'identificatore come identificatore della proprietà di dipendenza.

Costruttori

Proprietà

Proprietà associate

Metodi

Si applica a

Vedi anche

• AnimatedVisualPlayer
• Panoramica dell'icona animata
• VisualStateManager
• Lottie-Windows