Xamarin Forms ile basit bir uygulama yapıp hem IOS hem de Android için nasıl çalıştığına bir göz atacağız.

Visual Studio menüsünden File -> New -> Project seçtikten sonra gelen pencerede sol taraftan Cross-Platform seçip, sağ taraftan Cross Platform App (Xamarin) seçerek projeye bir isim verelim ve OK' e basalım.

OK' e bastıktan sonra template (şablon) seçim ekranı gelecektir. Bu ekranda Blank App, Xamarin.Forms ve Shared Project seçeneklerini seçelim/işaretleyelim.


Blank App; boş bir uygulama için seçim yaptığımızı belirtmektedir. Master Detail seçeneği ise; Master-Detail Navigation Pattern (master' da bir liste, listeden seçilen eleman için detay sayfası) ile oluşturulmuş bir proje şablonu sunmaktadır.

UI Technology bölmesindeki seçenekler, User Interface yani Kullanıcı Arayüzü' nün hangi teknoloji ile geliştirileceğini belirtmektedir.
Xamarin.Forms seçeneği; arayüzün Shared Project içerisinde XAML işaretleme dili ya da C# programlama dili ile 3 Platform' un her biri için yalnızca 1 sefer hazırlanmasını sağlamaktadır.
Native seçeneği; ise arayüzün Shared Project içerisinde değil de, her bir platform' un içerisinde ayrı ayrı hazırlanmasını sağlamaktadır. Bu durumda Shared Project içerisinde arayüz harici ortak kodları bulundurmuş olacaksınız.

Code Sharing Strategy (Kod Paylaşım Stratejisi) bölmesindeki seçenekler, ortak proje stratejisini belirtmektedir.
Shared Project seçeneği; platforma özel gereksinimleri #if compiler directive' i (derleyici direktifi) kullanarak yönetmeyi sağlar. MOBILE, IOS, TVOS, WATCHOS, ANDROID, ANDROID_{version number}, SILVERLIGHT gibi seçenekler sunar. Yani; IOS' ta şu, Android' de bu olsun gibi gereksinimler için #if ifadesi kullanılır.

Örnek;

#if __IOS__
     // iOS' a özel kod
#endif

#if __ANDROID__
     // Android' e özel kod
#endif

Portable Class Library (PCL) seçeneği ise; platforma özel gereksinimleri interface' ler kullanarak yönetmeyi sağlar. Ortak proje içerisinde interface yazılır ve platform projeleri içerisinde bu interface implemente edilerek DependencyService ile kullanılır.


OK' e bastıktan sonra aşağıdaki gibi bir solution açılacaktır.

En üstte ortak proje (shared project), sonrasında Android, IOS ve Universal Windows projeleri olmak üzere toplamda 4 adet proje göreceksiniz.

Her 3 platformda da ortak olarak çalışacak arayüzü tasarlamak için Shared Project içerisindeki MainPage.xaml' ı açalım. Bu sayfa içerisinde, üzerinde Welcome to Xamarin Forms! yazan bir Label var. Bu Label' ın Text özelliğini İlk Xamarin Forms Uygulamam şeklinde değiştirelim.


Windows işletim sistemli bir bilgisayarda geliştirme yapıyorsanız Solution Explorer' da Startup Project (başlangıç projesi) olarak Android projesi seçili gelecektir. F5 yaptığınız taktirde, -bilgisayarınıza Android bir cihaz bağlı değil ise- Android Emulator' ü açılacaktır. F5 yapmadan önce emulatorlerden, arm olmayan x86 tablet ya da x86 phone' u seçmenizi öneririm, arm' lerin açılış süreleri çok yavaştır.

F5 yaptıktan bir süre sonra Android emulator açılacak ve içerisinde Xamarin Forms ile geliştirdiğimiz Android uygulamamız çalışacaktır.


Uygulamayı IOS emulatoründe çalıştırmak için bir MAC bilgisayar (sanal ya da gerçek) ve IOS Developer Account (IOS Geliştirici Hesabı)' na ihtiyacınız bulunmaktadır. Sonraki makalelerde bunu detaylandıracağım.

Mini uygulamamıza ufak bir ilave yapalım.
Visual Studio' ya dönüp Stop Debugging yapıp MainPage.xaml içerisindeki kodu aşağıdaki şekilde güncelleyelim.

XAML içerisindeki kontrolleri, code-behind' da (C# kodunda) erişebilmek için x:Name ile isimlendiriyoruz. Bir Button ve bir Label ekledik, bunları bir StackLayout içerisinde aldık ve isimlendirdik. Ayrıca Button' un Clicked event' inde (olayında) Button1_OnClicked isimli metodun çağrılacağını belirttik.

XAML sayfasında ContentPage içerisinde aynı seviyede yalnızca 1 element olmalı, bu yüzden Button ve Label' ı StackLayout içerisinde aldık. Button ve Label, StackLayout içerisinde olmasalardı, uygulamayı çalıştırdığınız taktirde boş bir ekran görecektiniz.

Ardından MainPage.xaml.cs dosyasını açıp içerisindeki kodu aşağıdaki şekilde güncelleyelim.

Ekrandaki buton tıklandığında Label1' in Text' ine Merhaba Xamarin yazdırdık.
F5 yapıp emulatorde çalıştıralım. Ekranda Tıkla butonu görünecek, bu butona tıkladığınızda Merhaba Xamarin... yazısı ekranda görünecektir.

En basit seviyedeki ilk uygulamamız bu kadar.

Bu arada XAML üzerinde görsel tasarlarken buna önizleme yapabilmek için Xamarin.Forms Previewer kullanabilirsiniz. Bu pencereyi açmak için; Visual Studio menüsünden View -> Other Windows -> Xamarin.Forms Previewer seçmelisiniz.

Xamarin.Forms Previewer penceresinde, aşağıdaki gibi bir önizleme göreceksiniz.