XamlFlair

Xamlflair

O objetivo da Biblioteca Xamlflair é facilitar a implementação de animações comuns e permitir que um desenvolvedor adicione facilmente um conjunto único ou combinado de animações com apenas algumas linhas de XAML.

Showcase

Jogo de quebra -cabeça de Sekuence

Me apoiando

Se você deseja apoiar meu trabalho com alguns cafés, pode fazê -lo aqui: compre um café para mim. Sua ajuda me permite continuar gastando tempo neste projeto e continuando a mantê -lo e atualizá -lo com novos recursos quando possível. Desde já, obrigado!

Conteúdo

• Instale a partir da NUGET

• Recursos Visão geral

• Conceitos básicos

• Uso

• Tipos de animação base

• Animações coloridas ( apenas WPF e UNO )

• Substituindo os valores padrão globais

• Usando um ResourceDictionary para configurações de base

• Animações padrão ( somente WPF )

• Propriedade TransformOn ( somente WPF )

• Rotações em perspectiva ( somente UWP )

• Combinando animações

• Valores domésticos

• Traduções relativas em eixos X e Y

• Animações compostas

• Repetindo animações

• Eventos

• Ligações

• Comandos de conclusão primária e secundária

• Usando a propriedade StartWith

• Usando a propriedade AllowOpacityReset ( somente WPF )

• Usando a propriedade ClipToBounds ( apenas UWP e UNO )

• Animações de depuração

• Animações de registro

• ListViewBase ( UWP e UNO ) e ListBox -Based ( WPF ) Animações

Instale a partir da NUGET

Plataforma	Pacote	NUGET
Uwp	Xamlflair.uwp
WPF	Xamlflair.wpf
Uno	Xamlflair.uno

Para instalar o Xamlflair , execute o seguinte comando no console do gerenciador de pacotes :

UWP:

 Install-Package XamlFlair.UWP

Seu aplicativo deve segmentar um mínimo de Windows 10 versão 1809 (construção 17763)

WPF:

 Install-Package XamlFlair.WPF

Uno:

 Install-Package XamlFlair.Uno

Seu aplicativo UWP deve segmentar um mínimo de Windows 10 versão 1809 (Build 18362)

Recursos Visão geral

Recurso	Uwp	WPF	UWP (UNO)	iOS (UNO)	Android (UNO)	WASM (UNO) Experimental
Sistema de animação	Composição	Storyboards	Storyboards	Storyboards	Storyboards	Storyboards
Tipo de transformação	N / D	TransformGroup	CompositETransform	CompositETransform	CompositETransform	CompositETransform
DefaultAnimations.xaml	-	✔	-	-	-	-
TransformOn	-	✔	-	-	-	-
Animações compostas	✔	✔	✔	✔	✔	✔
Traduções relativas	✔	✔	✔	✔	✔	✔
Repetindo animações	✔	✔	✔	✔	✔	✔
Eventos e encadernas	✔	✔	✔	✔	✔	✔
Comandos de conclusão primária/secundária	✔	✔	✔	✔	✔	✔
StartWith	✔	✔	✔	✔	✔	✔
AllowOpacityReset	-	✔	-	-	-	-
ClipToBounds	✔	N / D	✔	✔	✔	✔
Listas animadas	✔	✔	✔	✔	✔	✔
Efeito desfoque	✔	✔	-	-	-	-
Efeito de saturação	✔	-	-	-	-	-
Efeito de tonalidade	✔	-	-	-	-	-
Animações coloridas	-	✔	✔	✔	✔	✔
Rotações em perspectiva (giro)	✔	-	-	-	-	-
Animações de depuração	✔	✔	✔	✔	✔	-

Conceitos básicos

O conceito básico de Xamlflair é baseado em animações que são categorizadas como de e para . Qualquer elemento da interface do usuário que consiste em A From Animation começará com um ou mais valores arbitrários e concluirá usando o valor padrão da propriedade correspondente . Qualquer elemento da interface do usuário que consiste em uma animação para começar em seu estado atual e animará um ou mais valores arbitrários .

Exemplo de A From Animation (um elemento da interface do usuário traduzindo para o valor padrão de uma tradução (0)):

Exemplo de A To Animation (um elemento da interface do usuário deslizando para longe de seu estado atual):

Nota : É importante observar que há uma exceção a esta regra para animações de cores, que é explicada na seção Tipos de animação base.

Uso

Para começar, você precisa ter a seguinte referência de namespace xaml:

UWP e UNO:

xmlns:xf="using:XamlFlair"

WPF:

xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"

A partir daqui, é uma questão simples de definir uma propriedade anexada para qualquer FrameworkElement que precise de uma animação:

< Border xf:Animations.Primary= " {StaticResource FadeIn} " />

NOTA : Se o seu FrameworkElement definir um CompositeTransform no seu XAML, ele será alterado durante o processo de animação.

NOTA : O uso do StaticResource é referenciar animações comuns globais, que é discutido na próxima seção.

Tipos de animação base

Desaparecer

Aviso : tenha cuidado ao animar FadeTo , pois o elemento permanece na árvore visual se a Visibility for Visible . Pode haver casos em que você precisará gerenciar manualmente IsHitTestVisible para permitir que o usuário tire o elemento.

Traduzir

Escala

Girar

Blur ( apenas UWP e WPF )

Saturar ( apenas UWP )

TINT ( apenas UWP )

Cor ( apenas WPF e UNO )

Nota : É importante observar ao animar uma cor usando uma animação , a cor animará de um valor especificado para o estado atual, em vez de um valor padrão.

Girando ( apenas UWP )

Nota : Leia as rotações da perspectiva da seção ( somente UWP ) para obter mais detalhes.

O seguinte lista alguns valores padrão notáveis ​​ao trabalhar com Xamlflair:

• Kind : Fadeto
• Duração ( milissegundos ): 500
• Facilitando : cúbico
• Modo de flexibilização : Desembeout
• TransformCointPoint : (0,5, 0,5)
• Evento : carregado
• InterelementDelay ( milissegundos ): 25 ( somente controles de lista )
• Transformon : Render ( somente WPF )
• Saturação : 0,5 ( somente UWP )
• TINT : transparente ( apenas UWP )

Animações coloridas ( apenas WPF e UNO )

As animações de cores exigem alguma atenção, pois são um pouco diferentes das outras animações do tipo base. Ao usar ColorTo e ColorFrom , o seguinte deve ser feito:

• Você só pode animar as seguintes propriedades: Control.Background , Control.Foreground , Control.BorderBrush , Border.Background , Border.BorderBrush , TextBlock.Foreground , Shape.Fill , Shape.Stroke
• Certifique -se de definir um pincel na propriedade correspondente que você pretende animar
• Você também deve especificar a propriedade de destino usando ColorOn

O exemplo a seguir animará o Fill do retângulo de RoyalBlue a Darkgreen:

< xf : AnimationSettings x : Key = " SampleColorAnimation "
                      Kind = " ColorTo "
                      Color = " DarkGreen "
                      ColorOn = " Fill " />

< Rectangle Fill = " RoyalBlue "
           xf:Animations.Primary= " {StaticResource SampleColorAnimation} " />

Substituindo os valores padrão globais

Se você precisar alterar globalmente um dos valores de animação padrão (por exemplo, tendo uma Duration padrão de 750 em vez de 500), você pode chamar a função OverrideDefaultSettings no código de inicialização do seu aplicativo. O exemplo a seguir altera os valores padrão para Duration e Easing :

 XamlFlair . Animations . OverrideDefaultSettings (
    duration : 750 ,
    easing : EasingType . Quadratic ) ;

Portanto, com o código de amostra acima, toda animação será executada por 750ms com uma flexibilização quadrática.

Usando um ResourceDictionary para configurações de base

Todas as animações comuns devem ser colocadas em um ResourceDictionary global (ex: Animations.xaml ) e usado quando necessário em todo o aplicativo. O objetivo é consolidar todas as animações em um arquivo com nomes significativos, para que qualquer desenvolvedor possa entender exatamente qual animação é aplicada a uma FrameworkElement . Aqui está um pequeno exemplo de como é:

