AnimationBehavior
AnimationBehavior è un oggetto Behavior che consente di animare qualsiasi VisualElement elemento a cui è collegato. Per impostazione predefinita, un TapGestureRecognizer oggetto è associato a VisualElement e attiva l'animazione associata quando tale riconoscitore rileva che l'utente ha toccato o fatto clic su VisualElement.
La AnimationType proprietà è necessaria per essere impostata, le opzioni possibili per questa opzione sono disponibili in Animazioni.
Importante
I comportamenti di .NET MAUI Community Toolkit non impostano l'oggetto BindingContext di un comportamento, perché i comportamenti possono essere condivisi e applicati a più controlli tramite stili. Per altre informazioni, vedere Comportamenti MAUI di .NET
Sintassi
Negli esempi seguenti viene illustrato come aggiungere a AnimationBehavior e Label usare per FadeAnimation animare una modifica dell'opacità.
XAML
Inclusione dello spazio dei nomi XAML
Per usare il toolkit in XAML, è necessario aggiungere le informazioni seguenti xmlns nella pagina o nella visualizzazione:
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
Di conseguenza:
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
</ContentPage>
Verrà modificato in modo da includere l'oggetto xmlns come indicato di seguito:
<ContentPage
x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
</ContentPage>
Uso di AnimationBehavior
<ContentPage
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="CommunityToolkit.Maui.Sample.Pages.Behaviors.AnimationBehaviorPage"
x:Name="Page">
<Label Text="Click this Label">
<Label.Behaviors>
<toolkit:AnimationBehavior>
<toolkit:AnimationBehavior.AnimationType>
<toolkit:FadeAnimation Opacity="0.5" />
</toolkit:AnimationBehavior.AnimationType>
</toolkit:AnimationBehavior>
</Label.Behaviors>
</Label>
</ContentPage>
C#
Può AnimationBehavior essere usato come indicato di seguito in C#:
class AnimationBehaviorPage : ContentPage
{
public AnimationBehaviorPage()
{
var label = new Label
{
Text = "Click this Label"
};
var animationBehavior = new AnimationBehavior
{
AnimationType = new FadeAnimation
{
Opacity = 0.5
}
};
label.Behaviors.Add(animationBehavior);
Content = label;
}
}
C# Markup
Il CommunityToolkit.Maui.Markup pacchetto offre un modo molto più conciso per usarlo Behavior in C#.
using CommunityToolkit.Maui.Markup;
class AnimationBehaviorPage : ContentPage
{
public AnimationBehaviorPage()
{
Content = new Label()
.Text("Click this label")
.Behaviors(new AnimationBehavior
{
AnimationType = new FadeAnimation
{
Opacity = 0.5
}
});
}
}
Lo screenshot seguente mostra l'oggetto AnimationBehavior risultante in Android: 
Esempi aggiuntivi
Gestione dell'interazione dell'utente
Risponde AnimationBehavior ai tocco e ai clic dell'utente, è possibile gestire questa interazione tramite la Command proprietà sul comportamento.
Nell'esempio seguente viene illustrato come associare l'oggetto AnimationBehavior a un Image oggetto e associare la Command proprietà a una proprietà in un modello di visualizzazione.
Visualizza
<Image Source="thumbs-up.png" x:Name="ThumbsUpImage">
<Image.Behaviors>
<toolkit:AnimationBehavior
Command="{Binding ThumbsUpCommand}"
BindingContext="{Binding Path=BindingContext, Source={x:Reference ThumbsUpImage}, x:DataType=Image}">
<toolkit:AnimationBehavior.AnimationType>
<toolkit:FadeAnimation />
</toolkit:AnimationBehavior.AnimationType>
</toolkit:AnimationBehavior>
</Image.Behaviors>
</Image>
Modello di visualizzazione
public ICommand ThumbsUpCommand { get; }
public MyViewModel()
{
ThumbsUpCommand = new Command(() => OnThumbsUp())
}
public void OnThumbsUp()
{
// perform the thumbs up logic.
}
Attivazione dell'animazione a livello di codice
AnimationBehavior offre la possibilità di attivare animazioni a livello di codice. Può AnimateCommand essere eseguito per attivare il tipo di animazione associato.
Nell'esempio seguente viene illustrato come aggiungere AnimationBehavior a un Entryoggetto , associare AnimatedCommand e quindi eseguire il comando da un modello di visualizzazione.
Visualizza
<Entry Placeholder="First name (Required)"
Text="{Binding FirstName}"
x:Name="FirstNameEntry">
<Entry.Behaviors>
<toolkit:AnimationBehavior
AnimateCommand="{Binding TriggerAnimationCommand}"
BindingContext="{Binding Path=BindingContext, Source={x:Reference FirstNameEntry}, x:DataType=Entry}">
<toolkit:AnimationBehavior.AnimationType>
<toolkit:FadeAnimation />
</toolkit:AnimationBehavior.AnimationType>
</toolkit:AnimationBehavior>
</Entry.Behaviors>
</Entry>
Modello di visualizzazione
private string firstName;
public string FirstName
{
get => firstName;
set => SetProperty(ref firstName, value);
}
public ICommand TriggerAnimationCommand { get; set; }
public void Save()
{
if (string.IsNullOrEmpty(FirstName))
{
TriggerAnimationCommand.Execute(CancellationToken.None);
return;
}
// save code.
}
Nota
La AnimateCommand proprietà è di sola lettura e prevede una modalità di associazione di BindingMode.OneWayToSource. Non è inoltre necessario assegnare un valore alla proprietà del comando nel modello di visualizzazione (TriggerAnimationCommand nell'esempio precedente), perché l'associazione assegnerà il valore alla proprietà dal valore creato in AnimationBehavior.
In questo modo è possibile attivare un'animazione dall'interno di un modello di visualizzazione.
Attivazione dell'animazione dagli eventi di controllo
AnimationBehavior fornisce le stesse funzionalità sottostanti di EventToCommandBehavior. Tramite l'uso della EventName proprietà , il tipo di animazione associato può essere attivato quando viene generato un evento corrispondente al nome fornito.
Usando l'implementazione dell'animazione di esempio seguente:
class SampleScaleToAnimation : BaseAnimation
{
public double Scale { get; set; }
public override Task Animate(VisualElement view) => view.ScaleTo(Scale, Length, Easing);
}
L'esempio seguente mostra come assegnare due AnimationBehavior istanze a un Entryoggetto , uno per attivare un'animazione quando viene generato l'evento Focus e un altro per attivare un'animazione diversa quando viene generato l'evento Unfocused .
<Entry Placeholder="Animate on Focused and Unfocused">
<Entry.Behaviors>
<toolkit:AnimationBehavior EventName="Focused">
<toolkit:AnimationBehavior.AnimationType>
<behaviorPages:SampleScaleToAnimation
Easing="{x:Static Easing.Linear}"
Length="100"
Scale="1.05"/>
</toolkit:AnimationBehavior.AnimationType>
</toolkit:AnimationBehavior>
<toolkit:AnimationBehavior EventName="Unfocused">
<toolkit:AnimationBehavior.AnimationType>
<behaviorPages:SampleScaleToAnimation
Easing="{x:Static Easing.Linear}"
Length="100"
Scale="1"/>
</toolkit:AnimationBehavior.AnimationType>
</toolkit:AnimationBehavior>
</Entry.Behaviors>
</Entry>
Esempi
È possibile trovare un esempio di questo comportamento in azione nell'applicazione di esempio .NET MAUI Community Toolkit.
API
È possibile trovare il codice sorgente per AnimationBehavior over nel repository GitHub di .NET MAUI Community Toolkit.
Collegamenti utili
.NET MAUI Community Toolkit