Xamarin.Forms Shared Project Örneğimiz

Merhaba Arkadaşlar,

Visual Studio ortamında Xamarin.Forms Shared Project kullanarak tek bir katman içerisinde 3 ayrı platforma uygulama yapacağız.

New Project > Visual C# > Cross-Platform > Blank App (Xamarin.Forms.Shared) seçerek projemizi açıyoruz.

 Projemiz açıldıktan sonra karşımıza ilk çıkan App.cs classımız hakkında biraz detay vermek istiyorum.

App.cs

 {

                Projemizi çalıştırdığımızda ilk tetiklenecek olan sınıftır.

                Droid projesini emulator yardımıyla çalıştırdığımızı düşünelim ve MainActivity class'inin içerisine bir göz gezdilerim.

                Droid projesi çalıştığında uygulamamızın hangi kodları çalıştıracağını burada söylüyoruz. "LoadApplication (new SharedProject.App ());" dikkat çekmek isterim.

                Bizim Shared Project katmanımızdaki App.cs dosyamızı işaret etmektedir. Yani App.cs içerisine nasıl bir kodlama yapıyorsak IOS, Android ve WinPhone projelerimizde bu kodlar çalışacaktır.

 }

Not : Shared projemize Views ve Models adında 2 adet klasör oluşturuyoruz.

Views klasörüne sağ tıklayarak Add > New Item > Class seçerek Start.cs classımızı oluşturalım.

 

Start class'ımızı MasterDetailPage class'ından türetiyoruz. Aklınıza şu soruların geldiğini tahmin ediyorum.

 

MasterDetailPage nedir ve neden Start class'ımızı MasterDetailPage'den türetiyoruz. Bunları hızlı bir şekilde açıklığa kavuşturalım.

Uygulamamıza oluşturacağımız yapı itibariyle menü sayfamızın her sayfaya girildiğinde sol taraftan çıkmasını istediğimiz için master olarak belirlememiz gerekmektedir.

İçerik sayfamız değişken bir sayfa olacağı için detail olarak belirleyeceğiz. İşte Start.cs classımıza da bu yüzden ihtiyaç duyuyoruz ve uygulamamızın master ve detail sayfalarını belirleyeceği main sayfasını MasterDetailPage class'ından türeterek oluşturuyoruz.

Not : MasterDetailPage detaylı ayrıntı : https://developer.xamarin.com/api/type/Xamarin.Forms.MasterDetailPage/

Start.cs uygulamamızın Main sayfası olacaktır ve uygulamamızda açılacak olan menü ve diğer sayfalar Start.cs classımızdan oluşacaktır.

Views klasörümüze sağ tıklayarak > Add > New Item > Cross-Platform > Forms.Xaml Page Menu.cs ve Detail.cs ekliyoruz ve App.cs classımıza dönüyoruz.

 

 

Kodlarımızı okuyalım;

Hatırlatma : App.cs, uygulamamızın ortak kodlarının yazılacağı ve sayfalarının belirleneceği sınıf olduğunu yazımızın başında söylemiştik.

MasterDetailPage class'ından türettiğimiz Start class'ım benim uygulamamın main class'ıdır.

Main class'ımın Master sayfası Menu sayfamdır ve uygulamamın detay sayfası benim Detail sayfamdır.

Benim uygulamamın main sayfası ise applicationMainPage (Start.cs) 'dir.

SharedProject.WinPhone projesine sağ tıklayarak "Set as StartUp Project" diyoruz ve uygulamamızı çalıştırıyoruz.

Uygulamamızı çalıştırdığımızda, "Title propert must be set on Master page" hatasını alacağız. Uygulamamız master sayfasının başlığının belirlenmek zorunda olduğunu söylüyor.

 

 

Menu sayfamıza gidip Title özelliğini belirliyoruz ve Detail.xaml sayfamızdaki Label'ın text özelliğini değiştirip uygulamamızı çalıştırıyoruz.

 

ViewModel klasörümüze sağ tıklıyoruz ve MenuModel adında bir class ekliyoruz ve 2 adet property tanımlıyoruz (int Id, string Title).

 

 

 Menu.cs içerisinde modelimizi dolduruyoruz. (Önümüzdeki makalelerde veritabanı ve web servis olarak kullanacağız.)

Menu.xaml içerisine ListView atarak menü itemlarımızın listelenmesini sağlayacağız.

Burda dikkat edilmesi gereken nokta Label'ın text özelliği "{Binding Title}" hatırlayadığınız gibi MenuModel'imizde Title propertysine karşılık gelecektir. Yaptığınız örnek geliştirmelerde buna dikkat edilmesi gerekmektedir. Bir model üzerinden bind ettiğiniz bir item model property adı ile aynı olmalıdır!ListView içerisinde x:Name="lstMenu" ile oluşturmuş olduğumuz ListView item'ına ID belirlemiş olduk.

