Harun Özer


Proje veya dijital katalog yaptırmak için
iletişim formu doldurabilirsiniz..

<< Xamarin Tasarım Yapıları | Xamarin Resource Style Tanımlama>>

Xamarin Form Kontrolleri

Yazar harunozer 20 September 2017

Xamarin Form Kontrolleri Bu makalede xamarin form kontrollerini işleyeceğiz. Bu kontroller Html ve Masaüstü programlarda kullandığımız veri girişi yapılmasını sağlayan elemanlar gibidir.

Önceki makalemizde xamarin tasarım yapılarını incelemiştik. Bu makalede xamarin form kontrollerini işleyeceğiz. Bu kontroller Html ve Masaüstü programlarda kullandığımız veri girişi yapılmasını sağlayan elemanlar gibidir.

Yapacağımız örnekler için ilk olarak yeni bir “FormKontrolleri” adında Xamarin.Forms Portable Blank App projesi açalım. Sonra projemize “KontrollerOrnek.cs“ adında Forms.Xaml Page ekleyelim. Bu pagenin xaml kısmında ContentPage.Content node si ve içine StackLayout ekleyelim. Bütün kontrollerimizi bu page içinde yapacağız. KontrollerOrnek.xaml aşağıdaki gibi olacaktır.

<ContentPage.Content>

    <StackLayout>

     

    </StackLayout>

</ContentPage.Content>

Button: Sayfamızabir button ekleyelim ve tıklandığında ActivityIndicator kontrolünün IsRunning özelliğini True/False yapalım. ActivityIndicator kontrolü loading process barı olarak düşünebiliriz. IsRunning özelliği true olduğunda görünür. StackLayout içine button kontrolü ve ActivityIndicator kontollerini ekleyelim. Button kontrolüne Clicked event olarak Button1Click olarak tanımlayalım. cs kısmında ActivityIndicator kontrolüne erişebilmek için x:name özelliğini LoadingIndicator olarak tanımlayalım. x: ile başlayan özellikler .cs tarafı ile ilgili özelliklerdir. StackLayout un içi aşağıdaki gibi olacaktır.

<ButtonText="Button1"Clicked="Button1Click"></Button>

     

<!--Loading icon görünmesi-->

<ActivityIndicatorx:Name="LoadingIndicator"IsRunning="False"></ActivityIndicator>

Şimdi de Butona verdiğimiz Button1Click eventı yazalım. Bunun için .cs içine event da tetiklenecek Button1Click metodu yazıyoruz. Bu metod object ve EventArgs parametrelerini almalı. c# daki button click event gibidir. KontrollerOrnek.cs deki Button1Click metodu aşağıdaki gibi olacaktır.

publicvoidButton1Click(objectsender, EventArgse)

{

     LoadingIndicator.IsRunning = !LoadingIndicator.IsRunning;

}

Burada buton tıklandıkça LoadingIndicator kontrolümüzün Running özelliği değiştirilecektir.

DatePicker:Tarih seçimine yarayan kontroldür. Sayfamıza aşağıdaki gibi bir DatePicker ekleyelim ve Tarih aralıkları, format gibi özelliklerini KontrollerOrnek.cs tarafında tanımlayalım.

<DatePickerx:Name="DatePicker1"></DatePicker>

DatePicker1 ismi ile KontrollerOrnek.cs tarafında bu kontrole erişebiliriz. cs kısmında initialize metodunda aşağıdaki gibi tanımlamaları yapabiliriz.

/*Bu özellikler xaml de de belirtilebilir*/

DatePicker1.MinimumDate = Convert.ToDateTime("2016-01-01");

DatePicker1.MaximumDate = Convert.ToDateTime("2018-01-01");

DatePicker1.Date = DateTime.Now;

DatePicker1.Format = "dd/MM/yyyy";

Entry:Xamarin de textbox kontrolüdür. En önemli özellikleri Keyboard ve IsPassword özellikleridir. Keyboard ile girilecek textin ne olduğu belirtilir (Email, Numeric vs.)

 

<EntryFontAttributes="Bold"FontFamily="Times New Roman"FontSize="16"

       HorizontalTextAlignment="Start"

       TextColor="Green"

       Keyboard="Email"

       IsPassword="False"

Placeholder="E-Postanız..."PlaceholderColor="Yellow">

       

</Entry>

Editor: Html de ki TextArea elementi gibidir. Çok satırlı textboxdır diyebiliriz. Entry de kullanılan hemen hemen bütün özellikleri destekler.

<EditorFontFamily="Calibri"BackgroundColor="Gray"HeightRequest="150"></Editor>

 

