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 .

Xamarin.Forms Samouczek dotyczący etykiet

Tworzenie etykiety

Zmienianie wyglądu

Prezentowanie sformatowanego tekstu

Gratulacje!

Następne kroki

Xamarin.Forms Samouczek dotyczący etykiet

Tworzenie etykiety

Zmienianie wyglądu

Prezentowanie sformatowanego tekstu

Gratulacje!

Następne kroki

Pokrewne łącza