Home / How To / SyncFusion AutoComplete 3

SyncFusion AutoComplete 3

Syncfusion AutoComplete DataTemplate Kullanımı

Merhaba arkadaşlar bu yazımda AutoComplete için template kavramını göreceğiz. Hemen hemen bir çok komponentte mevcut olan bu template kavramı , bize sıradan görünüşün aksine kendimizin özelleştirdiği bir görünüm sunuyor. Şimdi mevcut görüntümüzü template’e çevirelim.

Öncelikle kullanacağımız platformun Resources klasörü altına resim atalım. Ben bu template olayında şöyle bir senaryo düşündüm. Kişi eğer şirkette ise arama yaparken online , şirket dışında ise arama yaparken offline göstersin. Bu yüzden 2 adet resim attım. Öncelikle template kavramını öğrenelim ve daha sonra koşullu olarak bunu seçmeyi öğreneceğiz.

Xaml taraftada yapmamız gereken sadece bu kadardır. Hiyerarşi ItemTemplate -> DataTemplate -> Elementler şeklinde gidiyor. Şimdi Çıktımızı görelim.
Resimdeki gibi artık listelenen verilerin kenarında bir resim olacaktır. Bu resim şuanda sadece online olarak görünüyor. Fakat birazdan koşullandıracağız ve istediğimiz duruma göre resim göstereceğiz.

Şimdi yapacağımız işlemler sırasıyla şu olacak.
1 – > Model Düzenlenecek
2 – > Template Selector yazılacak
3 – > Xaml Tarafta düzenleme yapılacak.

Burada modelimize IsWorking şeklinde bir değer daha tanımladık ve bundan sonra artık çalışanların iş yerindemi yoksa iş dışındamı olduğunu görebileceğiz. Bu değişikliğe istinaden ViewModel imizdede gerekli alanlara örnek veriler tanımlanmıştır. CustomerName kafanızı karıştırmasın arkadaşlar CustomerName yerine PersonalName de yazabilirdik maksat işleyişi anlamak. Şimdi ise template selector yazalım.
Burada CustomerVModel Sınıfımızın altında yeni bir sınıf tanımlıyoruz ve DataTemplateSelector dan kalıtım aldırıyoruz. Online ve Offline için iki adet property tanımlayarak daha sonra OnSelectTemplate eventinde koşullara göre geriye değer döndürüyoruz. Şimdi ise Xaml tarafındaki işlemlerimizi yapalım.
Xaml tarafta ContentPage in resource kısmında koşula göre templatemizi ayarlıyoruz. Online durumunda görünecek içerik ve Offline durumda görünecek içerik şeklinde iki tane tanımlama yapıyoruz. Şimdi bunun nasıl kullanılacağına bakalım.
Resimdeki gibi bir tanımlama yaptıktan sonra Visual Studio size otomatik olarak referans ekleme uyarısı verecektir ona tıklayarak eklemesini sağlayın. Eğer otomatik olarka bu uyarı çıkmaz ise bunu manuel olarak aşağıdaki resimdeki gibi yapabilirsiniz.
Bizim Sınıfımız Views altında olduğundan dolayı tanımlamada Views Klasörünü belirttik. Şimdi dilerseniz sonuca bir bakalım.

Çıktılarımız bu şekilde olacaktır. Çalışan için online çalışmayan için ise offline resimler gösterdik. AutoComplete ile ilgili bir diğer konuda AutoCompleteMode dur bununda 3 modu vardır bunlar şunlardır.

  • Suggest – Önerilen arama değerini listeler.
  • Append – Önerilen arama değerini listelemez ama üzerini vurgular.
  • SuggestAppend – Bu mod ise her ikisinide kapsamaktadır.

Şimdi bunların nasıl kullanılacağına ve örneklerine bakalım.

Resimdeki gibi sadece AutoCompleteMode properysine tanımlama yapmak yeterli olacaktır. Şimdi ise sonuçlara bakalım.
Sugest
Append
SuggestAppend

Bir başka yazıda görüşmek dileği ile. AutoComplete Mode un bir çok özelliği daha var ve bunların tamamını inceleyeceğiz.

Proje İndirme Linki

User Rating: Be the first one !

About admin

Check Also

Syncfusion Auto Complete 5

Bu videomda autocomplete in geri kalan özelliklerini inceledik. Filtering , Header , Footer , LoadMore …

Bir cevap yazın

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