AnimatedIcon Classe

Référence

Définition

Espace de noms:: Microsoft.UI.Xaml.Controls

Important

Certaines informations portent sur la préversion du produit qui est susceptible d’être en grande partie modifiée avant sa publication. Microsoft exclut toute garantie, expresse ou implicite, concernant les informations fournies ici.

Modifier

Représente une icône qui affiche et contrôle un visuel qui peut s’animer en réponse à l’interaction utilisateur et aux changements d’état visuel.

Cette documentation s’applique à WinUI 2 pour UWP (pour WinUI dans le SDK d'application Windows, consultez les espaces de noms SDK d'application 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

Héritage: IconElement
AnimatedIcon

Attributs: ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Exemples

Conseil

Pour plus d’informations, des conseils de conception et des exemples de code, consultez Icône animée.

Ouvrez l’application Galerie WinUI 2 et voyez AnimatedIcon en action.

L’application WinUI 2 Gallery comprend des exemples interactifs de la plupart des contrôles et fonctionnalités WinUI 2. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.

Ajouter un AnimatedIcon à un bouton

Cet exemple illustre un bouton Précédent qui affiche une icône de flèche arrière qui s’anime lorsque des événements de pointeur se produisent.

AnimatedBackVisualSource est une animation de flèche arrière fournie par WinUI.
FallbackIconSource est utilisé lorsque les animations ne peuvent pas être lues.
La méthode AddHandler avec handledEventsToo la valeur définie true sur est utilisée pour les événements que le bouton marque comme 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");
}

Remarques

Définissez la propriété AnimatedIcon.Source pour spécifier le visuel animé de l’icône. WinUI fournit des visuels animés pour certaines icônes courantes dans l’espace de noms Microsoft.UI.Xaml.Controls.AnimatedVisuals .

Dans certains cas, les paramètres système ou les limitations peuvent empêcher l’animation de l’icône.

Si l’utilisateur désactive les animations dans ses paramètres système, AnimatedIcon affiche l’image finale de la transition d’état dans laquelle se trouvait le contrôle.
Spécifiez un FallbackIconSource à utiliser lorsque les animations ne sont pas prises en charge, par exemple sur les versions antérieures de Windows qui ne prennent pas en charge les animations Lottie.

Animations personnalisées

Vous pouvez créer des animations personnalisées à utiliser comme icône animée dans votre application. Vous pouvez créer des animations avec Adobe AfterEffects, puis utiliser cette sortie avec la bibliothèque Lottie-Windows pour générer une classe personnalisée qui implémente IAnimatedVisualSource2. Vous pouvez utiliser cette classe comme source pour une icône animée. Pour plus d’informations, consultez Utiliser Lottie pour créer du contenu animé pour un AnimatedIcon.

Contrôler l’état de l’icône animée

Vous modifiez la position de lecture et l’état de l’animation en définissant la propriété jointe AnimatedIcon.State . La propriété state prend une valeur de chaîne qui décrit l’état visuel, telle que «Normal », «PointerOver » ou «Pressed ». Vous pouvez également spécifier une transition d’état spécifique, telle que «PressedToNormal ».

Une icône animée Source contient des marqueurs qui mappent une position dans la chronologie d’animation à un état visuel. Les valeurs de chaîne qu’un Source prend en charge pour définir la State propriété jointe sont définies dans la Markers collection. Pour plus d’informations, consultez Définir des marqueurs AnimatedIcon.

Les sources visuelles animées utilisées dans les modèles de contrôle ont souvent un ensemble plus complexe de cette carte aux états de Markers contrôle, tandis que les visuels animés pour une utilisation plus générale ont souvent un ensemble plus simple de cette mappe aux événements de Markers pointeur.

Où définir l’état

Vous pouvez définir la propriété sur ou AnimatedIcon sur un ancêtre dans l’arborescence XAML. Dans les deux cas, vous devez utiliser la syntaxe de propriété jointe, comme suit :

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

Important

Si vous ajoutez un AnimatedIcon à l’arborescence XAML et définissez la State propriété sur un élément ancêtre, la State propriété doit être définie sur une valeur initiale avant que l’icône animée soit chargée pour que l’icône puisse s’animer. Vous définissez généralement l’état initial en XAML comme indiqué ici.

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

Utiliser des états visuels

Vous pouvez ajouter un AnimatedIcon à l’objet ControlTemplate d’un contrôle XAML et utiliser un VisualStateManager pour définir son état. Certains contrôles, tels que NavigationViewItem, définissent automatiquement l’état d’un AnimatedIcon qui est défini comme icône.

Pour voir un exemple qui définit AnimatedIcon.State l’état visuel d’un modèle de contrôle, consultez CheckBox_themeresources.xaml dans le dépôt GitHub WinUI. Le CheckBox contrôle utilise animatedAcceptVisualSource pour sa coche. Les setters d’état visuel ressemblent à ceci :

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

Gérer des événements de pointeur

