Xamarin Forms Başlangıç Ekranı ( Slider )

Merhaba arkadaşlar. Bu yazımda uygulama açıldığında, uygulamayı tanıtan bir ekran yapacağız. İnternette aramaya çalıştığınızda Welcome Slider olarak görebilirsiniz. Uygulamanızı kuran biri; uygulamayı ilk açtığında Normalde her şey için bir Nuget paket bulunur ama bunun için yoktu. Aslında yapımı biraz komplex. İçerisinde Absotute Layout, Carousel View ve bir kaç Grid ile bu sorunu çözeceğiz. Ben örnek olması 3 adet sayfadan oluşturacağım.

İlk olarak bir Absolute Layout atıyorum. Bu tüm ekranı kapsıyor. Ardından bu layout içerisine bir Carousel View atıyorum. Carousel View ile yana çevirerek farklı ekranlar gösterebiliyorum. Carousel View’ide tüm ekrana verdiğim için, sayfa geçişi görünümü sağlamış oluyorum. Siz isterseniz Data Template’in içerisini kendinize göre doldurabilirsiniz. Sayfanın en aşağısında ise 5 adet buton var. Bu butonlardan 2 tanesi ileri geri için. Diğer 3 buton ise hangi sayfada olduğumuzu gösterir.

Tasarım kısmını hallettikten sonra, işlev vermek gerekir. Bunun için cs tarafına geçmemiz lazım. Tabi ilk önce bir model oluşturmam gerekiyor. Bu model de ekranda neler olacağını göstermek için oluşturuyorum. Ben basit olması için ekranların arka planlarını değiştiricem ve ekrana sadece farklı yazılar koyacağım. Bir liste oluşturup 3 adet verimi bu listeye ekliyorum. Sonrasında Carousel View’imin içerisine bu listeye bind ediyorum.

İleri ve geri butonlarına işlev kazandırmam gerekiyor. Carousel View’in pozisyonunu kontrol ediyorum. Eğer listeden olandan fazla değilse Carousel View’in pozisyonunu bir arttırıyorum ve ekranın aşağı kısmını koyduğum yuvarlak butonların arka panlarını değiştirerek kaçıncı sayfada olduklarını kullanıcıya bildiriyorum. İleir ve geri butonları birbirine çok benzer.

Sonrasında ise Carousel View yana kaydırılınca yuvarlak butonların arka planlarını değiştirdikten sonra istediğimiz tasarımı elde edebiliriz.

Projenin örneği aşağıda ki gibidir.

Sorularınız olursa mail veya yorum atarak ulaşabilirsiniz. İyi çalışmalar.

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.