Scribd
Upload
29 views7 pages

MAUI Behavior AnimationBehavior

Uploaded by

Scribd
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
29 views7 pages

MAUI Behavior AnimationBehavior

Uploaded by

Scribd
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
AnimationBehavior Article + 02/03/2023 The AninationBehavior is a Behavior that provides the ability to animation any VisualElenent it is attached to. By default a TapGestureRecognizer is attached to the VisualElenent and triggers the associated animation when that recognizer detects that the user has tapped or clicked on the visualelement.. The aninationtype property is required to be set, possible options for this can be found at Animations. Syntax The following examples show how to add the AnimationBehavior to a Label and use the Fadeanimation to animate a change in opacity. XAML Including the XAML namespace In order to use the toolkit in XAML the following xmins needs to be added into your page or view: XAML xmlns:toolki ittp://schemas .microsoft .com/dotnet/222/maui/toolkit” Therefore the following: XAML Would be modified to include the xmins as follows: XAML C# The aninationgehavior can be used as follows in C#: ce class AnimationBehaviorBehaviorPage : ContentPage { public AnimationBehaviorBehaviorPage() t var label = new Label { ‘Click this Label” B var animationBehavior = new AnimationBehavior AnimationType = new Fadeanimation { Opacity = 0.5 + ub label .Behaviors .Add(animationBehavior) ; Content = label; C# Markup Our [Link]. Markup package provides a much more concise way to use this Behavior in C#. ce using CommunityToolkit .Maui Markup; class AnimationBehaviorBehaviorPage : ContentPage { public AnimationBehaviorBehaviorPage() { Content = new Label() sText("Click this label") -Behaviors(new AnimationSehavior { AnimationType = new FadeAnimation t Opacity = 0.5 + Ys + + The following screenshot shows the resulting AnimationBehavior on Android: Click this Label Additional examples Handling the user interaction The Aninationsehavior responds to taps and clicks by the user, it is possible to handle this interaction through the Conmand property on the behavior. The following example shows how to attach the AnimationBehavior to an Image and bind the Command property to a property on a view model. View XAML «image Source <[Link]> humbs -[Link]"> View model ce public IConmand ThumbsUpConmand { get; } public HyViewNiodel() { ThumbsUpCommand = new Command(() => OnThumbsUp()) ? public void OnThunbsup() { // perform the thumbs up logic. + Programmatically triggering the animation The Animation8ehavior provides the ability to trigger animations programmatically. The AnimateConmané can be executed to trigger the associated animation type. The following example shows how to add the AnimationBehavior to an Entry, AnimatedConmand and then execute the command from a view model View XAML. <[Link]> View model ce private string FirstName; public string FirstName { get => FirstName; set => SetProperty(ref firstName, value); + public ICommand TriggerAnimationConmand { get; set; } public void save() { i (string. TsNullOrempty (FirstNane)) { ‘[Link](null) ; returns > // save code. > O Note The AnimateConmand property is read-only and expects a binding mode of BindingMode. OneWay . This provides the ability to trigger an animation from within a view model. Triggering the animation from control events The AninationBehavior provides the same underlying features as the EventToCommandBehavior. Through the use of the EventNane property, the associated animation type can be triggered when an event matching the supplied name is raised. Using the following example animation implementation: ce class SampleScaleToAnimation : BaseAnimation { public double Scale { get; set; } public override Task Aninate(VisualElement view) => [Link](Scale, Length, Easing); + The following example shows how we can assign to AninationBehavior instances to an Entry; one to trigger an animation when the Focused event is raised, and another to trigger a different animation when the Unfocused event is raised. XAML <[Link]> Examples You can find an example of this behavior in action in the NET MAU! Community Toolkit Sample Application API You can find the source code for Aninationsehavior over on the NET MAU! Community Toolkit GitHub repository Useful links ‘* NET MAUI Community Toolkit Behaviors © Creating custom animations

You might also like