Anasayfa / Yazılım 360 Eğitimleri / Xamarin ile Kod Yazma

Xamarin ile Kod Yazma

FORMS CONTENT PAGE XAML

xamarinkod

Şekil 6.1.3.1

Bu ContentPage i oluşturmak istersek bizim için MVVM ve Xaml tasarımı otomatik ve bir örnek şablonu şeklinde oluşacaktır. MVVM i Contentpage in. cs kısmında otomatik şekilde yazıyor ve buralarda değişiklik yaparak sayfayı kullanabiliyoruz.

Aşağıdaki Xaml kodları sayfayı ilk oluşturduğumuzda bizi karşılayacaktır.

kodlama

Şekil 6.1.3.2 Şablon Template

kodlama

Şekil 6.1.2: Sayfa ile gelen hazır kodlar Class kısmı

Page1ViewModel olarak MVVM (INotifyPropertyChanged) class ı oluşturulmuş şekilde karşımıza geldi bu class ı page imizin BindingContext ine set ediyoruz.

kodlama2

Xaml ve .cs kısımlarını otomatik oluşturduğunu söylemiştik şimdide hiç kod yazmadan Android ve iOS çıktılarına bakalım.

App.cs deki MainPage property sine yeni eklediğimiz Xaml Page i set ediyoruz.

kodlama3

Şekil 6.1.3.5

6.1.4 CONTENTPAGE İLE ÖRNEK UYGULAMA

Bir adet xamarin portable class library projesi oluşturuyoruz ve ardından açılan proje ile gelen MainPage.xaml dosyasına xaml kodları yazacağız ve yazılan bu xaml kodları Class Page açılarak ta yazılacak.

Örneğimizde 1 adet login page örneği yapacağız kullanıcı adı ve şifre isteyecek ve doğru ise mesaj verecek.

xamarin2

Şekil 6.4.1.4 Cross-Platform

Yukarıdaki resimde de görüldüğü üzere Cross-Platform sekmesinden Cros Platform app projesi açılır ve ardından Portable Projemi yoksa Shared Project mi diye belirlememiz gerekmektedir. Biz Portable Class Liblary (PCL) projesi üzerinden örneğimizi gerçekleştireceğiz.

kodlama5

Şekil 6.1.4.2 Portable Class Library Project Type

İki Adet Sayfa Ekliyoruz birisi boş bir Xaml page diğeri Class şeklinde olacak.

kodlama6

Şekil 6.1.4.3 : İki adet page açılır sayfaların kodları aşağıdaki gibidir sırası ile önce Xaml kodlarını göreceksiniz ardından Class page kodlarını göreceksiniz.

Xaml Page kodları

<ContentPage xmlns=”http://xamarin.com/schemas/2014/forms”

xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”

xmlns:local=”clr-namespace:SayfaYapilari”

x:Class=”SayfaYapilari.MainPage”

Title=”ContentPage”>

<ContentPage.Content>

<StackLayout Orientation=”Vertical” VerticalOptions=”Center”>

<Entry x:Name=”txtKullaniciAdi”

Placeholder=”Name” PlaceholderColor=”Red”

TextColor=”Black”></Entry>

<Entry x:Name=”txtSifre” Placeholder=”Password”

PlaceholderColor=”Red”

TextColor=”Black”></Entry>

<Button Text=”LOGIN” BackgroundColor=”Blue”

TextColor=”White”

Clicked=”onLogin”></Button>

Kullanıcı Adı ve Şifreye göre buttona basıldığında bir mesaj verdireceğiz bunun için buttonun click eventini tetikliyoruz ve arka tarafta bu eventi karşılamamız ve kullanmamız gerekli.

</StackLayout>

</ContentPage.Content>

</ContentPage>

Button Clicked Event

Sayfanın .cs tarafına geçiyoruz ve event e verdiğimiz isim ile bir click eventi yazıyoruz aşağıdaki gibi.

private void onLogin(object sender,EventArgs e)

{

string KullaniciAdi = txtKullaniciAdi.Text;

string Sifre = txtSifre.Text;

if (KullaniciAdi == “admin” && Sifre == “123”)

DisplayAlert(“Login Başarılı”, “Hoşgeldiniz.”, “OK”);

else

DisplayAlert(“Login Başarısız”, “Yanlış Kullanıvı Bilgileri.”, “OK”);

}

Yukarıdaki işlemler Xaml Page içindir şimdi ise yukarıda xaml ile tasarladığımız yapıyı birde Class page kullanarak tasarlayacağız kodlar aşağıdaki gibidir.

 

Class Page Kodları

Yukarıdaki Xaml Page ve Class Page i yazdıktan sonra App.cs Class ına başlatılırken açılacak page bilgisini set etmem gerekli. Sırasi ile önce Xaml ardından Class Page i mainpage e set ederek denemelerinizi yapabilirsiniz.

public class Page2 : ContentPage

{

Entry txtSifre;

Entry txtKullaniciAdi;

public Page2()

{

this.Title = “ContentPage”;

Button btnLogin = new Button

{

Text = “LOGIN”,

BackgroundColor = Color.Blue,

TextColor = Color.White

};

btnLogin.Clicked += BtnLogin_Clicked;

txtKullaniciAdi = new Entry

{

Placeholder = “Name”,

PlaceholderColor = Color.Red

};

txtSifre = new Entry

{

Placeholder = “Password”,

PlaceholderColor = Color.Red,

TextColor = Color.Black

};

StackLayout layout = new StackLayout

{

Orientation = StackOrientation.Vertical,

VerticalOptions = LayoutOptions.Center,

Children =

{

txtKullaniciAdi,

txtSifre,

btnLogin

}

};

Content = layout;

}

private void BtnLogin_Clicked(object sender, System.EventArgs e)

{

string KullaniciAdi = txtKullaniciAdi.Text;

string Sifre = txtSifre.Text;

if (KullaniciAdi == “admin” && Sifre == “123”)

DisplayAlert(“Login Başarılı”, “Hoşgeldiniz.”, “OK”);

else

DisplayAlert(“Login Başarısız”, “Yanlış Kullanıvı Bilgileri.”, “OK”);

}

}

kodlama8

Şekil 6.1.4.4 App.cs MainPage e açılacak olan sayfayı set ediyoruz

Yukarıda yapılan örnek uygulamanın iOS ve Android çıktısı aşağıdaki gibidir.

kodlama7

Şekil 6.1.4.5 : Xaml ce Class Page ile yukarıda yazılan kodların iOS ve Android Çıktıları

Button’un Click eventi nide kontrol edelim kullanıcı adını ve şifreyi doğru girersek olumlu yanlış girersek olumsuz olduğunu gösteren bir mesaj kutusu çıkaracaktır.

mesajkutusu

Şekil 6.1.4.6 : iOS ve Android Mesaj Kutusu

Hakkında bilisimegitim

Ayrıca Kontrol Edin

Android Uygulama Nasıl Yapılır?

Teknolojinin gelişmesi ile birlikte internet kullanımında mobilin ağırlığı gün geçtikçe artıyor. Şirketlerin, hizmet sağlayıcıların, blog …

Bir cevap yazın

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