< ResourceDictionary xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
                    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
                    xmlns : xf = " using:XamlFlair " >

    < x : Double x : Key = " PositiveOffset " >50</ x : Double >
    < x : Double x : Key = " NegativeOffset " >-50</ x : Double >
    < x : Double x : Key = " SmallScaleFactor " >0.75</ x : Double >
    < x : Double x : Key = " LargeScaleFactor " >1.25</ x : Double >

    < xf : AnimationSettings x : Key = " FadeIn "
                          Kind = " FadeFrom "
                          Opacity = " 0 " />

    < xf : AnimationSettings x : Key = " FadeOut "
                          Kind = " FadeTo "
                          Opacity = " 0 " />

    <!-- Scale to a larger value -->
    < xf : AnimationSettings x : Key = " Expand "
                          Kind = " ScaleXTo,ScaleYTo "
                          ScaleX = " {StaticResource LargeScaleFactor} "
                          ScaleY = " {StaticResource LargeScaleFactor} " />

    <!-- Scale from a larger value -->
    < xf : AnimationSettings x : Key = " Contract "
                          Kind = " ScaleXFrom,ScaleYFrom "
                          ScaleX = " {StaticResource LargeScaleFactor} "
                          ScaleY = " {StaticResource LargeScaleFactor} " />
    .
    .
    .
    </ ResourceDictionary >

Para configurar este conjunto de AnimationSettings pré-configuradas já disponíveis em seu aplicativo, execute as seguintes etapas:

1. Clique com o botão direito do mouse no seu projeto e clique em Adicionar> Novo Item ...
2. Escolha Dicionário de Recursos e Nomeie It Animations.xaml
3. No seu App.xaml , adicione o seguinte:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < ResourceDictionary Source = " Animations.xaml " />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

4. Em Animations.xaml , copie e cole o conteúdo dos links correspondentes abaixo:

• Configurações de animação para UWP

• Configurações de animação para WPF

• Configurações de animação para Uno

Seu aplicativo agora tem um conjunto global de animações comuns prontas para uso.

Animações padrão ( somente WPF )

Como alternativa para criar seu próprio ResourceDictionary , contendo suas AnimationSettings personalizadas, o Xamlflair fornece algumas animações padrão .

Para fazer referência a essas animações padrão em seu aplicativo, execute as etapas a seguir em seu App.xaml :

1. Defina o espaço para nome XamlFlair.WPF na parte superior:

    xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"

2. Atualize seus recursos de aplicativo:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < xf : XamlFlairResources />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

Seu aplicativo agora possui um conjunto global de animações padrão prontas para uso.

Se o Visual Studio Intellisense não funcionar ao usar <xf:XamlFlairResources /> , você pode tentar o seguinte: em vez disso:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < ResourceDictionary Source = " pack://application:,,,/XamlFlair.WPF;component/DefaultAnimations.xaml " />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

Propriedade TransformOn ( somente WPF )

Usando a propriedade TransformOn , você pode segmentar que tipo de RenderTransform para aplicar à sua animação. As opções disponíveis são Render e Layout . Quando nada é especificado, o vale padrão é Render . Aqui está um exemplo dos dois:

NOTA : Muito importante notar que LayoutTransform do WPF não suporta nenhuma TranslateTransform ; portanto, as animações traduzidas nunca funcionarão. Você pode ler mais sobre isso na seção de comentários aqui.

Rotações em perspectiva ( somente UWP )

É importante observar que, para aplicar uma rotação de perspectiva (também chamada de Swivel ) a um elemento de destino, é necessário que ele seja envolvido em um contêiner com as propriedades do layout aplicadas ao elemento de contêiner. Portanto, considere a seguinte rotação de perspectiva simples:

< xf : AnimationSettings x : Key = " PerspectiveVerticalRotation "
                      Kind = " SwivelYFrom "
                      SwivelY = " -45 " />

Em vez de animar o elemento como tal:

