Xamarin.Forms Popisek

Stáhnout ukázku Stažení ukázky

Zobrazení textu v

Zobrazení Label slouží k zobrazení textu, a to jak jednořádkové, tak víceřádkové. Popisky mohou mít textové dekorování, barevný text a používat vlastní písma (rodiny, velikosti a možnosti).

Dekorování textu

Podtržení a přeškrtnutí textových dekorací lze použít u instancí nastavením vlastnosti na Label jeden nebo více členů Label.TextDecorationsTextDecorations výčtu:

  • None
  • Underline
  • Strikethrough

Následující příklad XAML ukazuje nastavení Label.TextDecorations vlastnosti:

<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" />

Ekvivalentní kód jazyka C# je:

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 };

Následující snímky obrazovky ukazují TextDecorations členy výčtu použité na Label instance:

Popisky s dekorací textu

Poznámka

Na instance lze použít také Span dekorování textu. Další informace o třídě Span najdete v tématu Span.

Transformace textu

Může transformovat velikost kaskádového textu uloženého ve vlastnosti nastavením vlastnosti LabelText na hodnotu TextTransformTextTransform výčtu. Tento výčet má čtyři hodnoty:

  • None označuje, že text nebude transformován.
  • Default označuje, že se použije výchozí chování platformy. Toto je výchozí hodnota TextTransform vlastnosti .
  • Lowercase označuje, že text bude transformován na malá písmena.
  • Uppercase označuje, že text bude transformován na velká písmena.

Následující příklad ukazuje transformaci textu na velká písmena:

<Label Text="This text will be displayed in uppercase."
       TextTransform="Uppercase" />

Ekvivalentní kód jazyka C# je:

Label label = new Label
{
    Text = "This text will be displayed in uppercase.",
    TextTransform = TextTransform.Uppercase
};

Mezery mezi znaky

Mezery mezi znaky lze u Label instancí použít nastavením vlastnosti na Label.CharacterSpacingdouble hodnotu:

<Label Text="Character spaced text"
       CharacterSpacing="10" />

Ekvivalentní kód jazyka C# je:

Label label = new Label { Text = "Character spaced text", CharacterSpacing = 10 };

Výsledkem je, že znaky v textu zobrazeném v jsou od sebe umístěné jednotky LabelCharacterSpacing nezávislé na zařízení.

Nové řádky

Existují dvě hlavní techniky pro vynucení textu v Label souboru na nový řádek, z XAML:

  1. Použijte znak odsou čárky Unicode, což je & "#10;".
  2. Zadejte text pomocí syntaxe elementu vlastnosti.

Následující kód ukazuje příklad obou technik:

<!-- Unicode line feed character -->
<Label Text="First line &#10; Second line" />

<!-- Property element syntax -->
<Label>
    <Label.Text>
        First line
        Second line
    </Label.Text>
</Label>

V jazyce C# lze text vynucovat na nový řádek pomocí znaku "\n":

Label label = new Label { Text = "First line\nSecond line" };

Barvy

Popisky lze nastavit tak, aby se k použití vlastní barvy textu Xamarin_Forms _Label_TextColor data-linktype="absolute-path">TextColor vlastnost.

Je potřeba zvláštní pozornost, abyste zajistili, že barvy budou použitelné na každé platformě. Vzhledem k tomu, že každá platforma má jiné výchozí hodnoty pro barvy textu a pozadí, budete muset pečlivě vybrat výchozí nastavení, které na každé z nich funguje.

Následující příklad XAML nastaví barvu textu Label :

<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>

Ekvivalentní kód jazyka C# je:

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;
    }
}

Následující snímky obrazovky ukazují výsledek nastavení TextColor vlastnosti:

Příklad vlastnosti TextColor popisku

Další informace o barvách najdete v tématu Barvy.

Písma

Další informace o zadávání písem v najdete v Label tématu Label.

Zkrácení a zabalení

Popisky lze nastavit pro zpracování textu, který se nevejde na jeden řádek jedním z několika způsobů a je zveřejněný LineBreakMode vlastností . LineBreakMode je výčet s následujícími hodnotami:

  • HeadTruncation – zkrátí hlavičku textu a zobrazí konec.
  • CharacterWrap – zabalí text na nový řádek na hranici znaku.
  • MiddleTruncation – zobrazí začátek a konec textu a prostřední nahrazení třemi tečkami.
  • NoWrap – nezalamuje text a zobrazuje jenom tolik textu, kolik se vejde na jeden řádek.
  • TailTruncation – zobrazí začátek textu a zkrátí konec.
  • WordWrap – zalamuje text na hranici slova.

