Not
Bu sayfaya erişim yetkilendirme gerektiriyor. Oturum açmayı veya dizinleri değiştirmeyi deneyebilirsiniz.
Bu sayfaya erişim yetkilendirme gerektiriyor. Dizinleri değiştirmeyi deneyebilirsiniz.
Metin görüntüleme Xamarin.Forms
Görünüm Label , hem tek hem de çok satırlı metin görüntülemek için kullanılır. Etiketlerde metin süslemeleri, renkli metinler olabilir ve özel yazı tipleri (aileler, boyutlar ve seçenekler) kullanılabilir.
Metin süslemeleri
Altı çizili ve üstü çizili metin süslemeleri, özelliği bir veya daha fazla TextDecorations numaralandırma üyesine ayarlanarak Label.TextDecorations örneklere uygulanabilirLabel:
NoneUnderlineStrikethrough
Aşağıdaki XAML örneğinde özelliğin ayarlanması gösterilmektedir Label.TextDecorations :
<Label Text="This is underlined text." TextDecorations="Underline" />
<Label Text="This is text with strikethrough." TextDecorations="Strikethrough" />
<Label Text="This is underlined text with strikethrough." TextDecorations="Underline, Strikethrough" />
Eşdeğer C# kodu:
var underlineLabel = new Label { Text = "This is underlined text.", TextDecorations = TextDecorations.Underline };
var strikethroughLabel = new Label { Text = "This is text with strikethrough.", TextDecorations = TextDecorations.Strikethrough };
var bothLabel = new Label { Text = "This is underlined text with strikethrough.", TextDecorations = TextDecorations.Underline | TextDecorations.Strikethrough };
Aşağıdaki ekran görüntüleri, örneklere TextDecorations uygulanan numaralandırma üyelerini Label gösterir:

Not
Metin süslemeleri örneklere Span de uygulanabilir. sınıfı hakkında Span daha fazla bilgi için bkz . Biçimlendirilmiş Metin.
Metin dönüştürme
, Label özelliğini sabit listesi değerine ayarlayarak TextTransform özelliğinde Text depolanan metninin TextTransform büyük/küçük harflerini dönüştürebilir. Bu sabit listesi dört değere sahiptir:
Nonemetnin dönüştürülmeyeceğini gösterir.Defaultplatform için varsayılan davranışın kullanılacağını belirtir. Bu özelliğin varsayılan değeridirTextTransform.Lowercasemetnin küçük harfe dönüştürüleceğini gösterir.Uppercasemetnin büyük harfe dönüştürüleceğini gösterir.
Aşağıdaki örnekte metni büyük harfe dönüştürme gösterilmektedir:
<Label Text="This text will be displayed in uppercase."
TextTransform="Uppercase" />
Eşdeğer C# kodu:
Label label = new Label
{
Text = "This text will be displayed in uppercase.",
TextTransform = TextTransform.Uppercase
};
Karakter aralığı
Karakter aralığı, özelliği bir double değere ayarlanarak Label.CharacterSpacing örneklere uygulanabilirLabel:
<Label Text="Character spaced text"
CharacterSpacing="10" />
Eşdeğer C# kodu:
Label label = new Label { Text = "Character spaced text", CharacterSpacing = 10 };
Sonuç, tarafından görüntülenen metindeki karakterlerin cihazdan Label bağımsız birimler halinde aralıklı CharacterSpacing olmasıdır.
Yeni satırlar
XAML'den yeni bir Label satıra metin zorlamak için iki ana teknik vardır:
- " " olan unicode satır akışı karakterini kullanın.
- Özellik öğesi söz dizimini kullanarak metninizi belirtin.
Aşağıdaki kod her iki tekniğin bir örneğini gösterir:
<!-- Unicode line feed character -->
<Label Text="First line Second line" />
<!-- Property element syntax -->
<Label>
<Label.Text>
First line
Second line
</Label.Text>
</Label>
C# dilinde, metin "\n" karakteriyle yeni bir satıra zorlanabilir:
Label label = new Label { Text = "First line\nSecond line" };
Renkler
Etiketler, bağlanabilir TextColor özelliği aracılığıyla özel bir metin rengi kullanacak şekilde ayarlanabilir.
Renklerin her platformda kullanılabilir olmasını sağlamak için özel bakım gereklidir. Her platformun metin ve arka plan renkleri için farklı varsayılan değerleri olduğundan, her birinde çalışan bir varsayılanı seçmeye dikkat etmeniz gerekir.
Aşağıdaki XAML örneği, bir Labeldeğerinin metin rengini ayarlar:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TextSample.LabelPage"
Title="Label Demo">
<StackLayout Padding="5,10">
<Label TextColor="#77d065" FontSize = "20" Text="This is a green label." />
</StackLayout>
</ContentPage>
Eşdeğer C# kodu:
public partial class LabelPage : ContentPage
{
public LabelPage ()
{
InitializeComponent ();
var layout = new StackLayout { Padding = new Thickness(5,10) };
var label = new Label { Text="This is a green label.", TextColor = Color.FromHex("#77d065"), FontSize = 20 };
layout.Children.Add(label);
this.Content = layout;
}
}
Aşağıdaki ekran görüntüleri özelliği ayarlamanın TextColor sonucunu gösterir:

Renkler hakkında daha fazla bilgi için bkz . Renkler.
Yazı tipleri
üzerinde yazı tiplerini Labelbelirtme hakkında daha fazla bilgi için bkz . Yazı tipleri.
Kesme ve sarmalama
Etiketler, özelliği tarafından LineBreakMode kullanıma sunulan çeşitli yollardan biriyle tek satıra sığmayan metinleri işleyecek şekilde ayarlanabilir. LineBreakMode aşağıdaki değerlere sahip bir numaralandırmadır:
- HeadTruncation : Metnin başını keserek sonunu gösterir.
- CharacterWrap : Metni karakter sınırında yeni bir satıra kaydırıyor.
- MiddleTruncation : Metnin başlangıcını ve sonunu görüntüler; ortası üç noktayla değiştirilir.
- NoWrap – metni kaydırmaz ve yalnızca bir satıra sığabilecek kadar çok metin görüntüler.
- TailTruncation – metnin başlangıcını gösterir ve sonu kesilir.
- WordWrap : Metni sözcük sınırında kaydırıyor.
Belirli sayıda satır görüntüleme
tarafından görüntülenen Label satır sayısı, özelliği bir int değere Label.MaxLines ayarlanarak belirtilebilir:
- Varsayılan değeri olan -1 olduğunda
MaxLines,LabelözelliğinLineBreakModedeğerini yalnızca bir satır, büyük olasılıkla kesilmiş veya tüm metin içeren tüm satırları gösterecek şekilde dikkate alır. - 0 olduğunda
MaxLines,Labelgörüntülenmez. - 1 olduğunda
MaxLines, sonuç özelliğini , ,HeadTruncationMiddleTruncationveyaTailTruncationolarakNoWrapayarlamaklaLineBreakModeaynıdır. Ancak, varsa,Labelbir üç noktanınLineBreakModeyerleştirilmesiyle ilgili olarak özelliğin değerine saygı gösterir. - 1'den büyük olduğunda
MaxLines,Labelvarsa bir üç noktanın yerleştirilmesiyle ilgili olarak özelliğinLineBreakModedeğerine saygı gösterirken belirtilen satır sayısına kadar görüntülenir. Ancak, özelliğinMaxLines1'den büyük bir değere ayarlanması, özelliği olarak ayarlandıysaLineBreakModeNoWraphiçbir etkisi olmaz.
Aşağıdaki XAML örneği, bir Labelüzerinde özelliğinin ayarlanmasını MaxLines gösterir:
<Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus."
LineBreakMode="WordWrap"
MaxLines="2" />
Eşdeğer C# kodu:
var label =
{
Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus.", LineBreakMode = LineBreakMode.WordWrap,
MaxLines = 2
};
Aşağıdaki ekran görüntüleri, metin 2'den fazla satır kaplayabilecek kadar uzun olduğunda özelliği 2 olarak ayarlamanın MaxLines sonucunu gösterir:

