Xamarin.Forms Kılavuz Öğreticisi

Makale
Developer (Başlangıç)
Tamamlanması için 9 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.

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

XAML içinde bir Xamarin.FormsGrid oluşturun.
Grid için sütun ve satırları belirtme.
İçeriği Grid içinde birden fazla sütuna veya birden fazla satıra yayma.

Bir Grid içinde denetimleri düzenlemeyi 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.

Kılavuz oluşturma

8 dakika kaldı

Grid, alt öğeleri orantılı veya mutlak boyutlara sahip olabilecek satırlar ve sütunlar halinde düzenleyen bir düzendir. Grid varsayılan olarak bir satır ve bir sütun içerir.

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 GridTutorial adlı boş Xamarin.Forms bir uygulama oluşturun.

Önemli

Bu öğreticide kullanılan C# ve XAML kod parçacıklarında çözüm adı GridTutorial 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 GridTutorial projesinde MainPage.xaml dosyasına çift tıklayıp 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="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
Bu kod, sayfanın kullanıcı arabirimini bildirimli bir şekilde tanımlar ve bu da bir Grid içindeki Label öğesinden oluşur. Grid, alt görünümlerini varsayılan olarak tek bir konuma yerleştirir. Bu nedenle birden fazla alt öğe içeren bir Grid, sütunları ve satırları belirtmelidir. Bu durum bir sonraki alıştırmada ele alınacaktır. Ayrıca Margin özelliği, ContentPage içindeki Grid öğesinin oluşturulacağı konumu belirtir.

Not

Margin özelliğine ek olarak Grid üzerinde Padding özelliği de belirtilebilir. Padding özellik değeri, Grid ile alt öğelerinin sınırları arasındaki mesafeyi belirtir. Daha fazla bilgi için bkz. Kenar Boşlukları ve Doldurma.
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:

hakkında Griddaha fazla bilgi için bkz Xamarin.Forms . Kılavuz.

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 GridTutorial adlı yeni bir boş Xamarin.Forms uygulama oluşturun.

Önemli

Bu öğreticide kullanılan C# ve XAML kod parçacıklarında çözüm adı GridTutorial 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 GridTutorial projesinde MainPage.xaml dosyasına çift tıklayıp 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="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
Bu kod, sayfanın kullanıcı arabirimini bildirimli bir şekilde tanımlar ve bu da bir Grid içindeki Label öğesinden oluşur. Grid, alt görünümlerini varsayılan olarak tek bir konuma yerleştirir. Bu nedenle birden fazla alt öğe içeren bir Grid, sütunları ve satırları belirtmelidir. Bu durum bir sonraki alıştırmada ele alınacaktır. Ayrıca Margin özelliği, ContentPage içindeki Grid öğesinin oluşturulacağı konumu belirtir.

Not

Margin özelliğine ek olarak Grid üzerinde Padding özelliği de belirtilebilir. Padding özellik değeri, Grid içindeki görünümler arasındaki mesafeyi belirtir. Daha fazla bilgi için bkz. Kenar Boşlukları ve Doldurma.
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:

hakkında Griddaha fazla bilgi için bkz Xamarin.Forms . Kılavuz.

Sütun ve satırları belirtme

6 dakika kaldı

Visual Studio
Mac için Visual Studio

MainPage.xaml dosyasındaki Grid bildirimini sütun ve satırları tanımlayacak ve sütun ve satırlara içerik yerleştirecek şekilde değiştirin:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
Bu kod, Grid için sütun ve satırları tanımlayıp belirli sütun ve satırların içine Label örneklerini yerleştirir. Sütun ve satır verileri, ColumnDefinition ve RowDefinition nesnelerinin koleksiyonu olan ColumnDefinitions ve RowDefinitions özelliklerinde depolanır. Her bir ColumnDefinition öğesinin genişliği ColumnDefinition.Width özelliği tarafından, her bir RowDefinition öğesinin yüksekliği ise RowDefinition.Height özelliği tarafından ayarlanır. Geçerli genişlik ve yükseklik değerleri şunlardır:
- Sütunu veya satırı içeriğe göre boyutlandıran Auto.
- Sütunları ve satırları kalan alana göre oranlayan orantılı değerler. Orantılı değerlerin sonunda * işareti bulunur.
- Sütunları veya satırları önceden belirlenen, sabit değerlere göre boyutlandıran mutlak değerler.
Bu bilgilerin ışığında yukarıdaki kodda her sütunun genişliğinin Grid değerinin yarısı, her satırın yüksekliğinin ise cihazdan bağımsız 50 birim olduğunu söyleyebiliriz.

Grid içindeki her bir Label öğesinin konumu, sıfır tabanlı dizin kullanılarak Grid.Column ve Grid.Row ekli özellikleriyle belirtilmiştir. Bu doğrultuda sütun 0 ilk sütun, satır 0 da ilk satırdır. Bu değerlerin ayarlanmadığı alt görünüm otomatik olarak sütun 0, satır 0 içinde oluşturulacağından ilk Label içinde bu ekli özellikler belirtilmemiştir.

Not

