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

Элемент управления Кнопка в Power Apps

  • Статья

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

Описание

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

Ключевые свойства

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

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

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

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

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

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

BorderStyle  — стиль границы элемента управления: Solid, Dashed, Dotted или None.

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

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

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

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

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

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

FocusedBorderColor — цвет границы элемента управления в тот момент, когда он активен.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примеры

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

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

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

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

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

  3. Добавьте элемент управления Подпись, задайте его свойство Text в строке формул как Value(Total), а затем нажмите F5.

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

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

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

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

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

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

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

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

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

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

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

    Примечание

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

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

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

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

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

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

    UpdateContext({Total:0})

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

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

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

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

Примечание

Icons и Shapes обеспечивают широкий элементов выбор при оформлении и могут выполнять некоторые основные функции элемента управления Кнопка. Тем не менее у элементов управления Icons и Shapes нет свойства 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 в одной из созданных кнопок и посмотрите, что получится.

Руководство по настройке специальных возможностей

Контрастность цветов

Поддержка средства чтения с экрана

  • Должно присутствовать свойство Text.

Поддержка клавиатуры

  • Значение элемента TabIndex должно быть равно нулю или больше нуля, чтобы пользователи могли использовать навигацию с помощью клавиатуры.
  • Индикаторы фокуса должны быть хорошо видны. Для этого используются элементы FocusedBorderColor и FocusedBorderThickness.

Примечание

Каковы ваши предпочтения в отношении языка документации? Пройдите краткий опрос (обратите внимание, что этот опрос представлен на английском языке).

Опрос займет около семи минут. Личные данные не собираются (заявление о конфиденциальности).