< Rectangle Fill = " RoyalBlue "
           Width = " 200 "
           Height = " 200 "
           HorizontalAlignment = " Center "
           VerticalAlignment = " Center "
           xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />

O elemento deve ser colocado em um recipiente para que a animação funcione corretamente:

< Border Width = " 200 "
        Height = " 200 "
        HorizontalAlignment = " Center "
        VerticalAlignment = " Center " >
    < Rectangle Fill = " RoyalBlue "
           xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />
</ Border >

Combinando animações

As animações podem ser combinadas e, como mencionado anteriormente, qualquer uma dessas animações combinadas que são comumente usadas devem ser colocadas no Global ResourceDictionary (ex: Animations.xaml ):

< ResourceDictionary xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
                    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
                    xmlns : xf = " using:XamlFlair " >
    .
    .
    .
    < xf : AnimationSettings x : Key = " FadeInAndSlideFromLeft "
                          Kind = " FadeFrom,TranslateXFrom "
                          Opacity = " 0 "
                          OffsetX = " {StaticResource NegativeOffset} " />

    < xf : AnimationSettings x : Key = " FadeInAndSlideFromTop "
                          Kind = " FadeFrom,TranslateYFrom "
                          Opacity = " 0 "
                          OffsetY = " {StaticResource NegativeOffset} " />

    < xf : AnimationSettings x : Key = " FadeInAndGrow "
                          Kind = " FadeFrom,ScaleXFrom,ScaleXFrom "
                          Opacity = " 0 "
                          ScaleX = " {StaticResource SmallScaleFactor} "
                          ScaleY = " {StaticResource SmallScaleFactor} " />

    < xf : AnimationSettings x : Key = " FadeInAndGrowHorizontally "
                          Kind = " FadeFrom,ScaleXFrom "
                          Opacity = " 0 "
                          ScaleX = " {StaticResource SmallScaleFactor} " />
    .
    .
    .
    </ ResourceDictionary >

Isso demonstra uma animação combinada de um FadeFrom e TranslateFrom :

Isso demonstra uma animação combinada de um FadeFrom , TranslateFrom e ScaleFrom :

Valores domésticos

As animações podem ter suas configurações substituídas diretamente no FrameworkElement . Isso é comumente feito para alterar os valores para atraso e duração, para que não prendemos demais o arquivo Animations.xaml com recursos repetidos. Para alcançar a substituição, use a extensão de marcação Animate emparelhada com a propriedade BasedOn :

< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} " />

Traduções relativas em eixos X e Y

Como os valores codificados para OffsetX e OffsetY podem ser limitantes (como nos casos ao lidar com o Windows redimensível), OffsetX e OffsetY suportam valores baseados em estrelas:

< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource SlideFromLeft}, OffsetX=1.5*} " />

Um valor baseado em estrela calculará o deslocamento com base no valor atual da ActualWidth e/ou ActualHeight (s) (s) (s) (s) (s) estrutura (s) da FrameworkElement , é importante que o elemento tenha executado seu evento Loaded . Se ActualWidth e/ou ActualHeight ainda não estiverem calculadas, o valor de deslocamento tentará se basear na Width e/ou Height .

Animações compostas

Uma animação composta é simplesmente uma animação em várias etapas usando a classe CompoundSettings . Cada animação interna é executada assim que a anterior concluir, portanto, são animações seqüenciais:

< xf : CompoundSettings x : Key = " Compound " >
    < xf : CompoundSettings .Sequence>
        < xf : AnimationSettings Kind = " ScaleXTo "
                              ScaleX = " 1.25 "
                              Duration = " 1250 " />
        < xf : AnimationSettings Kind = " ScaleXTo "
                              ScaleX = " 1 "
                              Duration = " 1250 " />
        < xf : AnimationSettings Kind = " RotateTo "
                              Rotation = " 360 "
                              Duration = " 1250 " />
    </ xf : CompoundSettings .Sequence>
</ xf : CompoundSettings >

NOTA : CompoundSettings suporta a propriedade Event , que é discutida em uma seção posterior.

Repetindo animações