Bir Grid içindeki sütunlar ve satırlar arasındaki boşluk, ColumnSpacing ve RowSpacing özellikleriyle ayarlanabilir. Daha fazla bilgi için Kılavuz kılavuzundaki Aralık bölümüneXamarin.Formsbakın.
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:

MainPage.xaml dosyasındaki Grid bildirimini sütun ve satırları tanımlayacak ve sütun ve satırlara içerik yerleştirecek şekilde değiştirin:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
Bu kod, Grid için sütun ve satırları tanımlayıp belirli sütun ve satırların içine Label örneklerini yerleştirir. Sütun ve satır verileri, ColumnDefinition ve RowDefinition nesnelerinin koleksiyonu olan ColumnDefinitions ve RowDefinitions özelliklerinde depolanır. Her bir ColumnDefinition öğesinin genişliği ColumnDefinition.Width özelliği tarafından, her bir RowDefinition öğesinin yüksekliği ise RowDefinition.Height özelliği tarafından ayarlanır. Geçerli genişlik ve yükseklik değerleri şunlardır:
- Sütunu veya satırı içeriğe göre boyutlandıran Auto.
- Sütunları ve satırları kalan alana göre oranlayan orantılı değerler. Orantılı değerlerin sonunda * işareti bulunur.
- Sütunları veya satırları önceden belirlenen, sabit değerlere göre boyutlandıran mutlak değerler.
Bu bilgilerin ışığında yukarıdaki kodda her sütunun genişliğinin Grid değerinin yarısı, her satırın yüksekliğinin ise cihazdan bağımsız 50 birim olduğunu söyleyebiliriz.

Grid içindeki her bir Label öğesinin konumu, sıfır tabanlı dizin kullanılarak Grid.Column ve Grid.Row ekli özellikleriyle belirtilmiştir. Bu doğrultuda sütun 0 ilk sütun, satır 0 da ilk satırdır. Bu değerlerin ayarlanmadığı alt görünüm otomatik olarak sütun 0, satır 0 içinde oluşturulacağından ilk Label içinde bu ekli özellikler belirtilmemiştir.

Not

Bir Grid içindeki sütunlar ve satırlar arasındaki boşluk, ColumnSpacing ve RowSpacing özellikleriyle ayarlanabilir. Daha fazla bilgi için Kılavuz kılavuzundaki Aralık bölümüneXamarin.Formsbakın.
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:

İçeriği birden çok sütuna veya satıra yayma

2 dakika kaldı

Visual Studio
Mac için Visual Studio

MainPage.xaml dosyasındaki Grid bildirimini sütun ve satırları tanımlayacak ve sütun ve satırlara yayılacak içerik yerleştirecek şekilde değiştirin:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>
```
Bu kod, Grid için sütun ve satırları tanımlayıp belirli sütun ve satırların içine Label örneklerini yerleştirir. İlk Label, ekli ColumnSpan özelliğini ayarlayarak metnin birden fazla sütuna yayılmasını sağlar. ColumnSpan özelliği için Label öğesinin yayılacağı sütun sayısını temsil eden 2 değeri belirlenmiştir. İkinci Label, ekli RowSpan özelliğini ayarlayarak metnin birden fazla satıra yayılmasını sağlar. RowSpan özelliği için Label öğesinin yayılacağı satır sayısını temsil eden 2 değeri belirlenmiştir.
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:

Visual Studio'da uygulamayı durdurun.

Sütunları ve satırları yayma hakkında daha fazla bilgi için Kılavuz kılavuzundaki Satırlar ve sütunlar bölümüneXamarin.Formsbakın.

MainPage.xaml dosyasındaki Grid bildirimini sütun ve satırları tanımlayacak ve sütun ve satırlara yayılacak içerik yerleştirecek şekilde değiştirin:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>
```
Bu kod, Grid için sütun ve satırları tanımlayıp belirli sütun ve satırların içine Label örneklerini yerleştirir. İlk Label, ekli ColumnSpan özelliğini ayarlayarak metnin birden fazla sütuna yayılmasını sağlar. ColumnSpan özelliği için Label öğesinin yayılacağı sütun sayısını temsil eden 2 değeri belirlenmiştir. İkinci Label, ekli RowSpan özelliğini ayarlayarak metnin birden fazla satıra yayılmasını sağlar. RowSpan özelliği için Label öğesinin yayılacağı satır sayısını temsil eden 2 değeri belirlenmiştir.
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:

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

Sütunları ve satırları yayma hakkında daha fazla bilgi için Kılavuz kılavuzundaki Satırlar ve sütunlar bölümüneXamarin.Formsbakın.

Aracılığıyla paylaş

Xamarin.Forms Kılavuz Öğreticisi

Kılavuz oluşturma

Sütun ve satırları belirtme

İçeriği birden çok sütuna veya satıra yayma

Tebrikler!

Sonraki adımlar

Aracılığıyla paylaş

Xamarin.Forms Kılavuz Öğreticisi

Kılavuz oluşturma

Sütun ve satırları belirtme

İçeriği birden çok sütuna veya satıra yayma

Tebrikler!

Sonraki adımlar

İlgili bağlantılar