728x90

ProgressBar 에 Animation 을 주어 막대가 움직이도록 하는 방법입니다.

MainPage.xaml

xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

<ProgressBar
    HorizontalOptions="FillAndExpand"
    ScaleY="{OnPlatform Android=2,
                        iOS=2}"
    VerticalOptions="CenterAndExpand">
    <ProgressBar.Behaviors>
        <mct:ProgressBarAnimationBehavior Length="250" Progress="{Binding Progress}" />
    </ProgressBar.Behaviors>
</ProgressBar>
<Button Command="{Binding ProgressAnimationCommand}" Text="Animate" />

MainViewModel.cs

using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;

using CommunityToolkit.Maui.Alerts;


namespace Maui.ToolKitMaui
{
    public partial class MainViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        
        double progress = 0;
        public double Progress
        {
            get
            {
                return this.progress;
            }
            set
            {
                this.progress = value;
                OnPropertyChanged();
            }
        }

        public ICommand ProgressAnimationCommand => new Command(() => OnProgressAnimationCommand());

        private void OnProgressAnimationCommand()
        {
            this.Progress = 0.8;
        }
    }
}

실행결과

[Source]
https://github.com/kei-soft/KJunBlog/tree/master/Maui.ToolKitMaui

728x90
Posted by kjun.kr
,