AnimatedIcon Classe

Riferimento

Definizione

Spazio dei nomi:: Microsoft.UI.Xaml.Controls

Importante

Alcune informazioni sono relative alla release non definitiva del prodotto, che potrebbe subire modifiche significative prima della release definitiva. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.

Modifica

Rappresenta un'icona che visualizza e controlla un oggetto visivo che può essere animato in risposta alle modifiche apportate all'interazione dell'utente e allo stato di visualizzazione.

Questa documentazione si applica a WinUI 2 per la piattaforma UWP (per WinUI nel SDK per app di Windows, vedi gli spazi dei nomi SDK per app di Windows).

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

Suggerimento

Per altre info, linee guida per la progettazione ed esempi di codice, vedi Icona animata.

Aprire l'app Raccolta WinUI 2 e vedere AnimatedIcon in azione.

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>

Importante

Se aggiungi un oggetto AnimatedIcon all'albero XAML e imposti la State proprietà su un elemento predecessore, la State proprietà deve essere impostata su un valore iniziale prima che l'icona animata venga caricata per la prima volta affinché l'icona venga animata. In genere si imposta lo stato iniziale in XAML, come illustrato qui.

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

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

Suggerimento

Se si posiziona l'oggetto all'interno AnimatedIcon di un controllo Button o di un altro controllo con un evento Click , gli PointerPressed eventi e PointerReleased vengono contrassegnati come Handled. Per gestire questi eventi in un pulsante, usare il metodo AddHandler per connettere il gestore eventi e specificare handledEventsToo come true. Usare RemoveHandler per disconnettere il gestore eventi.

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

AnimatedIcon()

Inizializza una nuova istanza della classe AnimatedIcon .

Questa documentazione si applica a WinUI 2 per la piattaforma UWP (per WinUI nel SDK per app di Windows, vedi gli spazi dei nomi SDK per app di Windows).

Proprietà

FallbackIconSource	Ottiene o imposta l'icona statica da utilizzare quando l'icona animata non può essere eseguita. Questa documentazione si applica a WinUI 2 per la piattaforma UWP (per WinUI nel SDK per app di Windows, vedi gli spazi dei nomi SDK per app di Windows).
FallbackIconSourceProperty	Identifica la proprietà di dipendenza FallbackIconSource . Questa documentazione si applica a WinUI 2 per la piattaforma UWP (per WinUI nel SDK per app di Windows, vedi gli spazi dei nomi SDK per app di Windows).
MirroredWhenRightToLeft	Ottiene o imposta un valore che indica se l'icona viene con mirroring quando FlowDirection è RightToLeft. Questa documentazione si applica a WinUI 2 per la piattaforma UWP (per WinUI nel SDK per app di Windows, vedi gli spazi dei nomi SDK per app di Windows).
MirroredWhenRightToLeftProperty	Identifica la proprietà di dipendenza MirroredWhenRightToLeft . Questa documentazione si applica a WinUI 2 per la piattaforma UWP (per WinUI nel SDK per app di Windows, vedi gli spazi dei nomi SDK per app di Windows).
Source	Ottiene o imposta l'oggetto visivo animato visualizzato dall'oggetto `AnimatedIcon` . Questa documentazione si applica a WinUI 2 per la piattaforma UWP (per WinUI nel SDK per app di Windows, vedi gli spazi dei nomi SDK per app di Windows).
SourceProperty	Identifica la proprietà di dipendenza Source . Questa documentazione si applica a WinUI 2 per la piattaforma UWP (per WinUI nel SDK per app di Windows, vedi gli spazi dei nomi SDK per app di Windows).
StateProperty	Identifica la proprietà associata XAML AnimatedIcon.State . Questa documentazione si applica a WinUI 2 per la piattaforma UWP (per WinUI nel SDK per app di Windows, vedi gli spazi dei nomi SDK per app di Windows).

Proprietà associate

State

Proprietà impostata dallo sviluppatore in AnimatedIcon.

Questa documentazione si applica a WinUI 2 per la piattaforma UWP (per WinUI nel SDK per app di Windows, vedi gli spazi dei nomi SDK per app di Windows).

Metodi

GetState(DependencyObject)

Recupera il valore della proprietà associata AnimatedIcon.State per l'oggetto DependencyObject specificato.

Questa documentazione si applica a WinUI 2 per la piattaforma UWP (per WinUI nel SDK per app di Windows, vedi gli spazi dei nomi SDK per app di Windows).

SetState(DependencyObject, String)

Specifica il valore della proprietà associata AnimatedIcon.State per l'oggetto DependencyObject specificato.

Questa documentazione si applica a WinUI 2 per la piattaforma UWP (per WinUI nel SDK per app di Windows, vedi gli spazi dei nomi SDK per app di Windows).

Si applica a

AnimatedIcon Classe

Definizione

Esempio

Aggiungere un oggetto AnimatedIcon a un pulsante

Commenti

Animazioni personalizzate

Controllare lo stato dell'icona animata

Dove impostare lo stato

Usare gli stati di visualizzazione

Gestire eventi relativi al puntatore

Proprietà associate XAML

Costruttori

Proprietà

Proprietà associate

Metodi

Si applica a

Vedi anche

Commenti e suggerimenti

Commenti e suggerimenti

Risorse aggiuntive