Zobrazení konkrétního počtu řádků

Počet řádků zobrazených objektem lze zadat nastavením Label vlastnosti na Label.MaxLinesint hodnotu:

  • Pokud je hodnota -1, což je její výchozí hodnota, respektuje hodnotu MaxLinesLabel vlastnosti Xamarin_Forms MaxLines _Label_LineBreakMode" data-linktype="absolute-path">tak, aby se buď zobrazují pouze jeden řádek, případně zkrácený, nebo všechny řádky se LineBreakMode všemi texty.
  • Pokud MaxLines je hodnota 0, Label nezobrazí se .
  • Pokud je hodnota 1, je výsledek stejný jako nastavení MaxLines Xamarin_Forms MaxLines _Label_LineBreakMode" data-linktype="absolute-path">vlastnost LineBreakMode na , , NoWrap nebo HeadTruncationMiddleTruncationTailTruncation . Bude ale respektovat hodnotu vlastnosti Label Xamarin_Forms Label _Label_LineBreakMode" data-linktype="absolute-path">s ohledem na umístění tří trén, pokud LineBreakMode je k dispozici.
  • Pokud je hodnota větší než 1, zobrazí se až zadaný počet řádků >při zachování hodnoty vlastnosti MaxLinesLabel Xamarin_Forms MaxLines _Label_LineBreakMode" data-linktype="absolutní_cesta">s ohledem na umístění tří LineBreakMode trén, pokud je k dispozici. Nastavení vlastnosti na hodnotu větší než 1 ale nemá žádný vliv, pokud je vlastnost MaxLines Xamarin_Forms MaxLines _Label_LineBreakMode" data-linktype="absolute-path">LineBreakMode nastavená na NoWrap .

Následující příklad XAML ukazuje nastavení MaxLines vlastnosti pro Label :

<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" />

Ekvivalentní kód jazyka C# je:

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
};

Následující snímky obrazovky ukazují výsledek nastavení vlastnosti na hodnotu 2, pokud je text dostatečně dlouhý, aby zabírá více MaxLines než 2 řádky:

Příklad MaxLines popisku

Zobrazení HTML

Třída má vlastnost , která určuje, jestli má instance zobrazit Label prostý TextTypeLabel text, nebo text HTML. Tato vlastnost by měla být nastavena na jeden ze členů TextType výčtu:

  • Text označuje, Label že se zobrazí prostý text a je výchozí hodnotou Label.TextType vlastnosti .
  • Html označuje, že Label se zobrazí text HTML.

Instance tak Label mohou zobrazit kód HTML nastavením vlastnosti na a vlastnost na řetězec Label.TextTypeHtmlLabel.Text HTML:

Label label = new Label
{
    Text = "This is <strong style=\"color:red\">HTML</strong> text.",
    TextType = TextType.Html
};

V příkladu výše musí být znaky dvojitých uvozovek v HTML uvozeny \ symbolem .

V jazyce XAML se řetězce HTML stávají nečitelnými díky dalšímu ukončování < symbolů > a :

<Label Text="This is &lt;strong style=&quot;color:red&quot;&gt;HTML&lt;/strong&gt; text."
       TextType="Html"  />

Pro lepší čitelnost můžete kód HTML také v oddílu CDATA načíst:

<Label TextType="Html">
    <![CDATA[
    This is <strong style="color:red">HTML</strong> text.
    ]]>
</Label>

V tomto příkladu Label.Text je vlastnost nastavená na řetězec HTML, který je v oddílu CDATA . To funguje, Text protože vlastnost je pro třídu ContentPropertyLabel .

Následující snímky obrazovky Label zobrazující kód HTML:

Snímky obrazovky s popiskem zobrazující HTML v iOSu a Androidu

Důležité

Zobrazení kódu HTML v je omezené na značky HTML podporované Label podkladovou platformou.

Formátovaný text

Popisky zpřístupňuje Xamarin_Forms _Label_FormattedText" data-linktype="absolute-path">, která umožňuje prezentaci textu s více písmy a barvami ve FormattedText stejném zobrazení.

Vlastnost je typu , který se skládá z jedné nebo více instancí a je nastavená prostřednictvím FormattedTextFormattedString Xamarin_Forms SpanFormattedText _FormattedString_Spans" data-linktype="absolute-path">Spans vlastnost. K nastavení Span vzhledu lze použít následující vlastnosti:

Xamarin_Forms _Span_BackgroundColor "data-LINKTYPE =" absolutní cesta ">BackgroundColor Xamarin_Forms BackgroundColor _Span_Text data-linktype =" absolutní cesta ">Text a Xamarin_Forms _Span_Text " data-LINKTYPE = "absolutní cesta" >vlastnosti s možností Text vazby mají výchozí režim vazby OneWay . Další informace o tomto režimu vazby naleznete v tématu výchozí režim vazby v průvodci režimem vazby .

Kromě toho lze pomocí Xamarin_Forms _GestureElement_GestureRecognizers "data-LINKTYPE =" absolutní cesta ">GestureRecognizers vlastnost použít k definování kolekce pro rozpoznávání gest, které budou reagovat na gesta na Span .

Poznámka

Není možné zobrazit kód HTML v Span .

Následující příklad XAML ukazuje FormattedText vlastnost, která se skládá ze tří Span instancí:

<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>

Ekvivalentní kód jazyka C#:

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;
    }
}

Důležité

Vlastnost Xamarin_Forms _Span_Text data-LINKTYPE = "absolutní cesta" >TextSpan lze nastavit prostřednictvím datové vazby. Další informace najdete v článku, který se týká datových vazeb.

Všimněte si, že Span může také reagovat na všechna gesta, která jsou přidána do Xamarin_Forms rozsahu Span _GestureElement_GestureRecognizers "data-LINKTYPE =" absolutní cesta ">GestureRecognizers kolekce. Například TapGestureRecognizer bylo přidáno do druhé Span v předchozích příkladech kódu. Proto pokud je tato možnost Span vybrána, TapGestureRecognizer bude reagovat spuštěním ICommand definovaného Span vlastností Xamarin_Forms _TapGestureRecognizer_Command "data-LINKTYPE =" absolutní cesta ">Command . Další informace o rozpoznávání gest naleznete v tématu Xamarin.Forms Gestures .

Následující snímky obrazovky ukazují výsledek nastavení FormattedString vlastnosti na tři Span instance:

Příklad FormattedText popisku

Výška řádku

Svislou výšku Label a a Span lze upravit nastavením Xamarin_Forms Label _Label_LineHeight "data-LINKTYPE =" absolutní cesta ">Label.LineHeight vlastnost nebo Xamarin_Forms Span _Span_LineHeight" data-LINKTYPE = "absolutní cesta" >Span.LineHeight na double hodnotu. v systémech iOS a Android jsou tyto hodnoty násobiteli původní výšky řádku a na Univerzální platforma Windows (UWP) Label.LineHeight hodnota vlastnosti je násobitel velikosti písma popisku.

Poznámka

Následující příklad XAML demonstruje nastavení Xamarin_Forms _Label_LineHeight "data-LINKTYPE =" absolutní cesta ">LineHeight vlastnost v Label :

<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" />

Ekvivalentní kód jazyka C#:

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
};

Následující snímky obrazovky ukazují výsledek nastavení Xamarin_Forms _Label_LineHeight data-LINKTYPE = "absolutní cesta" >Label.LineHeight vlastnost na 1,8:

Příklad LineHeight popisku

Následující příklad XAML demonstruje nastavení Xamarin_Forms _Span_LineHeight "data-LINKTYPE =" absolutní cesta ">LineHeight vlastnost v Span :

<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>

Ekvivalentní kód jazyka C#:

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
};

Následující snímky obrazovky ukazují výsledek nastavení Xamarin_Forms _Span_LineHeight data-LINKTYPE = "absolutní cesta" >Span.LineHeight vlastnost na 1,8:

Příklad LineHeight rozpětí

Odsazení

Odsazení představuje prostor mezi prvkem a jeho podřízenými elementy a slouží k oddělení elementu od jeho vlastního obsahu. Odsazení lze u instancí použít Label nastavením Label.Padding vlastnosti na Thickness hodnotu:

<Label Padding="10">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Lorem ipsum" />
            <Span Text="dolor sit amet." />
        </FormattedString>
    </Label.FormattedText>
</Label>

Ekvivalentní kód jazyka C#:

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)
};

Důležité

V systému iOS, když Label je vytvořen a který nastavuje Padding vlastnost, bude použito odsazení a hodnota odsazení může být aktualizována později. Pokud Label je však vytvořen objekt, který vlastnost nenastaví Padding , pokus o jeho nastavení později nebude mít žádný vliv.

v androidu a Univerzální platforma Windows Padding lze zadat hodnotu vlastnosti při Label vytvoření nebo později.

Další informace o odsazení naleznete v tématu okraje a odsazení.