Uma animação pode ser repetida usando as propriedades IterationBehavior e IterationCount (valores padrão da Count e 1 respectivamente).

O seguinte demonstra como executar uma animação apenas 5 vezes:

< Border xf:Animations.Primary= " {StaticResource FadeIn} "
        xf:Animations.IterationCount= " 5 " />

O seguinte demonstra como executar uma animação indefinidamente:

< Border xf:Animations.Primary= " {StaticResource FadeIn} "
        xf:Animations.IterationBehavior= " Forever " />

Observe também que também é possível repetir uma animação composta. Por exemplo, usando a animação composta (nomeado Progresso ) da seção anterior:

< Border xf:Animations.Primary= " {StaticResource Progress} "
        xf:Animations.IterationCount= " 5 " />

AVISO : Ao usar animações repetidas, você não pode definir uma animação Secondary no elemento.

É importante observar que todas as animações do Xamlflair são animações de "pontapé inicial" , em outras palavras, elas começam e apenas param quando concluem (ou quando o elemento associado descarrega), exceto repetindo animações. Uma animação repetida pode ser interrompida ao fornecer um valor false para a propriedade PrimaryBinding (as ligações são cobertas na próxima seção):

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " />

Quando um false é definido na ligação, a iteração atual da animação será executada até que termine e, em seguida, a animação repetida pare.

Eventos

Por padrão, todas as animações são executadas quando o elemento animado dispara seu evento Loaded . Esse comportamento pode ser substituído definindo a propriedade Event . Event pode ser qualquer evento exposto do elemento que está sendo animado. Por exemplo, para executar uma animação em um botão quando ele é clicado, o evento Click pode ser usado:

< Button xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=Click} " />

Alguns exemplos de eventos comuns que podem ser usados:

• Carregado ( valor padrão )
• Visibilidade ( aciona apenas quando visibilidade == visível )
• DataContextChanged ( gatilhos quando o valor não é nulo )
• Ponteiro
• Ponterexit
• Gotfocus
• LostFocus

Existem alguns casos especiais para tomar nota. O primeiro caso especial é o evento DataContextChanged . Ao usar o evento DataContextChanged , ele disparará quando o valor DataContext for alterado, exceto nos casos em que um valor null é definido, null é filtrado e não desencadeará uma animação.

Outro caso especial é Visibility . Embora não exista nenhum evento VisibilityChanged em uma FrameworkElement , a propriedade Visibility foi tratada como um evento quando o valor muda, pois pode ser útil para animar um elemento quando se tornar visível na interface do usuário. Se uma animação for acionada com Event=Visibility , ela será acionada apenas sempre que um valor de Visibile estiver definido.

Ligações

Um dos valores mais importantes para Event é None , que é um valor usado para cancelar qualquer gatilho de animação baseado em eventos. Ao especificar None , você precisará acionar manualmente suas animações usando as propriedades PrimaryBinding ou SecondaryBinding . Essas propriedades são do tipo bool e esperam um valor de True para executar a animação correspondente. A seguir, é apresentado um exemplo de desencadear uma animação baseada no IsChecked do controle da caixa de seleção:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " />

A animação acima só será executada quando o IsChecked for True . Se None não fosse especificado para Event , a animação será executada em Loaded e na ligação.

Ao trabalhar com PrimaryBinding e SecondaryBinding em conjunto (com base no mesmo valor booleano), pode ser mais limpo e mais simples de usar CombinedBinding . CombinedBinding simplesmente atua como PrimaryBinding e SecondaryBinding juntas. Em vez do seguinte:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} "
           xf:Animations.SecondaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox, Converter={StaticResource InverseBoolConverter}} "
           xf:Animations.Secondary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=None} "
           xf:Animations.StartWith= " {StaticResource FadeOut} " />

Você o usaria como tal:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.CombinedBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} "
           xf:Animations.Secondary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=None} "
           xf:Animations.StartWith= " {StaticResource FadeOut} " />

Ao usar CombinedBinding de que a combinação, ele economiza em ter que usar um conversor para o valor booleano inverso, que é tratado internamente.

Comandos de conclusão primária e secundária