Picker: Masaüstü uygulamalarımızda ki DropdownList kontrolüdür. Title özelliği hiçbir item seçili olmadığında görünecek yazıdır. Picker elemanları Picker.Items node içine yazılır.

      <PickerTitle="Lütfen Seçiniz"SelectedIndexChanged="pickerChange">

        <Picker.Items>

          <x:String>1</x:String>

          <x:String>2</x:String>

        </Picker.Items>

      </Picker>

Yukarıdaki örnekte 2 item olan picker tanımlanmıştır. Seçili değeri değiştiğinde pickerChange fonksiyonu tetiklenir. Event tanımını .cs de aşağıdaki gibi yapabiliriz.

        privatevoidpickerChange(objectsender, EventArgse)

        {

            Pickerp = (Picker)sender;

            stringselectedItem = p.Items[p.SelectedIndex];

            DisplayAlert("Picker Change", selectedItem, "TAMAM", "İPTAL");

        }

ProgressBar: Masaüstü programlarda kullandığımız ilerleme durumunu gösteren kontroldür. Aşağıdaki örnekte %30 da başlayıp butona basılınca %80 e gidecektir. Buton olarak ilk örnekteki butonun click eventını kullanabiliriz.

<ProgressBarx:Name="progress1"Progress=".3"></ProgressBar>

/*

    1 parametre hangi değere gideceği, 2. kaç milisaniyede gideceği, 3. parametre de animasyondur

*/

    progress1.ProgressTo(0.8, 2000, Easing.Linear);

Slider:Kaydırma ile sayısal değer beliren kontroldür. Max ve Min değerleri verilir. Aşağıdaki örnekte slider ekleyip değerini BindingContext ile label da gösterilmesini yapacağız. BindingContext özelliği ile kontrolün değerinin başka bir kontrolden alınmasını sağlayabiliriz. Labelin Text özelliğini de bağladığımız bu kontrolün hani özelliğinden alacağını belirtiriz.

<Sliderx:Name="slider1"Minimum="0"Maximum="100"></Slider>

<LabelBindingContext="{x:Reference slider1}"Text="{Binding Value}"></Label>

Stepper:Üzerinde + ve – butonları olan her tıklamada Increment özelliğinde belirtilen değer kadar değeri değiştirir.

 

<Stepperx:Name="stepper1"Minimum="10"Maximum="100"Increment="10"></Stepper>

<LabelBindingContext="{x:Reference stepper1}"Text="{Binding Value}"FontSize="Large"TextColor="Yellow"></Label>

Switch:Checkbox gibidir. IsToggled özelliği true ise seçilidir. Toggle olduğunda (IsToggled değiştiğinde) Toggled event tetiklenir.

<SwitchIsToggled="False"Toggled="onToggled"></Switch>

privatevoidonToggled(objectsender, ToggledEventArgse)

{

DisplayAlert("Switch Toggled", e.Value.ToString(), "TAMAM", "İPTAL");

}

WebView: web sayfası görüntülenmesini sağlar.

<WebViewSource="http://www.harunozer.com"/>

 

TableView: Kolay bir şekilde form, menü gibi yapılar oluşturmamızı sağlar. Hizalamalar için iç içe Layout oluşturmak, label oluşturmak durumlarından bizi kurtarır. Yukarıdaki kontrollerden çok az fakları vardır. Bundan dolayı ayrı ayrı kontrollerini incelememize gerek yok.

Örneğimiz için uygulamamıza TableViewSample page ekleyelim ve .xaml içeriğine aşağıdaki bloğu ekleyip App.cs de başlangıç sayfası olarak eklediğimiz sayfayı verelim.

  <ContentPage.Content>

    <TableViewIntent="Form">

      <TableRoot>

        <TableSectionTitle="TableSection.Title">

          <SwitchCellText="SwitchCellText"On="True"></SwitchCell>

          <EntryCellLabel="EntryCell"Placeholder="www.domain.com"></EntryCell>

          <ImageCellImageSource="icon.png"Text="ImageCell ImageText"Detail="Image Detail Prop"></ImageCell>

          <TextCellText="TextCell"Detail="TextCell Detail"></TextCell>

        </TableSection>

      </TableRoot>

    </TableView>

  </ContentPage.Content>

 

Örnekleri aşağıdaki adresten indirebilirsiniz.

https://github.com/harunozer/XamarinSamples/tree/master/FormKontrolleri

Kaynak: https://www.youtube.com/watch?v=vM5VH2bqwww

Tam Sayfa
Tags Xamarin,
Kategoriler Xamarin
İşlemler
Bu Makale 0  Kez Beğenildi.
İsim :    
e-Mail :    
Web Site :  
İmage :  
Güvenlik Kodu :  

Güvenlik Resmi
Resmi Yenile
    
Yorum :  
Tasarım Desenleri ve Mimarileri