.NET MAUI ListView İçerisinde Animasyon Kullanımı

Merhabalar,

Bildiğiniz gibi .NET MAUI 5 ile beraber animasyon kullanımları geldi. Bu yazımda animasyonları ListView databinding içerisinde örneklendireceğim. Klasik ListView kullanımı ile başlayalım.

	<StackLayout  Orientation="Vertical" HorizontalOptions="FillAndExpand">
		<Button Text="Get Persons"
				Clicked="GetPersonsEvent"/>
		<ListView HasUnevenRows="True"
			      x:Name="lstPerson">
			<ListView.ItemTemplate>
				<DataTemplate>
					<ViewCell >
							<Label Text="{Binding Name}"
								   TextColor="Red"/>
					</ViewCell>
				</DataTemplate>
			</ListView.ItemTemplate>
		</ListView>
	</StackLayout>

Databind işlemine geçelim

	private IList<Person> _persons;
	public IList<Person> Persons
    {
        get
        {
			if (_persons == null)
				_persons = new ObservableCollection<Person>();
			return _persons;
        }
        set
        {
			_persons = value;
        }
    }
    private async void GetPersonsEvent(object sender, EventArgs e)
    {
        Persons.Clear();
        for (int i = 1; i <= 10; i++)
        {
            Persons.Add(new Person
            {
                Id = i,
                Name = $"RandomName-{i}"
            });
        }
    }
    public MainPage()
	{
		InitializeComponent();
        lstPerson.ItemsSource = Persons;
    }

Buton click olayı ile gerçekleşen data bind olayına animasyon ekleyelim. XAML içindeki ViewCell kısmını aşağıdaki gibi değiştirelim.

<ViewCell Appearing="ViewCell_Appearing">
						<Frame Opacity="0">
							<Label Text="{Binding Name}"
								   TextColor="Red"/>
						</Frame>
					</ViewCell>

ViewCell Appearing karşılığını .cs kısmına ekleyelim.

    private async void ViewCell_Appearing(object sender, EventArgs e)
    {
        await ((ViewCell)sender).View.FadeTo(1, 800, Easing.Linear);
    }

GetPersonsEvent kısmını aşağıdaki şekilde değiştirelim.

    private async void GetPersonsEvent(object sender, EventArgs e)
    {
        Persons.Clear();
        for (int i = 1; i <= 10; i++)
        {
            Persons.Add(new Person
            {
                Id = i,
                Name = $"RandomName-{i}"
            });
            await Task.Delay(500);
        }
    }

İlk olarak ViewCell Appearing event’ini ekliyoruz. Her eklenen row için Appearing event’i çalışacaktır.
await ((ViewCell)sender).View.FadeTo(1, 800, Easing.Linear);
Animasyonumuzun net anlaşılması için listemiz içerisine eklenen yeni objeler için ufak bir bekletme yapıyoruz.
await Task.Delay(500);

Yiğit

Xamarin Developer, Consultant & Architect. Community Leader and Director of Xamarin Türkiye

Post A Reply