Pode haver cenários em que você possa executar um ICommand quando uma animação é concluída. Nesse caso, existem duas propriedades: PrimaryCompletionCommand e SecondaryCompletionCommand .

No exemplo a seguir, o comando chamado MyCustomCommand será executado assim que a animação primária for concluída:

< TextBlock Text = " Example of a completion command "
           xf:Animations.Primary= " {StaticResource FadeInAndSlideFromBottom} "
           xf:Animations.PrimaryCompletionCommand= " {x:Bind MyCustomCommand} " />

Usando a propriedade StartWith

Haverá casos em que você precisará do seu elemento da interface do usuário para iniciar um estado específico, por exemplo, o elemento precisa ser encolhido antes que sua animação seja executada. Isso é alcançado usando a propriedade StartWith :

< Rectangle xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} "
           xf:Animations.StartWith= " {StaticResource ScaleFromBottom} " />

No exemplo acima, como o elemento está escalando a partir da parte inferior, mas com um atraso, precisamos iniciar a posição em escala , por isso usamos a propriedade StartWith para definir seu estado inicial. O que StartWith faz essencialmente é configurar os valores iniciais no elemento assim que ele carregar.

Usando a propriedade AllowOpacityReset ( somente WPF )

A documentação do .NET declara o seguinte:

Em alguns casos, pode parecer que você não pode alterar o valor de uma propriedade após a animação. ... Você deve impedir que a animação influencie a propriedade.

Pode haver casos em que você anime a opacidade, em que a animação da opacidade repentinamente redefine seu valor em vez de animar ou não se comportar como você pretende. Nos casos, pode ser necessário definir AllowOpacityReset = False ( o valor padrão do AllowOpacityReset é True ) para alcançar o comportamento pretendido:

< Image xf:Animations.Primary= " {StaticResource FadeInThenFadeOut} "
       xf:Animations.AllowOpacityReset= " False "
       Source = " /Assets/... " />

Usando a propriedade ClipToBounds ( apenas UWP e UNO )

Uma propriedade útil que existe no WPF, ClipToBounds é uma propriedade útil que existe no WPF, mas infelizmente não no UWP. Portanto, foi adicionado no Xamlflair devido à sua facilidade de uso e manuneidade. Para prender o conteúdo infantil nos limites do elemento que contém, basta definir ClipToBounds como True no elemento contendo:

< Border xf:Layout.ClipToBounds= " True " >
.
.
.
< Border >

Animações de depuração

Para depurar uma animação e entrar no código, use a propriedade EnableDebugging . A depuração é possível devido à inclusão da biblioteca Sourcelink. Certifique -se de fazer o seguinte:

< Rectangle xf:Animations.EnableDebugging= " InitializeElement "
           xf:Animations.Primary= " {StaticResource SlideFromLeft} " />

As tabelas a seguir explicam os valores de enumeração:

Valor da enumeração	Descrição
None	Valor padrão. Nenhuma depuração ocorrerá.
InitializeElement	Quebra o depurador na função InitializeElement de Xamlflair.
RunAnimation	Quebra o depurador na função RunAnimation de Xamlflair.

Animações de registro

A Biblioteca Xamlflair abstrai seu registro usando Microsoft.Extensions.Logging.Abstractions . Abaixo está um exemplo de registro usando o Serilog em um aplicativo UWP:

 public App ( )
{
    this . InitializeComponent ( ) ;
    .
    .
    .
    // Setup the Serilog logger
    Log . Logger = new LoggerConfiguration ( )
        . MinimumLevel . Debug ( )
        . WriteTo . Debug ( )
        . CreateLogger ( ) ;

    // Initalie the XamlFlair loggers using the LoggerFactory (with Serilog support)
	XamlFlair . Animations . InitializeLoggers ( new LoggerFactory ( ) . AddSerilog ( ) ) ;
}

Para produzir os valores de uma ou mais animações, basta definir Debug na propriedade EnableLogging no FrameworkElement de destino:

< Rectangle xf:Animations.EnableLogging= " Debug "
           xf:Animations.Primary= " {StaticResource SlideFromLeft} " />

