PowerApps 中的按鈕控制項Button 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 屬性設為 Disabled 時,該控制項所呈現的框線色彩。DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – 控制項的 DisplayMode 屬性設為 Disabled 時,該控制項所呈現的文字色彩。DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – 控制項的 DisplayMode 屬性設為 Disabled 時,該控制項所呈現的背景色彩。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 – 控制項的文字字型粗細︰BoldSemiboldNormalLighterFontWeight – 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否則為 falsePressedTrue 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 – 自訂控制項在設定為非零值時於執行階段的定位順序。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( ScreenName, ScreenTransitionValue )Navigate( ScreenName, ScreenTransitionValue )

範例Examples

將基本公式新增至按鈕Add a basic formula to a button

  1. 新增文字輸入控制項,並將其命名為 SourceAdd 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. 來源清除預設文字,在其中輸入數字,然後按一下或點選 [新增]。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. 來源清除數字,在其中輸入其他數字,然後按一下或點選 [新增]。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屬性設定為「輸入數字」。Set the HintText property of Source to "Enter a number".
  2. 新增OnSelect 屬性設為以下公式︰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: ""})

    注意

    請以分號 ";" 分隔多個公式。Separate multiple formulas with a semi-colon “;”.

  3. 來源Default 屬性設定為 ClearInputSet 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. 新增另一個按鈕控制項、將其 Text 屬性設定為 "Clear",然後將其 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 鍵,將數個數字相加,然後按一下或點選 [清除] 以重設總計。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. 您可以對按鈕控制項的圖形進行基本修改,方法是設定其 HeightWidthRadius 屬性。You can make basic modifications to the shape of a Button control by setting its Height, Width, and Radius properties.

注意

圖示和圖形提供各種不同的設計,而且可以執行一些與按鈕控制項相同的基本功能。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. 新增按鈕控制項,將其 HeightWidth 屬性設定為 300,以製作大型的方形按鈕。Add a Button control, and set its Height and Width properties to 300 to make a large square button.
  2. 修改 RadiusTopLeftRadiusTopRightRadiusBottomLeftRadiusBottomRight 屬性,以調整每個角的彎曲度。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.

  • 變更您建立之其中一個按鈕的 HoverFill 屬性中的 ColorFade 百分比,並且觀察效果。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 色彩定義,可能是一個名稱或十六進位值。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.