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);
Post A Reply