Isso fornecerá a você a seguinte saída de console semelhante (difere um pouco para o WPF):

 Element = Windows.UI.Xaml.Controls.Button
Kind = FadeFrom, TranslateFrom
TargetProperty = Translation
Duration = 500
Delay = 0
Opacity = 0
OffsetX = 0
OffsetY = 50
OffsetZ = 0
ScaleX = 1
ScaleY = 1
ScaleZ = 1
Rotation = 0
Blur = 0
TransformCenterPoint = 0.5,0.5
Easing = Cubic
EasingMode = EaseOut

À medida que cada storyboard é executado, ele é mantido em uma lista interna até concluir (ou ser interrompida). Para produzir esta lista interna, adicione temporariamente o seguinte no código de inicialização do seu aplicativo:

 Animations . EnableActiveTimelinesLogging = LogLevel . Debug ;

Isso fornecerá a você a seguinte saída de console semelhante:

 ---------- ALL ACTIVE TIMELINES --------
Active timeline removed at 12:42:26:43222

Element = Button,  Key = d69f826a-1978-4a4e-b516-4a6b0469238b,  ElementGuid = 195d8c13-1dd7-4fef-a7f3-fc78bdab1cd7
    State = Running,  IsSequence = False,  IsIterating = False,  IterationBehavior = Count,  IterationCount = 0
------------------------------------

---------- ACTIVE TIMELINE --------
Guid d69f826a-1978-4a4e-b516-4a6b0469238b - Updated state to: Completed at 12:42:26:88616
------------------------------------

---------- ALL ACTIVE TIMELINES --------
Active timeline removed at 12:42:26:89614

NO ACTIVE TIMELINES!
------------------------------------

Atualmente, todo o log no Xamlflair mencionado acima é registrado em LogLevel.Debug

ListViewBase ( UWP e UNO ) e ListBox -Based ( WPF ) Animações

Para implementar corretamente as animações de itens nos itens da lista, não foi suficiente para simplesmente criar propriedades anexadas contra os controles ListViewBase (UWP) e ListBox (WPF). Em vez disso, foram criados controles herdados: AnimatedListView e AnimatedGridView para UWP e AnimatedListView e AnimatedListBox para WPF, todos disponíveis no espaço de nome XamlFlair.Controls :

Namespace uwp e uno:

xmlns:xfc="using:XamlFlair.Controls"

Namespace WPF:

xmlns:xfc="clr-namespace:XamlFlair.Controls;assembly=XamlFlair.WPF"

Animando itens nas listas é um pouco diferente de animar um elemento típico da interface do usuário. A principal razão para essa diferença é que o valor Event nas AnimationSettings correspondentes não pode ser alterado em relação ao seu valor padrão. Portanto, o seguinte é inválido :

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=Visibility} " />

Animações do item da lista, por padrão , anime com base no evento Loaded de cada item visível e também com base em uma atualização da propriedade ItemsSource do controle da lista. Para desativar esses comportamentos padrão, as duas propriedades a seguir podem ser usadas de forma independente:

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnLoad= " False "
                      ... />

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnItemsSourceChange= " False "
                      ... />

Por padrão, as animações dos itens têm um atraso de 25 milissegundos entre cada item. Este valor pode ser alterado usando a propriedade InterElementDelay :

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.InterElementDelay= " 50 "
                      ... />

Assim como PrimaryBinding e SecondaryBinding , as animações dos itens podem ser desencadeadas por uma ligação com o uso da propriedade ItemsBinding :

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnLoad= " False "
                      xf:Animations.ItemsBinding= " {Binding MyViewModelProperty} "
                      xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}} " />

AVISO ( SOMENTE UWP ) : Esteja ciente de que, se você tiver algum ItemContainerTransitions definido no AnimatedListView ou AnimatedGridView , eles serão limpos. Isso é feito para evitar animações de itens conflitantes.

Nota ( somente UNO ) : Para evitar os filmes em animações de itens, atualmente existe uma restrição: a animação Items deve conter um FadeFrom .