AnimatedIcon Classe

Referência

Definição

Namespace:: Microsoft.UI.Xaml.Controls

Importante

Algumas informações se referem a produtos de pré-lançamento que podem ser substancialmente modificados antes do lançamento. A Microsoft não oferece garantias, expressas ou implícitas, das informações aqui fornecidas.

Editar

Representa um ícone que exibe e controla um visual que pode animar em resposta à interação do usuário e às alterações de estado visual.

Esta documentação se aplica ao WinUI 2 para UWP (para WinUI no SDK do Aplicativo Windows, consulte os namespaces SDK do Aplicativo 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

Herança: IconElement
AnimatedIcon

Atributos: ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Exemplos

Dica

Para obter mais informações, diretrizes de design e exemplos de código, consulte Ícone animado.

Abra o aplicativo Galeria do WinUI 2 e veja o AnimatedIcon em ação.

Os aplicativos da Galeria do WinUI 2 incluem exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 2. Obtenha o aplicativo na Microsoft Store ou o código-fonte no GitHub.

Adicionar um AnimatedIcon a um botão

Este exemplo demonstra um botão voltar que exibe um ícone de seta para trás que anima quando ocorrem eventos de ponteiro.

AnimatedBackVisualSource é uma animação de seta para trás fornecida pelo WinUI.
O FallbackIconSource é usado quando as animações não podem ser reproduzidas.
O método AddHandler com handledEventsToo definido como true é usado para eventos que o botão marca como Manipulado.

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

Comentários

Defina a propriedade AnimatedIcon.Source para especificar o visual animado para o ícone. O WinUI fornece visuais animados para alguns ícones comuns no namespace Microsoft.UI.Xaml.Controls.AnimatedVisuals .

Em alguns casos, as configurações ou limitações do sistema podem impedir que o ícone seja animado.

Se o usuário desativar animações nas configurações do sistema, AnimatedIcon exibirá o quadro final da transição de estado em que o controle estava.
Especifique um FallbackIconSource a ser usado quando não houver suporte para animações, como em versões mais antigas do Windows que não dão suporte a animações Lottie.

Animações personalizadas

Você pode criar animações personalizadas para usar como um ícone animado em seu aplicativo. As animações podem ser criadas com o Adobe AfterEffects e, em seguida, você pode usar essa saída com a biblioteca Lottie-Windows para gerar uma classe personalizada que implementa IAnimatedVisualSource2. Você pode usar essa classe como a Origem para um ícone animado. Para obter mais informações, consulte Usar Lottie para criar conteúdo animado para um AnimatedIcon.

Controlar o estado do ícone animado

Você altera a posição de reprodução e o estado da animação definindo a propriedade anexada AnimatedIcon.State . A propriedade state usa um valor de cadeia de caracteres que descreve o estado visual, como "Normal", "PointerOver" ou "Pressed". Você também pode especificar uma transição de estado específica, como "PressedToNormal".

Um ícone animado Source contém Marcadores que mapeiam uma posição na linha do tempo de animação para um estado visual. Os valores de cadeia de caracteres que um Source dá suporte para definir a State propriedade anexada são definidos na Markers coleção. Para obter mais informações, consulte Definir marcadores AnimatedIcon.

Fontes visuais animadas usadas em modelos de controle geralmente têm um conjunto mais complexo desse Markers mapa para controlar estados, enquanto visuais animados para uso mais geral geralmente têm um conjunto mais simples desse mapa para eventos de Markers ponteiro.

Onde definir o estado

Você pode definir a propriedade no AnimatedIcon ou em um ancestral na árvore XAML. Em ambos os casos, você precisa usar a sintaxe de propriedade anexada, da seguinte maneira:

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

Importante

Se você adicionar um AnimatedIcon à árvore XAML e definir a State propriedade em um elemento ancestral, a State propriedade deverá ser definida como um valor inicial antes que o ícone animado seja carregado pela primeira vez para que o ícone seja animado. Normalmente, você define o estado inicial em XAML, conforme mostrado aqui.

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

Usar estados visuais

Você pode adicionar um AnimatedIcon ao ControlTemplate de um controle XAML e usar um VisualStateManager para definir seu estado. Alguns controles, como NavigationViewItem, definem automaticamente o estado para um AnimatedIcon que é definido como seu Ícone.

Para ver um exemplo que define AnimatedIcon.State em um estado visual de modelo de controle, consulte CheckBox_themeresources.xaml no repositório GitHub do WinUI. O CheckBox controle usa AnimatedAcceptVisualSource para sua marca de seleção. Os setters de estado visual são semelhantes a este:

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

Manipular eventos de ponteiro

Para fazer a AnimatedIcon resposta à interação do usuário, você precisa definir a propriedade anexada AnimatedIcon.State em resposta a alguns eventos de ponteiro. Esta tabela mostra os eventos de ponteiro que você normalmente manipulará e estados comuns que são mapeados para esses eventos. (No entanto, nem todas as fontes de ícone animada serão mapeadas exatamente para esses estados.)

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

Dica

Se você colocar o dentro de AnimatedIcon um Botão ou outro controle que tenha um evento Click , os PointerPressed eventos e PointerReleased serão marcados como Manipulados. Para manipular esses eventos em um botão, use o método AddHandler para conectar o manipulador de eventos e especificar handledEventsToo como true. Use RemoveHandler para desconectar o manipulador de eventos.

Consulte a seção Exemplos para obter um código de exemplo que demonstre esses manipuladores de eventos.

Propriedades anexadas XAML

AnimatedIcon é a classe de serviço host para uma propriedade anexada XAML.

Para dar suporte ao acesso do processador XAML às propriedades anexadas e também para expor operações equivalentes get e set ao código, cada propriedade anexada XAML tem um par de métodos de acessador Get e Set. Outra maneira de obter ou definir o valor no código é usar o sistema de propriedades de dependência, chamando GetValue ou SetValue e passando o campo identificador como o identificador de propriedade de dependência.

Construtores

AnimatedIcon()

Inicializa uma nova instância da classe AnimatedIcon .

Esta documentação se aplica ao WinUI 2 para UWP (para WinUI no SDK do Aplicativo Windows, consulte os namespaces SDK do Aplicativo Windows).

Propriedades

FallbackIconSource	Obtém ou define o ícone estático a ser usado quando o ícone animado não pode ser executado. Esta documentação se aplica ao WinUI 2 para UWP (para WinUI no SDK do Aplicativo Windows, consulte os namespaces SDK do Aplicativo Windows).
FallbackIconSourceProperty	Identifica a propriedade de dependência FallbackIconSource . Esta documentação se aplica ao WinUI 2 para UWP (para WinUI no SDK do Aplicativo Windows, consulte os namespaces SDK do Aplicativo Windows).
MirroredWhenRightToLeft	Obtém ou define um valor que indica se o ícone é espelhado quando o FlowDirection é RightToLeft. Esta documentação se aplica ao WinUI 2 para UWP (para WinUI no SDK do Aplicativo Windows, consulte os namespaces SDK do Aplicativo Windows).
MirroredWhenRightToLeftProperty	Identifica a propriedade de dependência MirroredWhenRightToLeft . Esta documentação se aplica ao WinUI 2 para UWP (para WinUI no SDK do Aplicativo Windows, consulte os namespaces SDK do Aplicativo Windows).
Source	Obtém ou define o visual animado mostrado pelo `AnimatedIcon` objeto . Esta documentação se aplica ao WinUI 2 para UWP (para WinUI no SDK do Aplicativo Windows, consulte os namespaces SDK do Aplicativo Windows).
SourceProperty	Identifica a propriedade Dependência de origem . Esta documentação se aplica ao WinUI 2 para UWP (para WinUI no SDK do Aplicativo Windows, consulte os namespaces SDK do Aplicativo Windows).
StateProperty	Identifica a propriedade anexada AnimatedIcon.State XAML. Esta documentação se aplica ao WinUI 2 para UWP (para WinUI no SDK do Aplicativo Windows, consulte os namespaces SDK do Aplicativo Windows).

Propriedades Anexadas

State

Propriedade que o desenvolvedor define em AnimatedIcon.

Esta documentação se aplica ao WinUI 2 para UWP (para WinUI no SDK do Aplicativo Windows, consulte os namespaces SDK do Aplicativo Windows).

Métodos

GetState(DependencyObject)

Recupera o valor da propriedade anexada AnimatedIcon.State para o DependencyObject especificado.

Esta documentação se aplica ao WinUI 2 para UWP (para WinUI no SDK do Aplicativo Windows, consulte os namespaces SDK do Aplicativo Windows).

SetState(DependencyObject, String)

Especifica o valor da propriedade anexada AnimatedIcon.State para o DependencyObject especificado.

Esta documentação se aplica ao WinUI 2 para UWP (para WinUI no SDK do Aplicativo Windows, consulte os namespaces SDK do Aplicativo Windows).

Aplica-se a

AnimatedIcon Classe

Definição

Exemplos

Adicionar um AnimatedIcon a um botão

Comentários

Animações personalizadas

Controlar o estado do ícone animado

Onde definir o estado

Usar estados visuais

Manipular eventos de ponteiro

Propriedades anexadas XAML

Construtores

Propriedades

Propriedades Anexadas

Métodos

Aplica-se a

Confira também

Comentários

Comentários

Recursos adicionais