HTML Görüntüle
sınıfıLabel, örneğin düz metin mi yoksa HTML metni mi Label görüntüleneceğini belirleyen bir TextType özelliğe sahiptir. Bu özellik, numaralandırmanın üyelerinden TextType birine ayarlanmalıdır:
Text, öğesininLabeldüz metin görüntüleneceğini ve özelliğinin varsayılan değeriLabel.TextTypeolduğunu gösterir.HtmlLabel, HTML metninin görüntüleneceğini gösterir.
Bu nedenle, Label örnekler özelliğini olarak ve Label.Text özelliğini bir HTML dizesi olarak Htmlayarlayarak Label.TextType HTML'yi görüntüleyebilir:
Label label = new Label
{
Text = "This is <strong style=\"color:red\">HTML</strong> text.",
TextType = TextType.Html
};
Yukarıdaki örnekte, HTML'deki çift tırnak karakterlerinin simgesi kullanılarak kaçış karakterine \ sahip olması gerekir.
XAML'de VE simgelerinden kaçış < > nedeniyle HTML dizeleri okunamaz hale gelebilir:
<Label Text="This is <strong style="color:red">HTML</strong> text."
TextType="Html" />
Alternatif olarak, daha fazla okunabilirlik için HTML bir CDATA bölümde çizili olabilir:
<Label TextType="Html">
<![CDATA[
This is <strong style="color:red">HTML</strong> text.
]]>
</Label>
Bu örnekte özelliği, Label.Text bölümünde çizili html dizesine CDATA ayarlanmıştır. Özelliği sınıfı için Label olduğundan Text bu ContentProperty işe yarar.
Aşağıdaki ekran görüntüleri, görüntülenen bir Label HTML'yi gösterir:

Önemli
içinde Label HTML görüntüleme, temel alınan platform tarafından desteklenen HTML etiketleriyle sınırlıdır.
Biçimlendirilmiş metin
Etiketler, aynı görünümde birden çok yazı tipi ve renk içeren metin sunumuna izin veren bir FormattedText özelliği kullanıma sunar.
FormattedText özelliği, özelliği aracılığıyla Spans ayarlanan bir veya daha fazla Span örneği oluşturan türündedirFormattedString. Görsel görünümü ayarlamak için aşağıdaki Span özellikler kullanılabilir:
BackgroundColor– span arka planının rengi.CharacterSpacing, türündekidouble, metnin karakterleriSpanarasındaki aralıktır.Font– span içindeki metnin yazı tipi.FontAttributes– span içindeki metnin yazı tipi öznitelikleri.FontFamily– span içindeki metnin yazı tipinin ait olduğu yazı tipi ailesi.FontSize– span içindeki metnin yazı tipinin boyutu.ForegroundColor– span içindeki metnin rengi. Bu özellik kullanımdan kaldırıldı ve özelliğiyleTextColordeğiştirildi.LineHeight- yayılma alanının varsayılan çizgi yüksekliğine uygulanacak çarpan. Daha fazla bilgi için bkz . Çizgi Yüksekliği.Style– span'a uygulanacak stil.Text– yayılma alanının metni.TextColor– span içindeki metnin rengi.TextDecorations- yayılmadaki metne uygulanacak süslemeler. Daha fazla bilgi için bkz . Metin Süslemeleri.
BackgroundColor, Textve Text bağlanabilir özellikleri varsayılan bağlama moduna OneWaysahiptir. Bu bağlama modu hakkında daha fazla bilgi için Bağlama Modu kılavuzunda Varsayılan Bağlama Modu'na bakın.
Ayrıca özelliği, GestureRecognizers üzerinde Spanhareketlere yanıt verecek bir hareket tanıyıcı koleksiyonu tanımlamak için kullanılabilir.
Not
HTML'yi bir Spaniçinde görüntülemek mümkün değildir.
Aşağıdaki XAML örneği üç Span örnekten oluşan bir FormattedText özelliği gösterir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TextSample.LabelPage"
Title="Label Demo - XAML">
<StackLayout Padding="5,10">
...
<Label LineBreakMode="WordWrap">
<Label.FormattedText>
<FormattedString>
<Span Text="Red Bold, " TextColor="Red" FontAttributes="Bold" />
<Span Text="default, " Style="{DynamicResource BodyStyle}">
<Span.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapCommand}" />
</Span.GestureRecognizers>
</Span>
<Span Text="italic small." FontAttributes="Italic" FontSize="Small" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</ContentPage>
Eşdeğer C# kodu:
public class LabelPageCode : ContentPage
{
public LabelPageCode ()
{
var layout = new StackLayout{ Padding = new Thickness (5, 10) };
...
var formattedString = new FormattedString ();
formattedString.Spans.Add (new Span{ Text = "Red bold, ", ForegroundColor = Color.Red, FontAttributes = FontAttributes.Bold });
var span = new Span { Text = "default, " };
span.GestureRecognizers.Add(new TapGestureRecognizer { Command = new Command(async () => await DisplayAlert("Tapped", "This is a tapped Span.", "OK")) });
formattedString.Spans.Add(span);
formattedString.Spans.Add (new Span { Text = "italic small.", FontAttributes = FontAttributes.Italic, FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)) });
layout.Children.Add (new Label { FormattedText = formattedString });
this.Content = layout;
}
}
Önemli
özelliğini Text Span veri bağlama aracılığıyla ayarlayabilirsiniz. Daha fazla bilgi için bkz. Veri Bağlama.
bir Span öğesinin span'ın GestureRecognizers koleksiyonuna eklenen tüm hareketlere de yanıt verebileceğini unutmayın. Örneğin, yukarıdaki kod örneklerinde ikincisine Span bir TapGestureRecognizer eklenmiştir. Bu nedenle, bu Span dokunulduğunda TapGestureRecognizer özelliği tarafından Command tanımlanan yürüterek ICommand yanıt verir. Hareket tanıyıcıları hakkında daha fazla bilgi için bkz Xamarin.Forms . Hareketler.
Aşağıdaki ekran görüntüleri özelliği üç Span örneğe ayarlamanın FormattedString sonucunu gösterir:

Satır yüksekliği
ve öğesinin Label Span dikey yüksekliği, özelliği veya Span.LineHeight double değeri ayarlanarak Label.LineHeight özelleştirilebilir. iOS ve Android'de bu değerler özgün satır yüksekliğinin çarpanlarıdır ve Evrensel Windows Platformu (UWP) Label.LineHeight özellik değeri etiket yazı tipi boyutunun çarpanıdır.
Not
- iOS'ta ve
Span.LineHeightözellikleri,Label.LineHeighttek bir satıra sığan metnin ve birden çok satıra kaydıran metnin satır yüksekliğini değiştirir. - Android'de
Label.LineHeightveSpan.LineHeightözellikleri yalnızca birden çok satıra kaydıran metnin satır yüksekliğini değiştirir. - UWP'de özelliği,
Label.LineHeightbirden çok satıra kaydırılmış metnin satır yüksekliğini değiştirir ve özelliğinSpan.LineHeighthiçbir etkisi yoktur.
Aşağıdaki XAML örneği, bir Labelüzerinde özelliğinin ayarlanmasını LineHeight gösterir:
<Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus."
LineBreakMode="WordWrap"
LineHeight="1.8" />
Eşdeğer C# kodu:
var label =
{
Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus.", LineBreakMode = LineBreakMode.WordWrap,
LineHeight = 1.8
};
Aşağıdaki ekran görüntüleri özelliği 1.8 olarak ayarlamanın Label.LineHeight sonucunu gösterir:

Aşağıdaki XAML örneği, bir Spanüzerinde özelliğinin ayarlanmasını LineHeight gösterir:
<Label LineBreakMode="WordWrap">
<Label.FormattedText>
<FormattedString>
<Span Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tincidunt sem. Phasellus mollis sit amet turpis in rutrum. Sed aliquam ac urna id scelerisque. "
LineHeight="1.8"/>
<Span Text="Nullam feugiat sodales elit, et maximus nibh vulputate id."
LineHeight="1.8" />
</FormattedString>
</Label.FormattedText>
</Label>
Eşdeğer C# kodu:
var formattedString = new FormattedString();
formattedString.Spans.Add(new Span
{
Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tincidunt sem. Phasellus mollis sit amet turpis in rutrum. Sed aliquam ac urna id scelerisque. ",
LineHeight = 1.8
});
formattedString.Spans.Add(new Span
{
Text = "Nullam feugiat sodales elit, et maximus nibh vulputate id.",
LineHeight = 1.8
});
var label = new Label
{
FormattedText = formattedString,
LineBreakMode = LineBreakMode.WordWrap
};
Aşağıdaki ekran görüntüleri özelliği 1.8 olarak ayarlamanın Span.LineHeight sonucunu gösterir:

Doldurma
Doldurma, bir öğe ile alt öğeleri arasındaki boşluğu temsil eder ve öğeyi kendi içeriğinden ayırmak için kullanılır. Doldurma, özelliği bir Thickness değere ayarlanarak Label.Padding örneklere uygulanabilirLabel:
<Label Padding="10">
<Label.FormattedText>
<FormattedString>
<Span Text="Lorem ipsum" />
<Span Text="dolor sit amet." />
</FormattedString>
</Label.FormattedText>
</Label>
Eşdeğer C# kodu:
FormattedString formattedString = new FormattedString();
formattedString.Spans.Add(new Span
{
Text = "Lorem ipsum"
});
formattedString.Spans.Add(new Span
{
Text = "dolor sit amet."
});
Label label = new Label
{
FormattedText = formattedString,
Padding = new Thickness(20)
};
Önemli
iOS'ta, özelliği ayarlayan Padding bir Label oluşturulduğunda doldurma uygulanır ve doldurma değeri daha sonra güncelleştirilebilir. Ancak, özelliği ayarlamayan Padding bir Label oluşturulduğunda, daha sonra ayarlamayı denemenin hiçbir etkisi olmaz.
Android ve Evrensel Windows Platformu, Padding özellik değeri oluşturulduğunda veya daha sonra belirtilebilirLabel.
Doldurma hakkında daha fazla bilgi için bkz . Kenar Boşlukları ve Doldurma.
Köprüler
ve Span örnekleri tarafından Label görüntülenen metin, aşağıdaki yaklaşımla köprülere dönüştürülebilir:
- veya
SpanöğesininTextColorLabelveTextDecorationözelliklerini ayarlayın. TapGestureRecognizerözelliği bir öğesineGestureRecognizersbağlanan veCommandParameterözelliği açılacak URL'yiCommandiçeren veyaSpankoleksiyonunaLabelbirICommandekleyin.ICommandtarafındanTapGestureRecognizeryürütülecek öğesini tanımlayın.- tarafından
ICommandyürütülecek kodu yazın.
Aşağıdaki kod örneği, içeriği birden çok Span örnekten ayarlanan bir Label örneği gösterir:
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="Alternatively, click " />
<Span Text="here"
TextColor="Blue"
TextDecorations="Underline">
<Span.GestureRecognizers>
<TapGestureRecognizer Command="{Binding TapCommand}"
CommandParameter="https://learn.microsoft.com/xamarin/" />
</Span.GestureRecognizers>
</Span>
<Span Text=" to view Xamarin documentation." />
</FormattedString>
</Label.FormattedText>
</Label>
Bu örnekte, birinci ve üçüncü Span örnekler metinden oluşurken, ikincisi Span uygulanabilir bir köprüyü temsil eder. Metin rengi mavi olarak ayarlanmıştır ve altı çizili metin dekorasyonu vardır. Bu, aşağıdaki ekran görüntülerinde gösterildiği gibi köprü görünümünü oluşturur:
Köprüye dokunulduğunda TapGestureRecognizer , özelliği tarafından tanımlanan öğesini yürüterek ICommand yanıt verir Command . Ayrıca, özelliği tarafından CommandParameter belirtilen URL parametresine geçirilir ICommand .
XAML sayfasının arka planındaki kod, TapCommand uygulamayı içerir:
public partial class MainPage : ContentPage
{
// Launcher.OpenAsync is provided by Xamarin.Essentials.
public ICommand TapCommand => new Command<string>(async (url) => await Launcher.OpenAsync(url));
public MainPage()
{
InitializeComponent();
BindingContext = this;
}
}
, TapCommand özellik değerini parametre olarak geçirerek TapGestureRecognizer.CommandParameter yöntemini yürütürLauncher.OpenAsync. Launcher.OpenAsync yöntemi tarafından Xamarin.Essentialssağlanır ve URL'yi bir web tarayıcısında açar. Bu nedenle, genel etki, köprü sayfada dokunulduğunda bir web tarayıcısının görünmesi ve köprüyle ilişkili URL'ye gidiliyor olmasıdır.
Yeniden kullanılabilir köprü sınıfı oluşturma
Köprü oluşturmaya yönelik önceki yaklaşım, uygulamanızda her köprüye ihtiyaç duymanız halinde yinelenen kodlar yazmayı gerektirir. Ancak, hem Label ve sınıfları oluşturmak HyperlinkLabel için alt sınıflandırılabilir ve HyperlinkSpan sınıflar, hareket tanıyıcı ve metin biçimlendirme Span kodu oraya eklenir.
Aşağıdaki kod örneği bir HyperlinkSpan sınıfı gösterir:
public class HyperlinkSpan : Span
{
public static readonly BindableProperty UrlProperty =
BindableProperty.Create(nameof(Url), typeof(string), typeof(HyperlinkSpan), null);
public string Url
{
get { return (string)GetValue(UrlProperty); }
set { SetValue(UrlProperty, value); }
}
public HyperlinkSpan()
{
TextDecorations = TextDecorations.Underline;
TextColor = Color.Blue;
GestureRecognizers.Add(new TapGestureRecognizer
{
// Launcher.OpenAsync is provided by Xamarin.Essentials.
Command = new Command(async () => await Launcher.OpenAsync(Url))
});
}
}
HyperlinkSpan sınıfı, bir Url özelliği ve ilişkili BindablePropertyöğesini tanımlar ve oluşturucu köprü görünümünü ve TapGestureRecognizer köprüye dokunulduğunda yanıt verecek olan öğesini ayarlar. öğesine HyperlinkSpan dokunulduğundaTapGestureRecognizer, özelliği tarafından Url belirtilen URL'yi bir web tarayıcısında açmak için yöntemini yürüterek Launcher.OpenAsync yanıt verir.
sınıfı, HyperlinkSpan XAML'ye sınıfının bir örneği eklenerek kullanılabilir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:HyperlinkDemo"
x:Class="HyperlinkDemo.MainPage">
<StackLayout>
...
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="Alternatively, click " />
<local:HyperlinkSpan Text="here"
Url="https://learn.microsoft.com/appcenter/" />
<Span Text=" to view AppCenter documentation." />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</ContentPage>
Stil etiketleri
Önceki bölümlerde, örnek temelinde ayar Label ve Span özellikler ele alınmıştır. Ancak özellik kümeleri, bir veya birden çok görünüme tutarlı bir şekilde uygulanan tek bir stilde gruplandırılabilir. Bu, kodun okunabilirliğini artırabilir ve tasarım değişikliklerinin uygulanmasını kolaylaştırabilir. Daha fazla bilgi için bkz . Stiller.
