Элемент управления "Кнопка" в PowerAppsButton control in PowerApps

Элемент управления, который пользователь нажимает для взаимодействия с приложением.A control that the user can click or tap to interact with the app.

ОписаниеDescription

Настройте свойство OnSelect элемента управления Кнопка для выполнения одной или нескольких формул при нажатии элемента управления пользователем.Configure the OnSelect property of a Button control to run one or more formulas when the user clicks or taps the control.

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

OnSelect — поведение приложения, когда пользователь щелкает элемент управления или касается его.OnSelect – How the app responds when the user taps or clicks a control.

Text — текст, отображаемый в элементе управления, или текст, который пользователь вводит в элемент управления.Text – Text that appears on a control or that the user types into a control.

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

Align — расположение текста относительно центра элемента управления по горизонтали.Align – The location of text in relation to the horizontal center of its control.

AutoDisableOnSelect — автоматическое отключение элемента управления при выполнении функции, назначенной свойству OnSelect.AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is running.

BorderColor — цвет границы элемента управления.BorderColor – The color of a control's border.

BorderStyle — стиль границы элемента управления: Сплошная, Штриховая, Пунктирная или Отсутствует.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness — толщина границы элемента управления.BorderThickness – The thickness of a control's border.

FocusedBorderThickness — толщина границы элемента управления, когда он находится в фокусе клавиатуры.FocusedBorderThickness – The thickness of a control's border when it has keyboard focus.

Color — цвет текста в элементе управления.Color – The color of text in a control.

DisplayMode — в зависимости от значения этого режима элемент управления разрешает пользователю вводить данные (Изменение), только отображает данные (Просмотр) или элемент вообще отключен (Отключено).DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor — цвет границы элемента управления, если для его свойства DisplayMode установлено значение Отключено.DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor — цвет текста в элементе управления, если для его свойства DisplayMode установлено значение Отключено.DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill — цвет фона элемента управления, если для его свойства DisplayMode установлено значение Отключено.DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill — цвет фона элемента управления.Fill – The background color of a control.

Font — имя семейства шрифтов, используемых для отображения текста.Font – The name of the family of fonts in which text appears.

FontWeight — толщина текста в элементе управления: Жирный, Полужирный, Обычный или Очень тонкий.FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height — расстояние между верхним и нижним краем элемента управления.Height – The distance between a control's top and bottom edges.

HoverBorderColor — цвет границы элемента управления при удерживании указателя мыши на нем.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor — цвет текста в элементе управления при удерживании указателя мыши на нем.HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill — цвет фона элемента управления при удерживании указателя мыши на нем.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic определяет, когда текст в элементе управления отображается курсивом.Italic – Whether the text in a control is italic.

PaddingBottom — расстояние между текстом в элементе управления и нижним краем элемента управления.PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft — расстояние между текстом в элементе управления и левым краем элемента управления.PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight — расстояние между текстом в элементе управления и правым краем элемента управления.PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop — расстояние между текстом в элементе управления и верхним краем элемента управления.PaddingTop – The distance between text in a control and the top edge of that control.

Pressed — значение true при нажатии элемента управления и false в противном случае.PressedTrue while a control is being pressed, false otherwise.

PressedBorderColor — цвет границы элемента управления при щелчке или касании.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor — цвет текста в элементе управления при щелчке или касании.PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill — цвет фона элемента управления при щелчке или касании.PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft — градус скругления нижнего левого угла элемента управления.RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight — градус скругления нижнего правого угла элемента управления.RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft — градус, до которого округляется верхний левый угол элемента управления.RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight — градус скругления верхнего правого угла элемента управления.RadiusTopRight – The degree to which the top-right corner of a control is rounded.

Size — размер шрифта текста, отображаемого в элементе управления.Size – The font size of the text that appears on a control.

Strikethrough определяет, когда через текст, отображаемый в элементе управления, проходит линия.Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex — ненулевое значение определяет последовательность перехода между элементами управления с помощью клавиши TAB.TabIndex – Customizes the tab order of controls at runtime when set to a non-zero value.

Tooltip — пояснительный текст, отображаемый при наведении указателя мыши на элемент управления.Tooltip – Explanatory text that appears when the user hovers over a control.

Underline определяет, когда под текстом, отображаемым в элементе управления, проходит линия.Underline – Whether a line appears under the text that appears on a control.

VerticalAlign — расположение текста в элементе управления относительно центра этого элемента управления по вертикали.VerticalAlign – The location of text on a control in relation to the vertical center of that control.

Visible определяет, отображается ли элемент управления или он скрыт.Visible – Whether a control appears or is hidden.

Width — расстояние между левым и правым краем элемента управления.Width – The distance between a control's left and right edges.

X — расстояние между левым краем элемента управления и левым краем его родительского контейнера (или экрана, если родительского контейнера нет).X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y — расстояние между верхним краем элемента управления и верхним краем его родительского контейнера (или экрана, если родительского контейнера нет).Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

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

ПримерыExamples

