AnimationBehavior
Die AnimationBehavior ist eine Behavior, welche die Möglichkeit zum Animieren aller VisualElement-Elemente bietet, an die sie angefügt ist. Standardmäßig wird eine TapGestureRecognizer an die VisualElement angefügt und löst die zugeordnete Animation aus, wenn dieses Erkennungsmodul erkennt, dass der Benutzer auf die VisualElement getippt oder geklickt hat.
Die AnimationType-Eigenschaft muss festgelegt werden, mögliche Optionen hierfür finden Sie unter Animationen.
Wichtig
.NET MAUI Community Toolkit Behaviors legt den BindingContext eines Verhaltens nicht fest, da Verhalten über Stile freigegeben und auf mehrere Steuerelemente angewendet werden können. Weitere Informationen finden Sie unter .NET MAUI Behaviors.
Syntax
In den folgenden Beispielen wird gezeigt, wie Sie die AnimationBehavior zu einer Label hinzufügen und FadeAnimation verwenden, um eine Änderung der Deckkraft zu animieren.
XAML
Einbinden des XAML-Namespace
Um das Toolkit in XAML verwenden zu können, muss der folgende xmlns-Abschnitt zu Ihrer Seite oder Ansicht hinzugefügt werden:
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
Der folgende Abschnitt:
<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>
Würde dann geändert werden, um xmlns einzubinden:
<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>
Verwenden von 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#
AnimationBehavior kann wie folgt in C# verwendet werden:
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
Das Paket CommunityToolkit.Maui.Markup bietet eine viel präzisere Möglichkeit, dieses Behavior in C# zu verwenden.
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
}
});
}
}
Der folgende Screenshot zeigt das resultierende AnimationBehavior unter Android: 
Weitere Beispiele
Behandeln der Benutzerinteraktion
Die AnimationBehavior reagiert auf Tippen und Klicks durch den Benutzer. Es ist möglich, diese Interaktion über die Command-Eigenschaft für das Verhalten zu behandeln.
Das folgende Beispiel zeigt, wie Sie die AnimationBehavior an eine Image anfügen und die Command-Eigenschaft an eine Eigenschaft in einem Ansichtsmodell binden.
Ansicht
<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>
ViewModel-Element
public ICommand ThumbsUpCommand { get; }
public MyViewModel()
{
ThumbsUpCommand = new Command(() => OnThumbsUp())
}
public void OnThumbsUp()
{
// perform the thumbs up logic.
}
Programmgesteuertes Auslösen der Animation
Die AnimationBehavior bietet die Möglichkeit, Animationen programmgesteuert auszulösen. Die AnimateCommand kann ausgeführt werden, um den zugeordneten Animationstyp auszulösen.
Das folgende Beispiel zeigt, wie Sie die AnimationBehavior einem Entryhinzufügen, die AnimatedCommand binden und dann den Befehl aus einem Ansichtsmodell ausführen.
Ansicht
<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>
ViewModel-Element
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.
}
Hinweis
Die AnimateCommand-Eigenschaft ist schreibgeschützt und erwartet einen Bindungsmodus von BindingMode.OneWayToSource. Außerdem müssen Sie der Befehlseigenschaft im Ansichtsmodell (TriggerAnimationCommand im obigen Beispiel) keinen Wert zuweisen. Dies liegt daran, dass die Bindung ihrer Eigenschaft den Wert aus dem im AnimationBehavior erstellten Wert zuweist.
Dies bietet die Möglichkeit, eine Animation aus einem Ansichtsmodell auszulösen.
Auslösen der Animation aus Steuerelementereignissen
Die AnimationBehavior bietet die gleichen zugrunde liegenden Features wie die EventToCommandBehavior. Durch die Verwendung der EventName-Eigenschaft kann der zugeordnete Animationstyp ausgelöst werden, wenn ein Ereignis ausgelöst wird, das dem angegebenen Namen entspricht.
Verwenden der folgenden Beispielanimationsimplementierung:
class SampleScaleToAnimation : BaseAnimation
{
public double Scale { get; set; }
public override Task Animate(VisualElement view) => view.ScaleTo(Scale, Length, Easing);
}
Das folgende Beispiel zeigt, wie zwei AnimationBehavior-Instanzen einem Entry zugewiesen werden können. Eine, um eine Animation auszulösen, wenn das Ereignis Focused ausgelöst wird, und eine andere, um eine andere Animation auszulösen, wenn das Ereignis Unfocused ausgelöst wird.
<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>
Beispiele
Sie finden ein Beispiel für dieses Verhalten in Aktion in der Beispielanwendung für das .NET MAUI Community Toolkit.
API
Sie finden den Quellcode für AnimationBehavior über das GitHub-Repository für das .NET MAUI Community Toolkit.
Nützliche Links
.NET MAUI Community Toolkit