Xamarin.Forms Düğme Öğreticisi

Makale
Developer (Başlangıç)
Tamamlanması için 7 dakika kaldı

Bu öğreticiye başlamadan önce şunları başarıyla tamamlamış olmanız gerekir:

İlk Xamarin.Forms uygulama hızlı başlangıcınızı oluşturun.
StackLayout öğreticisi.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

XAML içinde bir Xamarin.FormsButton oluşturun.
Button öğesine dokunulduğunda yanıt verme.
Button görünümünü değiştirme.

Bir Button özelleştirmeyi gösteren basit bir uygulama oluşturmak için Visual Studio 2019 veya Mac için Visual Studio kullanacaksınız. Aşağıdaki ekran görüntüleri, son uygulamayı gösterir:

Ayrıca uygulamanızı yeniden oluşturmadan kullanıcı arabirimi değişikliklerini görmek için için Xamarin.Forms XAML Çalışırken Yeniden Yükleme kullanacaksınız.

Düğme oluşturma

6 dakika kaldı

Visual Studio
Mac için Visual Studio

Bu öğreticiyi tamamlamak için Visual Studio 2019 (son sürüm) ve .NET ile mobil uygulama geliştirme iş yükü sisteminizde yüklü olmalıdır. Ayrıca öğretici uygulamasını iOS üzerinde derleyebilmek için eşleştirilmiş bir Mac de gerekecektir. Xamarin platformunu yükleme hakkında bilgi için bkz. Xamarin'i Yükleme. Visual Studio 2019'u bir Mac derleme ana bilgisayarına bağlama hakkında bilgi için bkz. Xamarin.iOS geliştirme için Mac ile eşleştirme.

Visual Studio'yu başlatın ve ButtonTutorial adlı boş Xamarin.Forms bir uygulama oluşturun.

Önemli

Bu öğreticide kullanılan C# ve XAML kod parçacıklarında çözüm adı ButtonTutorial olarak belirlenmiştir. Farklı bir ad kullanırsanız bu öğreticideki kodları çözüme kopyaladığınızda derleme hatalarıyla karşılaşabilirsiniz.