Pour répondre à l’interaction AnimatedIcon utilisateur, vous devez définir la propriété jointe AnimatedIcon.State en réponse à certains événements de pointeur. Ce tableau présente les événements de pointeur que vous allez généralement gérer, ainsi que les états courants qui correspondent à ces événements. (Toutefois, toutes les sources d’icônes animées ne correspondent pas exactement à ces états.)

Événement	État
PointerEntered	"`PointerOver`"
PointerPressed	"`Pressed`"
PointerReleased	"`Normal`"
PointerExited	"`Normal`"

Conseil

Si vous placez à l’intérieur AnimatedIcon d’un contrôle Button ou d’un autre contrôle qui a un événement Click , les PointerPressed événements et PointerReleased sont marqués comme Gérés. Pour gérer ces événements sur un bouton, utilisez la méthode AddHandler pour connecter votre gestionnaire d’événements et spécifiez handledEventsToo comme true. Utilisez RemoveHandler pour déconnecter le gestionnaire d’événements.

Consultez la section Exemples pour obtenir un exemple de code illustrant ces gestionnaires d’événements.

Propriétés jointes XAML

AnimatedIcon est la classe de service hôte pour une propriété jointe XAML.

Pour prendre en charge l’accès du processeur XAML aux propriétés jointes, ainsi que pour exposer des opérations get et set équivalentes au code, chaque propriété jointe XAML a une paire de méthodes d’accesseur Get et Set. Une autre façon d’obtenir ou de définir la valeur dans le code consiste à utiliser le système de propriétés de dépendance, en appelant GetValue ou SetValue et en passant le champ identificateur comme identificateur de propriété de dépendance.

Constructeurs

AnimatedIcon()

Initialise une nouvelle instance de la classe AnimatedIcon .

Cette documentation s’applique à WinUI 2 pour UWP (pour WinUI dans le SDK d'application Windows, consultez les espaces de noms SDK d'application Windows).

Propriétés

FallbackIconSource	Obtient ou définit l’icône statique à utiliser lorsque l’icône animée ne peut pas s’exécuter. Cette documentation s’applique à WinUI 2 pour UWP (pour WinUI dans le SDK d'application Windows, consultez les espaces de noms SDK d'application Windows).
FallbackIconSourceProperty	Identifie la propriété de dépendance FallbackIconSource . Cette documentation s’applique à WinUI 2 pour UWP (pour WinUI dans le SDK d'application Windows, consultez les espaces de noms SDK d'application Windows).
MirroredWhenRightToLeft	Obtient ou définit une valeur qui indique si l’icône est mise en miroir lorsque FlowDirection a la valeur RightToLeft. Cette documentation s’applique à WinUI 2 pour UWP (pour WinUI dans le SDK d'application Windows, consultez les espaces de noms SDK d'application Windows).
MirroredWhenRightToLeftProperty	Identifie la propriété de dépendance MirroredWhenRightToLeft . Cette documentation s’applique à WinUI 2 pour UWP (pour WinUI dans le SDK d'application Windows, consultez les espaces de noms SDK d'application Windows).
Source	Obtient ou définit le visuel animé affiché par l’objet `AnimatedIcon` . Cette documentation s’applique à WinUI 2 pour UWP (pour WinUI dans le SDK d'application Windows, consultez les espaces de noms SDK d'application Windows).
SourceProperty	Identifie la propriété de dépendance source . Cette documentation s’applique à WinUI 2 pour UWP (pour WinUI dans le SDK d'application Windows, consultez les espaces de noms SDK d'application Windows).
StateProperty	Identifie la propriété jointe XAML AnimatedIcon.State . Cette documentation s’applique à WinUI 2 pour UWP (pour WinUI dans le SDK d'application Windows, consultez les espaces de noms SDK d'application Windows).

Propriétés attachées

State

Propriété que le développeur définit sur AnimatedIcon.

Cette documentation s’applique à WinUI 2 pour UWP (pour WinUI dans le SDK d'application Windows, consultez les espaces de noms SDK d'application Windows).

Méthodes

GetState(DependencyObject)

Récupère la valeur de la propriété jointe AnimatedIcon.State pour l’objet DependencyObject spécifié.

Cette documentation s’applique à WinUI 2 pour UWP (pour WinUI dans le SDK d'application Windows, consultez les espaces de noms SDK d'application Windows).

SetState(DependencyObject, String)

Spécifie la valeur de la propriété jointe AnimatedIcon.State pour l’objet DependencyObject spécifié.

Cette documentation s’applique à WinUI 2 pour UWP (pour WinUI dans le SDK d'application Windows, consultez les espaces de noms SDK d'application Windows).

S’applique à

Share via

AnimatedIcon Classe

Définition

Exemples

Ajouter un AnimatedIcon à un bouton

Remarques

Animations personnalisées

Contrôler l’état de l’icône animée

Où définir l’état

Utiliser des états visuels

Gérer des événements de pointeur

Propriétés jointes XAML

Constructeurs

Propriétés

Propriétés attachées

Méthodes

S’applique à

Voir aussi

Commentaires

Commentaires

Ressources supplémentaires