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

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

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

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

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

Создайте Xamarin.FormsButton в XAML.
Реагировать на касание Button.
Изменять внешний вид Button.

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

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

Создание кнопки

Осталось 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 с именем ButtonTutorial.

Внимание

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

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.
В обозревателе решений дважды щелкните файл MainPage.xaml в проекте ButtonTutorial, чтобы открыть его. В 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="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из Button в StackLayout. Свойство Button.Text указывает текст, отображаемый в Button.
На панели инструментов Visual Studio нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения) для запуска приложения в выбранном удаленном симуляторе iOS или эмуляторе Android.

Обратите внимание, что по умолчанию Button обычно занимает все выделенное для него пространство — в этом случае полную ширину своего родительского элемента (StackLayout).

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

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

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

Внимание

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

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

Обратите внимание, что по умолчанию Button обычно занимает все выделенное для него пространство — в этом случае полную ширину своего родительского элемента (StackLayout).

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

Обработка щелчков

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

Visual Studio
Visual Studio для Mac

В MainPage.xaml измените объявление Button таким образом, чтобы он установил обработчик для события Clicked:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Этот код задает событие Clicked для обработчика событий с именем OnButtonClicked, который будет создан на следующем шаге.
В обозревателе решений в проекте ButtonTutorial разверните узел MainPage.xaml и дважды щелкните файл MainPage.xaml.cs, чтобы открыть его. Затем в MainPage.xaml.cs добавьте обработчик событий OnButtonClicked в класс:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
При касании Button выполняется метод OnButtonClicked. Аргумент sender является объектом Button, ответственным за запуск события Clicked, и может использоваться для доступа к объекту Button. Этот обработчик обновляет текст, отображаемый элементом Button.

Примечание.

Помимо события ClickedButton также определяет события Pressed и Released. Дополнительные сведения см. в разделе Нажатие и отпускание кнопки в руководстве Кнопки в Xamarin.Forms.
На панели инструментов Visual Studio нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном удаленном симуляторе iOS или эмуляторе Android. Нажмите кнопку Button и обратите внимание, что ее текст меняется:

Дополнительные сведения об обработке нажатий кнопок см. в разделе Обработка нажатий кнопок в руководстве Кнопки в Xamarin.Forms.

В MainPage.xaml измените объявление Button таким образом, чтобы он установил обработчик для события Clicked:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Этот код задает событие Clicked для обработчика событий с именем OnButtonClicked, который будет создан на следующем шаге.
На панели решений в проекте ButtonTutorial разверните узел MainPage.xaml и дважды щелкните файл MainPage.xaml.cs, чтобы открыть его. Затем в MainPage.xaml.cs добавьте обработчик событий OnButtonClicked в класс:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
При касании Button выполняется метод OnButtonClicked. Аргумент sender является объектом Button, ответственным за запуск события Clicked, и может использоваться для доступа к объекту Button. Этот обработчик обновляет текст, отображаемый элементом Button.

Примечание.

Помимо события ClickedButton также определяет события Pressed и Released. Дополнительные сведения см. в разделе Нажатие и отпускание кнопки в руководстве Кнопки в Xamarin.Forms.
Чтобы запустить приложения в выбранном симуляторе iOS или эмуляторе Android, нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения) на панели инструментов Visual Studio для Mac. Нажмите кнопку Button и обратите внимание, что ее текст меняется:

Дополнительные сведения об обработке нажатий кнопок см. в разделе Обработка нажатий кнопок в руководстве Кнопки в Xamarin.Forms.

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

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

Visual Studio
Visual Studio для Mac

В MainPage.xaml измените объявление Button, чтобы изменить его внешний вид:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Этот код задает свойства, которые изменяют внешний вид Button. Свойство TextColor задает цвет текста Button, а свойство BackgroundColor задает цвет фона для текста. Свойство BorderColor задает цвет области, окружающей Button, а свойство BorderWidth задает ширину границы. По умолчанию Button представляет собой прямоугольник, но его можно представить со скругленными углами, установив для свойства CornerRadius подходящее значение. Кроме того, размер Button можно изменить, настроив его свойства WidthRequest и HeightRequest.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном удаленном симуляторе iOS или эмуляторе Android. Обратите внимание, что внешний вид Button изменился:

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

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

В MainPage.xaml измените объявление Button, чтобы изменить его внешний вид:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Этот код задает свойства, которые изменяют внешний вид Button. Свойство TextColor задает цвет текста Button, а свойство BackgroundColor задает цвет фона для текста. Свойство BorderColor задает цвет области, окружающей Button, а свойство BorderWidth задает ширину границы. По умолчанию Button представляет собой прямоугольник, но его можно представить со скругленными углами, установив для свойства CornerRadius подходящее значение. Кроме того, размер Button можно изменить, настроив его свойства WidthRequest и HeightRequest.
Если приложение по-прежнему работает, сохраните изменения в файле, после чего пользовательский интерфейс приложения в симуляторе или эмуляторе будет автоматически обновлен. В противном случае нажмите на панели инструментов Visual Studio для Mac кнопку Запуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном симуляторе iOS или эмуляторе Android. Обратите внимание, что внешний вид Button изменился:

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

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

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

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

Создание кнопки

Обработка щелчков

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

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

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

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

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

Создание кнопки

Обработка щелчков

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

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

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

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