Добавление основной формулы для кнопкиAdd a basic formula to a button

  1. Добавьте элемент управления Текстовое поле и назовите его Source.Add a Text input control, and name it Source.

    Не знаете, как добавить, назвать и настроить элемент управления?Don't know how to add, name, and configure a control?

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

    Нужны дополнительные сведения о функции UpdateContext или других функциях?Want more information about the UpdateContext function or other functions?

  3. Добавьте элемент управления Метка, укажите для свойства Text значение Total и нажмите клавишу F5.Add a Label control, set its Text property to Total, and then press F5.
  4. Удалите текст по умолчанию из поля Source, введите в нем число, а затем нажмите (коснитесь) кнопку Add.Clear the default text from Source, type a number in it, and then click or tap Add.

    В элементе управления Метка отображается введенное число.The Label control shows the number that you typed.

  5. Удалите число из поля Source, введите в нем другое число, а затем нажмите (коснитесь) кнопку Add.Clear the number from Source, type another number in it, and then click or tap Add.

    В элементе управления Метка отображается сумма двух введенных чисел.The Label control shows the sum of the two numbers that you typed.

  6. (Необязательно.) Повторите предыдущее действие еще один или несколько раз.(optional) Repeat the previous step one or more times.
  7. Чтобы вернуться в рабочую область по умолчанию, нажмите клавишу Esc (или щелкните (коснитесь) значок "Закрыть" в правом верхнем углу).To return to the default workspace, press Esc (or click or tap the close icon in the upper-right corner).

Настройка кнопки с несколькими формуламиConfigure a button with multiple formulas

Добавьте формулу, которая очищает элемент управления Текстовое поле перед следующим вводом значения.Add a formula that clears the Text input control between entries.

  1. Для свойства HintText текстового поля Source задайте значение "Введите число".Set the HintText property of Source to "Enter a number".
  2. Задайте для свойства OnSelect кнопки Add эту формулу:Set the OnSelect property of Add to this formula:

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

    Примечание. Если указывается несколько формул, их следует разделять точками с запятой ";".Note: Separate multiple formulas with a semi-colon “;”.

  3. Для свойства Default текстового поля Source задайте значение ClearInput.Set the Default property of Source to ClearInput.
  4. Нажмите клавишу F5, затем протестируйте приложение, сложив несколько чисел.Press F5, and then test the app by adding several numbers together.

Добавление кнопки для сброса итогового результатаAdd another button to reset the total

Добавьте вторую кнопку для удаления итогового результата между вычислениями.Add a second button to clear the total between calculations.

  1. Добавьте еще один элемент управления Кнопка, задайте значение "Clear" для ее свойства Text и задайте следующую формулу в качестве значения свойства OnSelect:Add another Button control, set its Text property to "Clear", and set its OnSelect property to this formula:

    UpdateContext({Total:0})UpdateContext({Total:0})

  2. Нажмите клавишу F5, сложите несколько чисел, а затем нажмите (коснитесь) кнопку Clear, чтобы сбросить итоговый результат.Press F5, add several numbers together, and then click or tap Clear to reset the total.

Изменение внешнего вида кнопкиChange a button's appearance

Изменение формы кнопкиChange a button's shape

По умолчанию PowerApps создает прямоугольный элемент управления Кнопка со скругленными углами.By default, PowerApps creates a rectangular Button control with rounded corners. Можно внести простые изменения в форму элемента управления Кнопка, задав его свойства Height, Width и Radius.You can make basic modifications to the shape of a Button control by setting its Height, Width, and Radius properties.

Примечание. Значки и фигуры обеспечивают широкий элементов выбор при оформлении и могут выполнять некоторые основные функции элемента управления Кнопка.Note: Icons and Shapes provide a wide variety of designs and can perform some of the same basic functions that Button controls do. Тем не менее у значков и фигур нет свойства Text.However, Icons and Shapes don’t have a Text property.

  1. Добавьте элемент управления Кнопка и задайте для его свойств Height и Width значение 300, чтобы получить большую квадратную кнопку.Add a Button control, and set its Height and Width properties to 300 to make a large square button.
  2. Измените свойства RadiusTopLeft, RadiusTopRight, RadiusBottomLeft и RadiusBottomRight, чтобы изменить степень кривизны углов кнопки.Modify the RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, and RadiusBottomRight properties to adjust the amount of curvature on each corner. Ниже приведены примеры различных фигур, созданных на основе квадратной кнопки 300 x 300.Here are some examples of different shapes, each one starting from a 300 x 300 square button:

Изменение цвета кнопки при наведении указателя мышиChange a button's color when you hover over it

По умолчанию яркость цвета заливки элемента управления Кнопка уменьшается на 20 % при наведении на него указателя мыши.By default, the fill color of a Button control will dim by 20% when you hover over it with a mouse. Это поведение можно настроить, изменив свойство HoverFill, которое использует функцию ColorFade.You can adjust this behavior by changing the HoverFill property, which uses the ColorFade function. Если задать для формулы ColorFade положительное процентное значение, то при наведении указателя на кнопку ее цвет будет становиться ярче, а если задать отрицательное значение, то кнопка будет темнеть.If you set the ColorFade formula to a positive percentage, the color becomes lighter when you hover over the button, while a negative percentage makes the color darker.

  • Измените процентное значение ColorFade в свойстве HoverFill одной из созданных кнопок и посмотрите, что получится.Change the ColorFade percentage in the HoverFill property of one of the buttons that you created, and observe the effects.

Можно также указать цвет элемента управления Кнопка, задав для его свойства HoverFill формулу, содержащую функцию ColorValue вместо функции ColorFade, например ColorValue("Red").You can also specify the color of a Button control by setting its HoverFill property to a formula that contains the ColorValue function instead of the ColorFade function, as in ColorValue("Red").

Примечание. Значением цвета может быть любое определение цвета CSS (имя или шестнадцатеричное значение).Note: The color value can be any CSS color definition, either a name or a hex value.

  • Замените функцию ColorFade функцией ColorValue в одной из созданных кнопок и посмотрите, что получится.Replace the ColorFade function with a ColorValue function in one of the buttons that you created, and observe the effects.