Элемент управления, который пользователь нажимает для взаимодействия с приложением.

Описание

Настройте свойство OnSelect элемента управления Кнопка для выполнения одной или нескольких формул при нажатии элемента управления пользователем.

Основные свойства

OnSelect — поведение приложения, когда пользователь щелкает элемент управления или касается его.

Text — текст, отображаемый в элементе управления, или текст, который пользователь вводит в элемент управления.

Дополнительные свойства

Align — расположение текста относительно центра элемента управления по горизонтали.

AutoDisableOnSelect — автоматическое отключение элемента управления при выполнении функции, назначенной свойству OnSelect.

BorderColor — цвет границы элемента управления.

BorderStyle — стиль границы элемента управления: Сплошная, Штриховая, Пунктирная или Отсутствует.

BorderThickness — толщина границы элемента управления.

FocusedBorderThickness — толщина границы элемента управления, когда он находится в фокусе клавиатуры.

Color — цвет текста в элементе управления.

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

DisabledBorderColor — цвет границы элемента управления, если для его свойства DisplayMode установлено значение Отключено.

DisabledColor — цвет текста в элементе управления, если для его свойства DisplayMode установлено значение Отключено.

DisabledFill — цвет фона элемента управления, если для его свойства DisplayMode установлено значение Отключено.

Fill — цвет фона элемента управления.

Font — имя семейства шрифтов, используемых для отображения текста.

FontWeight — толщина текста в элементе управления: Жирный, Полужирный, Обычный или Очень тонкий.

Height — расстояние между верхним и нижним краем элемента управления.

HoverBorderColor — цвет границы элемента управления при удерживании указателя мыши на нем.

HoverColor — цвет текста в элементе управления при удерживании указателя мыши на нем.

HoverFill — цвет фона элемента управления при удерживании указателя мыши на нем.

Italic определяет, когда текст в элементе управления отображается курсивом.

PaddingBottom — расстояние между текстом в элементе управления и нижним краем элемента управления.

PaddingLeft — расстояние между текстом в элементе управления и левым краем элемента управления.

PaddingRight — расстояние между текстом в элементе управления и правым краем элемента управления.

PaddingTop — расстояние между текстом в элементе управления и верхним краем элемента управления.

Pressed — значение true при нажатии элемента управления и false в противном случае.

PressedBorderColor — цвет границы элемента управления при щелчке или касании.

PressedColor — цвет текста в элементе управления при щелчке или касании.

PressedFill — цвет фона элемента управления при щелчке или касании.

RadiusBottomLeft — градус скругления нижнего левого угла элемента управления.

RadiusBottomRight — градус скругления нижнего правого угла элемента управления.

RadiusTopLeft — градус, до которого округляется верхний левый угол элемента управления.

RadiusTopRight — градус скругления верхнего правого угла элемента управления.

Size — размер шрифта текста, отображаемого в элементе управления.

Strikethrough определяет, когда через текст, отображаемый в элементе управления, проходит линия.

TabIndex — ненулевое значение определяет последовательность перехода между элементами управления с помощью клавиши TAB.

Tooltip — пояснительный текст, отображаемый при наведении указателя мыши на элемент управления.

Underline определяет, когда под текстом, отображаемым в элементе управления, проходит линия.

VerticalAlign — расположение текста в элементе управления относительно центра этого элемента управления по вертикали.

Visible определяет, отображается ли элемент управления или он скрыт.

Width — расстояние между левым и правым краем элемента управления.

X — расстояние между левым краем элемента управления и левым краем его родительского контейнера (или экрана, если родительского контейнера нет).

Y — расстояние между верхним краем элемента управления и верхним краем его родительского контейнера (или экрана, если родительского контейнера нет).

Связанные функции

Navigate( имя_экрана, тип_перехода )

Примеры

