Учебник по Label в Xamarin.Forms

Статья
Developer (Начальный уровень)
7 мин до завершения

Прежде чем работать с этим учебником, вы должны выполнить:

Краткое руководство Создание первого Xamarin.Forms приложения.
Руководство по StackLayout.

В этом руководстве описано следующее:

Создайте Xamarin.FormsLabel в XAML.
Изменять внешний вид Label.
Представлять в одном Label текст, который имеет несколько форматов.

С помощью Visual Studio 2019 или Visual Studio для Mac вы создадите простое приложение, демонстрирующее, как отображать текст в Label. На следующих снимках экрана показано готовое приложение.

Вы также будете использовать Горячую перезагрузку XAML для Xamarin.Forms, чтобы просматривать изменения пользовательского интерфейса без перестроения приложения.

Создание Label

Осталось 6 мин

Visual Studio
Visual Studio для Mac

Для работы с этим руководством у вас должен быть последний выпуск Visual Studio 2019 с установленной рабочей нагрузкой Разработка мобильных приложений на .NET. Кроме того, вам потребуется компьютер Mac для сборки учебного приложения на iOS. Сведения об установке платформы Xamarin см. в статье Установка Xamarin. Сведения о подключении Visual Studio 2019 к узлу сборки Mac см. в статье Связывание с Mac при разработке для Xamarin.iOS.

Запустите Visual Studio и создайте пустое приложение Xamarin.Forms с именем LabelTutorial.

Внимание

Фрагменты кода на C# и XAML из этого руководства предполагают, что решение называется LabelTutorial. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого руководства в решение.

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.
В обозревателе решений дважды щелкните файл MainPage.xaml в проекте LabelTutorial, чтобы открыть его. В MainPage.xaml удалите весь код шаблона и замените его приведенным ниже кодом:
```
<?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>
```
Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из Label в StackLayout. Свойство Label.Text определяет текст, который отображается, а свойство HorizontalOptions указывает, что Label будет выравниваться по горизонтали по центру.
На панели инструментов Visual Studio нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном удаленном симуляторе iOS или эмуляторе Android.

Для работы с этим руководством вам нужно установить Visual Studio для Mac (последний выпуск) с поддержкой платформ Android и iOS. Кроме того, вам потребуется Xcode (последний выпуск). Дополнительные сведения об установке платформы Xamarin см. в статье Установка Xamarin.

Запустите Visual Studio для Mac и создайте пустое приложение Xamarin.Forms с именем LabelTutorial.

Внимание

Фрагменты кода на C# и XAML из этого руководства предполагают, что решение называется LabelTutorial. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого руководства в решение.

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.
На Панели решения дважды щелкните файл MainPage.xaml в проекте LabelTutorial, чтобы открыть его. В MainPage.xaml удалите весь код шаблона и замените его приведенным ниже кодом:
```
<?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>
```
Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из Label в StackLayout. Свойство Label.Text определяет текст, который отображается, а свойство HorizontalOptions указывает, что текст будет выравниваться по горизонтали по центру.
На панели инструментов Visual Studio для Mac нажмите кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном симуляторе iOS или эмуляторе Android:

Изменение внешнего вида

Осталось 4 мин

Visual Studio
Visual Studio для Mac

В MainPage.xaml измените объявление Label, чтобы изменить его внешний вид:
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
Этот код задает свойства, которые изменяют внешний вид Label. Свойство TextColor задает цвет текста Label. Свойство FontAttributes используется для применения курсива, а свойство FontSize задает размер шрифта. Кроме того, подчеркивание текста применяется к Label, при применении свойства TextDecorations, а чтобы центрировать его по горизонтали, необходимо придать свойству HorizontalOptions значение Center.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном удаленном симуляторе iOS или эмуляторе Android. Обратите внимание, что внешний вид Label изменился:

Дополнительные сведения о настройке внешнего вида Label см. в руководстве Label в Xamarin.Forms.

В MainPage.xaml измените объявление Label, чтобы изменить его внешний вид:
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
Этот код задает свойства, которые изменяют внешний вид Label. Свойство TextColor задает цвет текста Label. Свойство FontAttributes используется для применения курсива, а свойство FontSize задает размер шрифта. Кроме того, подчеркивание текста применяется к Label, при применении свойства TextDecorations, а чтобы центрировать его по горизонтали, необходимо придать свойству HorizontalOptions значение Center.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio для Mac кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном симуляторе iOS или эмуляторе Android. Обратите внимание, что внешний вид Label изменился:

Дополнительные сведения о настройке внешнего вида Label см. в руководстве Label в Xamarin.Forms.

Представление форматированного текста

Осталось 2 мин

Visual Studio
Visual Studio для Mac

В MainPage.xaml измените объявление Label, чтобы представить текст, который использует несколько форматов, в одном Label.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
Этот код отображает текст в одном Label, который использует несколько форматов. Текст в первом Span отображается с форматированием, заданным в Label, а текст во втором и третьем экземплярах Span отображается с форматированием, заданным в Label, и дополнительным форматированием, заданным в каждом Span.

Примечание.

Свойство FormattedText имеет тип FormattedString, который состоит из одного или нескольких экземпляров Span.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном удаленном симуляторе iOS или эмуляторе Android. Обратите внимание, что внешний вид Label изменился:

В Visual Studio остановите приложение.

Дополнительные сведения о настройке внешнего вида Span см. в разделе Форматированный текст в руководстве Label в Xamarin.Forms.

В MainPage.xaml измените объявление Label, чтобы представить текст, который использует несколько форматов, в одном Label.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
Этот код отображает текст в одном Label, который использует несколько форматов. Текст в первом Span отображается с форматированием, заданным в Label, а текст во втором и третьем экземплярах Span отображается с форматированием, заданным в Label, и дополнительным форматированием, заданным в каждом Span.

Примечание.

Свойство FormattedText имеет тип FormattedString, который состоит из одного или нескольких экземпляров Span.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio для Mac кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном симуляторе iOS или эмуляторе Android. Обратите внимание, что внешний вид Label изменился:

В Visual Studio для Mac остановите приложение.

Дополнительные сведения о настройке внешнего вида Span см. в разделе Форматированный текст в руководстве Label в Xamarin.Forms.

Поделиться через

Учебник по Label в Xamarin.Forms

Создание Label

Изменение внешнего вида

Представление форматированного текста

Поздравляем!

Следующие шаги

Поделиться через

Учебник по Label в Xamarin.Forms

Создание Label

Изменение внешнего вида

Представление форматированного текста

Поздравляем!

Следующие шаги

Дополнительные ссылки