.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