Oluşturduğumuz modelimizin hemen altına oluşturduğumuz ListView item'ının ItemSource özelliğinie modelimizi set ediyoruz. ListView senin tekrar ederek göstereceğin model benim MenuModel'im demiş oluyoruz ve uygulamamızı çalıştırıyoruz.

Menu sayfasından diğer sayfalara geçişleri diğer makalemizde ayrıntılı bir şekilde inceleyeceğiz.

 

Detail.xaml sayfamız’a bir adet button ve bir adet label atıyoruz ve butonumuzun Clicked property’sine cs tarafından hangi metodu tetikleyeceğini belirtiyoruz. Clicked="btnClicked"

 

Detail sayfamızın cs tarafına geçtiğimizde btnClicked event’ini yazıp içerisine yapacağımız işlemleri kodladık.

Uygulamamızı çalıştırıp butonumuza tıklıyoruz ve yaptığımız tüm kodlamanın sorunsuz çalıştığını görüyoruz!

Beraber yazdığımız tek kod ve multi-platform shared project örneğimizin sonuna geldik.

Umarım sizin için de keyifli bir uygulama olmuştur.

Kaynak kodlara github üzerinden ulaşabilirsiniz. xamarintr-git

Tek kod ile aynı anda android ortamında çalıştırdığımız videoyu izleyebilirsiniz.

 

 

Sevdiğiniz dili kullanın, tek kod yazın, her yerde çalışan mobil çözümler üretin.

Görüşmek üzere..
Yiğit

Xamarin Developer, Consultant & Architect. Community Leader and Director of Xamarin Türkiye

15 Comments