Добавление основной формулы для кнопки

  1. Добавьте элемент управления Текстовое поле и назовите его Source.

    Не знаете, как добавить, назвать и настроить элемент управления?

  2. Добавьте элемент управления Кнопка, укажите для свойства Text значение "Add", а для свойства OnSelect следующую формулу:
    UpdateContext({Total:Total + Value(Source.Text)})

    Нужны дополнительные сведения о функции UpdateContext или других функциях?

  3. Добавьте элемент управления Метка, укажите для свойства Text значение Total и нажмите клавишу F5.

  4. Удалите текст по умолчанию из поля Source, введите в нем число, а затем нажмите (коснитесь) кнопку Add.

    В элементе управления Метка отображается введенное число.

  5. Удалите число из поля Source, введите в нем другое число, а затем нажмите (коснитесь) кнопку Add.

    В элементе управления Метка отображается сумма двух введенных чисел.

  6. (Необязательно.) Повторите предыдущее действие еще один или несколько раз.

  7. Чтобы вернуться в рабочую область по умолчанию, нажмите клавишу Esc (или щелкните (коснитесь) значок "Закрыть" в правом верхнем углу).

Настройка кнопки с несколькими формулами

Добавьте формулу, которая очищает элемент управления Текстовое поле перед следующим вводом значения.

  1. Для свойства HintText текстового поля Source задайте значение "Введите число".

  2. Задайте для свойства OnSelect кнопки Add эту формулу:

    UpdateContext({Total:Total + Value(Source.Text)});
    UpdateContext({ClearInput: ""})

    Примечание. Если указывается несколько формул, их следует разделять точками с запятой ";".

  3. Для свойства Default текстового поля Source задайте значение ClearInput.

  4. Нажмите клавишу F5, затем протестируйте приложение, сложив несколько чисел.

Добавление кнопки для сброса итогового результата

Добавьте вторую кнопку для удаления итогового результата между вычислениями.

  1. Добавьте еще один элемент управления Кнопка, задайте значение "Clear" для ее свойства Text и задайте следующую формулу в качестве значения свойства OnSelect:

    UpdateContext({Total:0})

  2. Нажмите клавишу F5, сложите несколько чисел, а затем нажмите (коснитесь) кнопку Clear, чтобы сбросить итоговый результат.

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

Изменение формы кнопки

По умолчанию PowerApps создает прямоугольный элемент управления Кнопка со скругленными углами. Можно внести простые изменения в форму элемента управления Кнопка, задав его свойства Height, Width и Radius.

Примечание. Значки и фигуры** обеспечивают широкий элементов выбор при оформлении и могут выполнять некоторые основные функции элемента управления Кнопка. Тем не менее у **значков и фигур нет свойства Text.

  1. Добавьте элемент управления Кнопка и задайте для его свойств Height и Width значение 300, чтобы получить большую квадратную кнопку.

  2. Измените свойства RadiusTopLeft, RadiusTopRight, RadiusBottomLeft и RadiusBottomRight, чтобы изменить степень кривизны углов кнопки. Ниже приведены примеры различных фигур, созданных на основе квадратной кнопки 300 x 300.

    • Задайте 150 для всех значений Radius, чтобы создать круг.
    • Задайте для свойств RadiusTopLeft и RadiusBottomRight значение 300, чтобы создать листообразную кнопку.
    • Задайте для свойств RadiusTopLeft и RadiusTopRight значение 300, а для свойств RadiusBottomLeft и RadiusBottomRight — значение 100, чтобы создать кнопку в виде вкладки.

Изменение цвета кнопки при наведении указателя мыши

По умолчанию яркость цвета заливки элемента управления Кнопка уменьшается на 20 % при наведении на него указателя мыши. Это поведение можно настроить, изменив свойство HoverFill, которое использует функцию ColorFade. Если задать для формулы ColorFade положительное процентное значение, то при наведении указателя на кнопку ее цвет будет становиться ярче, а если задать отрицательное значение, то кнопка будет темнеть.

  • Измените процентное значение ColorFade в свойстве HoverFill одной из созданных кнопок и посмотрите, что получится.

Можно также указать цвет элемента управления Кнопка, задав для его свойства HoverFill формулу, содержащую функцию ColorValue вместо функции ColorFade, например ColorValue("Red").

Примечание. Значением цвета может быть любое определение цвета CSS (имя или шестнадцатеричное значение). - Замените функцию ColorFade функцией ColorValue в одной из созданных кнопок и посмотрите, что получится.