Text zobrazený nástrojem Label a Span instancemi lze přepínat na hypertextové odkazy s následujícím přístupem:

  1. Nastavte TextColor vlastnosti a TextDecoration vlastností Label nebo Span .
  2. Přidejte TapGestureRecognizer do Xamarin_Forms TapGestureRecognizer _GestureElement_GestureRecognizers "data-LINKTYPE =" absolutní cesta ">GestureRecognizers kolekci Label nebo Span , jejichž Xamarin_Forms _TapGestureRecognizer_Command" data-LINKTYPE = "absolutní cesta" >Command vlastnost se sváže s a ICommand jejíž Xamarin_Forms _TapGestureRecognizer_CommandParameter GestureRecognizers vlastnost "data-LINKTYPE =" absolutní cesta ">CommandParameter obsahuje adresu URL, která se má otevřít.
  3. Definujte ICommand , který bude spuštěn TapGestureRecognizer .
  4. Napište kód, který bude spuštěn ICommand .

Následující příklad kódu, který je povedený z ukázky ukázky hypervazby , zobrazuje, který obsah je nastaven z více Span instancí:

<Label>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Alternatively, click " />
            <Span Text="here"
                  TextColor="Blue"
                  TextDecorations="Underline">
                <Span.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding TapCommand}"
                                          CommandParameter="https://docs.microsoft.com/xamarin/" />
                </Span.GestureRecognizers>
            </Span>
            <Span Text=" to view Xamarin documentation." />
        </FormattedString>
    </Label.FormattedText>
</Label>

V tomto příkladu první a třetí Span instance obsahují text, zatímco druhý Span představuje hypertextový odkaz, který je klepnutí na sebe. Má barvu textu nastavenou na modrou a obsahuje dekoraci textu podtržení. Tím se vytvoří vzhled hypertextového odkazu, jak je znázorněno na následujících snímcích obrazovky:

Hypertextové

Když se hypertextový odkaz klepne, TapGestureRecognizer bude reagovat tím, že se vykoná ICommand jeho Xamarin_Forms TapGestureRecognizer _TapGestureRecognizer_Command "data-LINKTYPE =" absolutní cesta ">Command vlastnost. Kromě toho adresa URL určená Xamarin_Forms _TapGestureRecognizer_CommandParameter "data-LINKTYPE =" absolutní cesta ">CommandParameter vlastnost bude předána ICommand jako parametr.

Kód na pozadí stránky XAML obsahuje TapCommand implementaci:

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;
    }
}

TapCommandSpustí Launcher.OpenAsync metodu a předá Xamarin_Forms TapCommand _TapGestureRecognizer_CommandParameter "data-LINKTYPE =" absolutní cestu ">TapGestureRecognizer.CommandParameter hodnotu vlastnosti jako parametr. Launcher.OpenAsyncMetoda je poskytována nástrojem Xamarin.Essentials a otevře adresu URL ve webovém prohlížeči. Proto je celkový vliv na to, že když se hypertextový odkaz na stránce klepne, zobrazí se webový prohlížeč a adresa URL přidružená k hypertextovému odkazu přejde na.

Předchozí přístup k vytvoření hypertextového odkazu vyžaduje zápis opakujícího se kódu pokaždé, když budete vyžadovat hypertextový odkaz v aplikaci. LabelTřídy a však Span mohou být vytříděné pro vytváření HyperlinkLabelHyperlinkSpan tříd a třídy, pomocí nástroje pro rozpoznávání gest a kódu pro formátování textu, který se tam přidal.

Následující příklad kódu, který je pořízen z ukázky ukázky hypertextových odkazů , zobrazuje třídu:

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))
        });
    }
}

HyperlinkSpanTřída definuje Url vlastnost a přidružená BindableProperty a konstruktor nastaví vzhled hypertextového odkazu a TapGestureRecognizer , který bude reagovat na klepnutí na hypertextový odkaz. Když HyperlinkSpan je klepnutím na tlačítko, TapGestureRecognizer bude reagovat spuštěním Launcher.OpenAsync metody pro otevření adresy URL určené Url vlastností ve webovém prohlížeči.

HyperlinkSpanTřídu lze spotřebovat přidáním instance třídy do XAML:

<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://docs.microsoft.com/appcenter/" />
                    <Span Text=" to view AppCenter documentation." />
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </StackLayout>
</ContentPage>

Popisky stylů

Předchozí části pokryly nastavení Label a Span vlastnosti jednotlivých instancí. Sady vlastností lze však seskupit do jednoho stylu, který je konzistentně použit pro jedno nebo více zobrazení. To může zvýšit čitelnost kódu a usnadnit implementaci úprav návrhu. Další informace najdete v tématu styly.