You can post comments in this post.


  • Merhaba; Ben bir shared uygulaması oluşturdum ve .xaml dosyası ekledim fakat bunu designer ekranı olarak açamıyorum, direk xml kodları olarak çıkıyor karşıma. Acaba sürükle bırak yapmayı sağlayan designer ekranı olarak açabilir miyiz bu xaml dosyasını? Ayrıca Shared Native ve Xamarin.Forms Shared var seçeneklerde. Bunların arasındaki fark nedir? Teşekkürler!

    USER 8 sene ago Reply


    • Merhaba,

      İlk sorun için; Şu an bulunan Xamarin.Forms shared projelerde .xaml designer desteği bulunmamakta fakat böyle bir designer desteği ileri dönemlerde bekliyoruz. (Bu konu ile ilgili bir açıklama yapılmadı sadece düşüncelerim.)

      Native seçeneğinde sadece Android veya IOS uygulama çıkartabiliyorsun. Aradığın designer kısmını burada bulabilirsin. Çünkü Native projelerde (WinPhone, Android ve IOS) .xaml designer desteği bulunmakta. Xamarin.Forms Shared project ise sadece shared katmanında kod geliştirmelerini yaparak 3 ayrı platform’a uygulama geliştirme imkanı sağlıyor.

      Yorumun için teşekkürler. Aklına taklıan sorular olursa buradan iletebilirsin. Örnek uygulamalara ve Xamarin hakkında detaylı bilgilere http://www.xamarintr.com üzerinde de ulaşabilirsin. Burada yazdığımız örnek uygulamalara ulaşığ kaynak kodlarını inceleyebilirsin.

      Yiğit 8 sene ago Reply


      • Cevabınız için teşekkürler. Peki cross platform bir uygulama geliştirmek için siz hangisini önerirsiniz (Xamarin.Native Shared – Portable, Xamarin.Forms Shared – Portable)?
        Diğer bir sorum ise Xamarin.Forms Shared projesi oluşturdum ve xaml dosyasının içerisinde checkbox koyayım dedim ama button vs. kontroller varken bu checkbox yok. İnternetten araştırdım ve xaml’de checkbox olmadığını söylemişler. Acaba Xamarin’de bu tür bileşen eksiği mi var? Eğer checkbox bulunuyorsa nasıl koyabilirim? Diğer sorum ise GroupBox nesnesi Xamarin’de var mı? Teşekkürler!

        USER 8 sene ago Reply


        • Merhaba,
          1. Sorunuz için: PCL mi yoksa Shared project mi diye soracak olursan genelde bu yapacağınız proje detayına göre değişmekte. PCL vs Shared bu linkten farklılıkları okuyabilirsiniz.
          2. Sorunuz için; Xamarin için değil tüm mobile dünya için geçerli bir durum. Evet checkbox yok fakat bunun yerine Switch kavramı var.

          Xamarin.Forms Elementleri – Xamarin Elementleri – Digram – Xamarin.Forms Kontrolleri ile çalışmak Bu başlıklara göz atmanı önereceğim.

          3. Sorunuz için; Sanırım Windows Forms ortamındaki GroupBox kontrolünden bahsediyorsunuz. GroupBox bu class’ı incelmenizi tavsiye edebilirim. Fakat genelde böyle istekler Xamarin.Forms tarafında Grid ile karşılanıyor. (Ben de Grid kullanıyorum.)

          Ek olarak XAML aşinalığı kazanana kadar hazır toollara bakmak işini kolaylaştırabilir diye düşünüyorum.

          1. Telerik

          2. Devexpress

          Yorumun için teşekkür ederim.

          Yiğit 8 sene ago Reply


  • Tekrardan merhaba;
    Ben birşey daha merak ettim. Acaba Xamarin Shared proje oluşturarak veri kullanımını kontrol edebilir miyiz? Yani mesela cihazda hangi uygulama ne kadar internet verisi kullanıyor diye. Ve bunları kısıtlama imkanımız var mı Xamarin’de? Kısaca internet trafiğini kontrol edebilir miyiz? Teşekkürler!

    USER 8 sene ago Reply


  • Merhaba,
    Sadece Xamarin.Forms degil diger tum Xamarin projelerinde veri kullanimini kontrol edebilirsin ve kisitlama getirebilirsin.
    Mesela internet baglantisini kontrol edip uygulamanin farkli davranmasi ve belirli bir internet kullanimindan sonra uygulamada bazi yerlerin kapanmasi gibi..

    Yiğit 8 sene ago Reply


  • Hocam Merhaba;
    Ben visual studio 2015 enterprise sürüm kullanıyorum. Xamarin ve öyküncü kurulumlarınızı videolarda anlattığınız şekilde yaptım fakat ben new project kısımında C# cross platform altında sadece cross platform app(xamarin.forms native), class library(xamarin.forms) ve UI test app (xamarin.uitest | cross platform) görüyorum. Xamarin.forms portable ve xamarin.forms shared şeklinde proje oluşturamıyorum nedeni nedir?
    Teşekkürler…

    Bugra Kireccioglu 7 sene ago Reply


    • Selam, aslinda değişen bir şey yok. Xamarin güncel versiyonu ile proje açma yapıları değişti. Video üzerinden izleyebilirsin.

      Yiğit 7 sene ago Reply


  • Selamlar,
    Mesela shared project içinde System.net altındaki IPAddress e ulaşabiliyorum ama portable de ulaşamuyorum portable projede IPAddress kullanmam gerekiyor bunu portable proje içide nasıl kullanabilirim. Teşekkürlrr

    Barkın Arın 7 sene ago Reply


    • Selam,
      2 yolun var. 1. DependencyService ile Traditional tarafta halledebilirsin. 2. projene bir shared katman eklersin onu portable tarafa ref. vererek yapabilirsin.

      Yiğit 7 sene ago Reply


      • Teşekkür ederim ilginize, deneyeceğim

        Barkın Arın 7 sene ago Reply


  • Hocam Merhaba, Cross Platform seçeneği new item dediğimde bende çıkmıyor yerine Xamarin.Forms öğeleri geliyor. VS2017 ide sını kullanıyorum, yardımlarınızı rica ederim.

    Yasin 6 sene ago Reply


    • Selam,
      Xamarin.Forms ve Xamarin.Forms nuget updatelerini yaptigindan emin olmani oneririm.
      Eger update eksik ise, tamamlaman gerekecektir.

      Yiğit 6 sene ago Reply


  • Hocam Merhaba;
    Ben visual studio 2017 kullanıyorum ve kurulum videosu dahil olmak üzere videolarınıza baktım yukarıda bir arkadaş daha benimle aynı sorunu yaşamış.
    Android cross platform uygulamasıyla, android ios uygulama geliştirmek istiyorum fakat bir sorunla karşılaşıyorum. cross platform sekmesini seçtiğim zaman sizdeki alt başlıklar gelmiyor bende sadece UI test app (xamarin.uitest | cross platform), cross platform app(xamarin.forms native) bu alt sekmeler mevcut bunlardan biri ile başladığım zaman ise uygulama dosyaları yüklendikten ve açıldıktan sonra bütün kod satırlarında hata alıyorum ve uygulamamı emulatör üzerinde çalıştıramıyorum. yardımcı olursanız çok sevinirim.
    Teşekkürler.

    mehmet özkan 6 sene ago Reply


  • Yigit her zamanki gibi süper bir aciklama olmus. Net ve anlasilir bilgiler. Eline saglik.

    Saygilarimla
    Enis Ciftci

    Enis Ciftci 5 sene ago Reply


Post A Reply