Xamarin.Forms Etiket Öğ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.FormsLabel oluşturun.
Label görünümünü değiştirme.
Tek bir Label içinde birden fazla biçime sahip metin sunma.

Bir Label içinde metin görüntülemeyi 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.

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

Önemli

Bu öğreticide kullanılan C# ve XAML kod parçacıklarında çözüm adı LabelTutorial 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 LabelTutorial 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="LabelTutorial.MainPage">
 <StackLayout Margin="20,35,20,20">
 <Label Text="Welcome to Xamarin.Forms!"
 HorizontalOptions="Center" />
 </StackLayout>
</ContentPage>
```
Bu kod, sayfanın kullanıcı arabirimini bildirimli bir şekilde tanımlar ve bu da bir StackLayout içindeki Label öğesinden oluşur. Label.Text özelliği görüntülenen metni belirtirken HorizontalOptions özelliği ise Label öğesinin yatay olarak ortalanacağını gösterir.
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:

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 LabelTutorial 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ı LabelTutorial 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 LabelTutorial 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="LabelTutorial.MainPage">
 <StackLayout Margin="20,35,20,20">
 <Label Text="Welcome to Xamarin.Forms!"
 HorizontalOptions="Center" />
 </StackLayout>
</ContentPage>
```
Bu kod, sayfanın kullanıcı arabirimini bildirimli bir şekilde tanımlar ve bu da bir StackLayout içindeki Label öğesinden oluşur. Label.Text özelliği görüntülenen metni belirtirken HorizontalOptions özelliği ise metnin yatay olarak ortalanacağını gösterir.
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:

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

4 dakika kaldı

Visual Studio
Mac için Visual Studio

MainPage.xaml içinde Label bildirimini düzenleyerek görünümünü değiştirin:
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
Bu kod, Label öğesini görünümünü değiştiren özellikleri ayarlar. TextColor özelliği, Label metninin rengini ayarlar. FontAttributes özelliği etiket yazı tipini italik yaparken FontSize özelliği de yazı tipi boyutunu ayarlar. Bunlara ek olarak Label öğesinin TextDecorations özelliği ayarlanarak altı çizili metin özelliği eklenmiş ve HorizontalOptions özelliği Center olarak ayarlanarak yatay düzlemde ortalanmıştır.
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. Label öğesinin görünümünün değiştiğini göreceksiniz:

Görünümü ayarlama Label hakkında daha fazla bilgi için Etiket kılavuzuna Xamarin.Forms bakın.

MainPage.xaml içinde Label bildirimini düzenleyerek görünümünü değiştirin:
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
Bu kod, Label öğesini görünümünü değiştiren özellikleri ayarlar. TextColor özelliği, Label metninin rengini ayarlar. FontAttributes özelliği etiket yazı tipini italik yaparken FontSize özelliği de yazı tipi boyutunu ayarlar. Bunlara ek olarak Label öğesinin TextDecorations özelliği ayarlanarak altı çizili metin özelliği eklenmiş ve HorizontalOptions özelliği Center olarak ayarlanarak yatay düzlemde ortalanmıştır.
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. Label öğesinin görünümünün değiştiğini göreceksiniz:

Görünümü ayarlama Label hakkında daha fazla bilgi için Etiket kılavuzuna Xamarin.Forms bakın.

Biçimlendirilmiş metin sunma

2 dakika kaldı

Visual Studio
Mac için Visual Studio

MainPage.xaml içinde Label bildirimini tek bir Label içinde birden fazla biçim kullanan metin sunacak şekilde değiştirin.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
Bu kod metni birden fazla biçim kullanan tek bir Label içinde görüntüler. İlk Span içindeki metin, Label üzerinde ayarlanan biçimlendirme kullanılarak görüntülenirken ikinci ve üçüncü Span örneklerindeki metin, Label üzerinde ayarlanan biçimlendirme ve her bir Span üzerinde ayarlanan ek biçimlendirme kullanılarak görüntülenir.

Not

FormattedText özelliği, FormattedString türündedir ve bir veya daha fazla Span öğesinden oluşur.
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. Label öğesinin görünümünün değiştiğini göreceksiniz:

Visual Studio'da uygulamayı durdurun.

Görünümü ayarlama Span hakkında daha fazla bilgi için Etiket kılavuzundaki Biçimlendirilmiş metin bölümüne Xamarin.Forms bakın.

MainPage.xaml içinde Label bildirimini tek bir Label içinde birden fazla biçim kullanan metin sunacak şekilde değiştirin.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
Bu kod metni birden fazla biçim kullanan tek bir Label içinde görüntüler. İlk Span içindeki metin, Label üzerinde ayarlanan biçimlendirme kullanılarak görüntülenirken ikinci ve üçüncü Span örneklerindeki metin, Label üzerinde ayarlanan biçimlendirme ve her bir Span üzerinde ayarlanan ek biçimlendirme kullanılarak görüntülenir.

Not

FormattedText özelliği, FormattedString türündedir ve bir veya daha fazla Span öğesinden oluşur.
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. Label öğ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 Span hakkında daha fazla bilgi için Etiket kılavuzundaki Biçimlendirilmiş metin bölümüne Xamarin.Forms bakın.

Xamarin.Forms Etiket Öğreticisi

Etiket oluşturma

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

Biçimlendirilmiş metin sunma

Tebrikler!

Sonraki adımlar

Xamarin.Forms Etiket Öğreticisi

Etiket oluşturma

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

Biçimlendirilmiş metin sunma

Tebrikler!

Sonraki adımlar

İlgili bağlantılar