Xamarin.Forms Samouczek dotyczący etykiet

Artykuł
Developer (Początkujący)
Czas do ukończenia: 7 min

Zanim podejmiesz próbę ukończenia tego samouczka, musisz pomyślnie ukończyć następujące szkolenia:

Skompiluj swój pierwszy Xamarin.Forms przewodnik Szybki start dotyczący aplikacji .
Samouczek dotyczący obiektu StackLayout.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

Utwórz element Xamarin.FormsLabel w języku XAML.
Zmiana wyglądu obiektu Label.
Prezentowanie tekstu w pojedynczym obiekcie Label o wielu formatach.

Użyjesz programu Visual Studio 2019 lub Visual Studio dla komputerów Mac, aby utworzyć prostą aplikację, która pokazuje, jak wyświetlić tekst w elemencie Label. Na poniższych zrzutach ekranu przedstawiono ostateczną wersję aplikacji:

Użyjesz również Przeładowywanie na gorąco XAML, Xamarin.Forms aby zobaczyć zmiany interfejsu użytkownika bez ponownego kompilowania aplikacji.

Tworzenie etykiety

Pozostały czas: 6 min

Program Visual Studio
Visual Studio dla komputerów Mac

Do ukończenia tego samouczka jest potrzebny program Visual Studio 2019 (najnowsza wersja) z zainstalowanym pakietem roboczym Opracowywanie aplikacji mobilnych za pomocą środowiska .NET. Ponadto będzie potrzebny sparowany komputer Mac w celu kompilowania aplikacji samouczka w systemie iOS. Aby uzyskać informacje na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin. Aby uzyskać informacje na temat łączenia programu Visual Studio 2019 z hostem kompilacji Mac, zobacz Parowanie z komputerem Mac w celu opracowywania aplikacji platformy Xamarin.iOS.

Uruchom program Visual Studio i utwórz nową pustą Xamarin.Forms aplikację o nazwie LabelTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę LabelTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.
W Eksploratorze rozwiązań w projekcie LabelTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:
```
<?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>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z obiektu Label w obiekcie StackLayout. Właściwość Label.Text określa wyświetlany tekst, a właściwość HorizontalOptions określa, czy element Label będzie wyśrodkowany w poziomie.
Na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android:

Do ukończenia tego samouczka jest potrzebny program Visual Studio dla komputerów Mac (najnowsza wersja) z zainstalowaną obsługą platform iOS i Android. Ponadto będzie również potrzebne środowisko Xcode (najnowsza wersja). Aby uzyskać więcej informacji na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin.

Uruchom Visual Studio dla komputerów Mac i utwórz nową pustą Xamarin.Forms aplikację o nazwie LabelTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę LabelTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.
W okienku rozwiązania w projekcie LabelTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:
```
<?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>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z obiektu Label w obiekcie StackLayout. Właściwość Label.Text określa wyświetlany tekst, a właściwość HorizontalOptions określa, czy tekst będzie wyśrodkowany w poziomie.
Na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Zmienianie wyglądu

Pozostały czas: 4 min

Program Visual Studio
Visual Studio dla komputerów Mac

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Label, aby zmienić jego wygląd:
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
Ten kod ustawia właściwości, które zmieniają wygląd obiektu Label. Właściwość TextColor ustawia kolor tekstu obiektu Label. Właściwość FontAttributes ustawia czcionkę etykiety na kursywę, a właściwość FontSize ustawia rozmiar czcionki. Ponadto dekoracja tekstu w postaci podkreślenia jest stosowana do obiektu Label przez ustawienie jego właściwości TextDecorations i jest wyśrodkowywana w poziomie przez ustawienie właściwości HorizontalOptions na Center.
Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android. Zwróć uwagę, że wygląd obiektu Label uległ zmianie:

Aby uzyskać więcej informacji na temat ustawiania Label wyglądu, zobacz Xamarin.Forms przewodnik Etykieta .

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Label, aby zmienić jego wygląd:
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
Ten kod ustawia właściwości, które zmieniają wygląd obiektu Label. Właściwość TextColor ustawia kolor tekstu obiektu Label. Właściwość FontAttributes ustawia czcionkę etykiety na kursywę, a właściwość FontSize ustawia rozmiar czcionki. Ponadto dekoracja tekstu w postaci podkreślenia jest stosowana do obiektu Label przez ustawienie jego właściwości TextDecorations i jest wyśrodkowywana w poziomie przez ustawienie właściwości HorizontalOptions na Center.
Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android. Zwróć uwagę, że wygląd obiektu Label uległ zmianie:

Aby uzyskać więcej informacji na temat ustawiania Label wyglądu, zobacz Xamarin.Forms przewodnik Etykieta .

Prezentowanie sformatowanego tekstu

Pozostały czas: 2 min

Program Visual Studio
Visual Studio dla komputerów Mac

W pliku MainPage.xaml zmodyfikuj deklarację Label, aby zaprezentować tekst, który używa wielu formatów, w jednym elemencie Label.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
Ten kod wyświetla tekst w jednym obiekcie Label, który używa wielu formatów. Tekst w pierwszym obiekcie Span jest wyświetlany przy użyciu formatowania ustawionego w obiekcie Label, natomiast tekst w drugim i trzecim wystąpieniu obiektu Span jest wyświetlany przy użyciu formatowania ustawionego w obiekcie Label i dodatkowego formatowania ustawionego w każdym obiekcie Span.

Uwaga

Właściwość FormattedText jest typu FormattedString, który składa się z co najmniej jednego wystąpienia obiektu Span.
Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android. Zwróć uwagę, że wygląd obiektu Label uległ zmianie:

Zatrzymaj aplikację w programie Visual Studio.

Aby uzyskać więcej informacji na temat ustawiania Span wyglądu, zobacz Sformatowany tekst w przewodniku Xamarin.Forms Etykieta .

W pliku MainPage.xaml zmodyfikuj deklarację Label, aby zaprezentować tekst, który używa wielu formatów, w jednym elemencie Label.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
Ten kod wyświetla tekst w jednym obiekcie Label, który używa wielu formatów. Tekst w pierwszym obiekcie Span jest wyświetlany przy użyciu formatowania ustawionego w obiekcie Label, natomiast tekst w drugim i trzecim wystąpieniu obiektu Span jest wyświetlany przy użyciu formatowania ustawionego w obiekcie Label i dodatkowego formatowania ustawionego w każdym obiekcie Span.

Uwaga

Właściwość FormattedText jest typu FormattedString, który składa się z co najmniej jednego wystąpienia obiektu Span.
Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android. Zwróć uwagę, że wygląd obiektu Label uległ zmianie:

Zatrzymaj aplikację w programie Visual Studio dla komputerów Mac.

Aby uzyskać więcej informacji na temat ustawiania Span wyglądu, zobacz Sformatowany tekst w przewodniku Xamarin.Forms Etykieta .

Udostępnij za pośrednictwem

Xamarin.Forms Samouczek dotyczący etykiet

Tworzenie etykiety

Zmienianie wyglądu

Prezentowanie sformatowanego tekstu

Gratulacje!

Następne kroki

Udostępnij za pośrednictwem

Xamarin.Forms Samouczek dotyczący etykiet

Tworzenie etykiety

Zmienianie wyglądu

Prezentowanie sformatowanego tekstu

Gratulacje!

Następne kroki

Pokrewne łącza