Oluşturulan .NET Standard kitaplığı hakkında daha fazla bilgi için Bkz. Hızlı Başlangıç Ayrıntılı Bakış'taXamarin.Forms uygulamanın Xamarin.Forms anatomisi.
Çözüm Gezgini'ndeki ButtonTutorial projesinde MainPage.xaml dosyasına çift tıklayarak açın. Ardından MainPage.xaml içindeki şablon kodunun tamamını silip aşağıdaki kodu ekleyin:
```
<?xml version="1.0" encoding="utf-8"?>    
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Bu kod, sayfanın kullanıcı arabirimini bildirimli bir şekilde tanımlar ve bu da bir StackLayout içindeki Button öğesinden oluşur. Button.Text özelliği, Button içinde görüntülenen metni belirtir.
Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

Button, varsayılan olarak verilen alanın tamamını doldurur. Bu durumda ilgili alan üst öğesinin (StackLayout) genişliğinin tamamıdır.

Visual Studio'da uygulamayı durdurun.

Bu öğreticiyi tamamlamak için iOS ve Android platformu desteğine sahip Mac için Visual Studio (son sürüm) uygulamasını yüklemiş olmanız gerekir. Ayrıca Xcode (son sürüm) uygulaması da gereklidir. Xamarin platformunu yükleme hakkında daha bilgi için bkz. Xamarin'i Yükleme.

Mac için Visual Studio başlatın ve ButtonTutorial adlı boş Xamarin.Forms bir uygulama oluşturun.

Önemli

Bu öğreticide kullanılan C# ve XAML kod parçacıklarında çözüm adı ButtonTutorial olarak belirlenmiştir. Farklı bir ad kullanırsanız bu öğreticideki kodları çözüme kopyaladığınızda derleme hatalarıyla karşılaşabilirsiniz.

Oluşturulan .NET Standard kitaplığı hakkında daha fazla bilgi için Bkz. Hızlı Başlangıç Ayrıntılı Bakış'taXamarin.Forms uygulamanın Xamarin.Forms anatomisi.
Çözüm Bölmesi'ndeki ButtonTutorial projesinde MainPage.xaml dosyasına çift tıklayarak açın. Ardından MainPage.xaml içindeki şablon kodunun tamamını silip aşağıdaki kodu ekleyin:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Bu kod, sayfanın kullanıcı arabirimini bildirimli bir şekilde tanımlar ve bu da bir StackLayout içindeki Button öğesinden oluşur. Button.Text özelliği, Button içinde görüntülenen metni belirtir.
Mac için Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

Button, varsayılan olarak verilen alanın tamamını doldurur. Bu durumda ilgili alan üst öğesinin (StackLayout) genişliğinin tamamıdır.

Mac için Visual Studio'da uygulamayı durdurun.

Tıklamaları işleme

4 dakika kaldı

Visual Studio
Mac için Visual Studio

MainPage.xaml içinde Button bildirimini değiştirerek Clicked olayı için bir işleyici ayarlamasını sağlayın:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Bu kod, Clicked olayını bir sonraki adımda oluşturulacak OnButtonClicked adlı olay işleyicisi olarak ayarlar.
Çözüm Gezgini'ndeki ButtonTutorial projesinde MainPage.xaml bölümünü genişletip MainPage.xaml.cs dosyasına çift tıklayarak açın. Ardından MainPage.xaml.cs içinde sınıfa OnButtonClicked olay işleyicisini ekleyin:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Button öğesine dokunulduğunda OnButtonClicked yöntemi yürütülür. sender bağımsız değişkeni, Clicked olayının gerçekleştirilmesinden sorumlu olan Button nesnesidir ve Button nesnesine erişmek için kullanılabilir. Bu olay işleyicisi, Button tarafından görüntülenen metni güncelleştirir.

Not

Button öğesi, Clicked olayının yanı sıra Pressed ve Released olaylarını da tanımlar. Daha fazla bilgi için Düğme kılavuzundaki düğmeye basma ve bırakma bölümüne Xamarin.Forms bakın.
Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz uzak iOS simülatöründe veya Android öykünücüsünde başlatın. Button öğesine tıklayın ve görüntülenen metnin değiştiğine dikkat edin:

Düğme tıklamalarını işleme hakkında daha fazla bilgi için Düğme kılavuzundakiXamarin.Forms İşleme düğmesi tıklamaları bölümüne bakın.

MainPage.xaml içinde Button bildirimini değiştirerek Clicked olayı için bir işleyici ayarlamasını sağlayın:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Bu kod, Clicked olayını bir sonraki adımda oluşturulacak OnButtonClicked adlı olay işleyicisi olarak ayarlar.
Çözüm Bölmesi'ndeki ButtonTutorial projesinde MainPage.xaml bölümünü genişletip MainPage.xaml.cs dosyasına çift tıklayarak açın. Ardından MainPage.xaml.cs içinde sınıfa OnButtonClicked olay işleyicisini ekleyin:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Button öğesine dokunulduğunda OnButtonClicked yöntemi yürütülür. sender bağımsız değişkeni, Clicked olayının gerçekleştirilmesinden sorumlu olan Button nesnesidir ve Button nesnesine erişmek için kullanılabilir. Bu olay işleyicisi, Button tarafından görüntülenen metni güncelleştirir.

Not

Button öğesi, Clicked olayının yanı sıra Pressed ve Released olaylarını da tanımlar. Daha fazla bilgi için Düğme kılavuzundaki düğmeye basma ve bırakma bölümüne Xamarin.Forms bakın.
Mac için Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın. Button öğesine tıklayın ve görüntülenen metnin değiştiğine dikkat edin:

Düğme tıklamalarını işleme hakkında daha fazla bilgi için Düğme kılavuzundakiXamarin.Forms İşleme düğmesi tıklamaları bölümüne bakın.

Görünümü değiştirme

2 dakika kaldı

Visual Studio
Mac için Visual Studio

MainPage.xaml içinde Button bildirimini düzenleyerek görünümünü değiştirin:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Bu kod, Button öğesini görünümünü değiştiren özellikleri ayarlar. TextColor özelliği Button metninin rengini ayarlarken BackgroundColor özelliği metin arka planının rengini ayarlar. BorderColor özelliği Button etrafındaki alanın rengini ayarlarken BorderWidth özelliği kenarlığın kalınlığını ayarlar. Button varsayılan olarak dikdörtgendir ancak CornerRadius özelliğine uygun bir değer verilerek köşeler yuvarlatılabilir. Bunlara ek olarak Button öğesinin boyutu, WidthRequest ve HeightRequest özellikleri ayarlanarak değiştirilebilir.
Uygulama çalışıyorsa dosyada yaptığınız değişiklikleri kaydettiğinizde simülatör veya öykünücü içindeki uygulama kullanıcı arabirimi otomatik olarak güncelleştirilir. Aksi takdirde Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz uzak iOS simülatöründe veya Android öykünücüsünde başlatın. Button öğesinin görünümünün değiştiğini göreceksiniz:

Visual Studio'da uygulamayı durdurun.

Görünümü ayarlama Button hakkında daha fazla bilgi için Düğme kılavuzundaki Düğme görünümü bölümüne Xamarin.Forms bakın.

MainPage.xaml içinde Button bildirimini düzenleyerek görünümünü değiştirin:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Bu kod, Button öğesini görünümünü değiştiren özellikleri ayarlar. TextColor özelliği Button metninin rengini ayarlarken BackgroundColor özelliği metin arka planının rengini ayarlar. BorderColor özelliği Button etrafındaki alanın rengini ayarlarken BorderWidth özelliği kenarlığın kalınlığını ayarlar. Button varsayılan olarak dikdörtgendir ancak CornerRadius özelliğine uygun bir değer verilerek köşeler yuvarlatılabilir. Bunlara ek olarak Button öğesinin boyutu, WidthRequest ve HeightRequest özellikleri ayarlanarak değiştirilebilir.
Uygulama çalışıyorsa dosyada yaptığınız değişiklikleri kaydettiğinizde simülatör veya öykünücü içindeki uygulama kullanıcı arabirimi otomatik olarak güncelleştirilir. Aksi takdirde Mac için Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın. Button öğesinin görünümünün değiştiğini göreceksiniz:

Mac için Visual Studio'da uygulamayı durdurun.

Görünümü ayarlama Button hakkında daha fazla bilgi için Düğme kılavuzundaki Düğme görünümü bölümüne Xamarin.Forms bakın.

Aracılığıyla paylaş

Xamarin.Forms Düğme Öğreticisi

Düğme oluşturma

Tıklamaları işleme

Görünümü değiştirme

Tebrikler!

Sonraki adımlar

Aracılığıyla paylaş

Xamarin.Forms Düğme Öğreticisi

Düğme oluşturma

Tıklamaları işleme

Görünümü değiştirme

Tebrikler!

Sonraki adımlar

İlgili bağlantılar