Xamarin.Forms’da Boş ListView için Uygun Tasarımı Gösterme

Mobil uygulama geliştirirken verilerin dinamik geldiği yerlerde boş bir sayfa göstermek yerine o bölüme bir tasarım koymak daha anlamlı olacaktır. Öbür türlü bir hata oluşmuş veya uygulama çalışmıyormuş gibi bir algı oluşabilir. Kullanıcının uygulamamızda boş sayfa görebileceği bazı durumlar vardır. Bunlar:

  1. Yeni üye olmuş kullanıcının uygulamaya ilk girişi (boş zaman tüneli)
  2. Veri yokluğu (boş mesaj kutusu)
  3. Hata (internet bağlantısının olmaması)

Böyle durumlar için yanlış anlaşılmalardan kaçınmak için kullanıcıya boş ekranı neden gördüğünü belirtmek gerekir. Bu makalede ListView içeren basit bir sayfada, verinin olmadığı durumlarda boş bir tasarım göstereceğiz. 

Öncelikle model olarak kullanmak üzere bir class oluşturalım:

Sonra da ListView ve EmptyView’imizi görüntüleyeceğimiz ContentPage’imizi oluşturalım:

Bu sayfada, veri gelmeme durumunda kullanmak için EmptyView isminde bir kontrol oluşturduk. EmptyView ve ListView’in gelen veri listesinin boş olma durumuna göre görünürlüğünün değişmesi için IsEmpty property’sini kullandık. EmptyView görünür olduğunda ListView’in görünmez olması için Converter sınıfını kullandık. Converter sınıfına bakacak olursak:

Burada IValueConverter interface’ini implement ettik. Bu interface’i implemente eden sınıflar değer dönüştürücü olarak adlandırılırlar. Bu interface’de iki tane method bulunur. Bunlar Convert ve ConvertBack metodlarıdır.

Convert metodu kaynaktan hedefe veri taşınırken çağrılır. value parametresi object ya da veri kaynağından gelen tiptir. Bu metottan dönen tip veri kaynağındakiyle aynı olmalıdır.

ConvertBack metodu hedeften kaynağa veri taşınırken çağrılır. Burada da Convert metodundaki işlemin tersi yapılır.

Projede oluşturduğumuz Converter sınıfımızda da gelen boolean değerinin tersi dönüyor.

EmptyView için ise bir ContentView oluşturduk ve sayfamızda çağırdık. Aşağıdaki gibi tanımladığımız ViewModel’i sayfamıza bağladık.

Sayfadaki veri miktarı değiştiğinde ve hiç veri gelmediğinde artık boş bir sayfa değil de kullanıcıyı bilgilendiren bir tasarım ortaya çıkıyor.

 

Projenin tamamını GitHub‘dan indirebilirsiniz.

Referans Link: https://docs.microsoft.com/tr-tr/xamarin/xamarin-forms/app-fundamentals/data-binding/converters

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir