Power Apps 中的按鈕控制項

使用者可以按一下或點選以與應用程式互動的控制項。

Description

設定 Button 控制項的 OnSelect 屬性，以在使用者按一下或點選控制項時執行一或多個公式。

索引鍵屬性

OnSelect – 使用者點選或按一下控制項時要執行的動作。

文字 – 出現在控制項上或使用者輸入控制項的文字。

其他屬性

對齊 – 文字相對於其控制項水平中心的位置。

AutoDisableOnSelect – 在 OnSelect 行為執行時自動停用控制項。

BorderColor – 控制項框線的色彩。

BorderStyle – 控制項的框線是 Solid、 Dashed、 Doted 還是 None。

BorderThickness — 控制項邊框的粗細。

顏色 – 控制項中文字的顏色。

ContentLanguage - 控制項內容的語言，如果與控制項的容器不同。

DisplayMode – 控制項是否允許使用者輸入 （編輯） 、只顯示資料 （檢視） 或停用 （已停用） 。

DisabledBorderColor -如果控制項的 DisplayMode 屬性設定為 Disabled，則控制項框線的色彩。

DisabledColor – 控制項中文字的色彩，如果其 DisplayMode 屬性設定為 Disabled。

DisabledFill – 控制項的背景色彩 （如果控制項的 DisplayMode 屬性設定為 Disabled）。

FocusedBorderColor – 控制項聚焦時控制項框線的色彩。

FocusedBorderThickness – 控制項聚焦時控制項框線的粗細。

填滿 – 控制項的背景色彩。

字型 — 顯示文字的字型系列名稱。

FontWeight – 控制項中文字的粗細： 粗體、 半粗體、 正常或 較輕。

高度 – 控制項頂部和底部邊緣之間的距離。

HoverBorderColor – 當使用者將滑鼠指標保留在控制項上時，控制項框線的色彩。

HoverColor – 當使用者將滑鼠指標放在控制項上時，控制項中文字的色彩。

HoverFill – 當使用者將滑鼠指標放在控制項上時，控制項的背景色彩。

斜體 – 控制項中的文字是否為斜體。

PaddingBottom – 控制項中的文字與該控制項底部邊緣之間的距離。

PaddingLeft – 控制項中文字與該控制項左邊緣之間的距離。

PaddingRight – 控制項中的文字與該控制項右邊緣之間的距離。

PaddingTop – 控制項中的文字與該控制項的上邊緣之間的距離。

按下 – 按下控制項時為 True ，否則為 false 。

PressedBorderColor – 使用者點選或按一下控制項時，控制項框線的色彩。

PressedColor – 使用者點選或按一下控制項時，控制項中的文字色彩。

PressedFill – 使用者點選或按一下控制項時控制項的背景色彩。

RadiusBottomLeft -控制項左下角的圓角程度。

RadiusBottomRight – 控制項右下角的圓角程度。

RadiusTopLeft – 控制項左上角的圓角程度。

RadiusTopRight – 控制項右上角的圓角程度。

大小 – 控制項上顯示之文字的字型大小。

刪除線 – 是否顯示在控制項上顯示的文字中顯示一行。

TabIndex – 與其他控制項相關的鍵盤導覽順序。

工具提示 – 當使用者將滑鼠停留在控制項上時出現的說明文字。

底線 – 是否顯示在控制項上顯示的文字下方顯示一行。

VerticalAlign – 控制項上文字相對於該控制項垂直中心的位置。

可見 — 控制項是否顯示或隱藏。

寬度 – 控制項的左右邊緣之間的距離。

X – 控制項左邊緣與其父容器 (沒有父容器時則為螢幕) 左邊緣之間的距離。

Y – 控制項頂部邊緣與其上層容器 (沒有上層容器時則為螢幕) 頂部邊緣之間的距離。

相關功能

Navigate（ ScreenName， ScreenTransitionValue ）

範例

將基本公式新增至按鈕

1. 新增 Text input 控制項，並將其命名為 Source。

   不知道如何 新增、命名和設定控制項？

2. 新增 Button 控制項，將其 Text 屬性設定為 “Add”，並將其 OnSelect 屬性設定為下列公式：
   UpdateContext（{總計：總計 + 值（Source.Text）}）

   想要有關 UpdateContext 函數 或其他函數的詳細資訊嗎？

3. 新增 Label 控制項，將其在編輯列中的 Text 屬性設定為 Value（Total），然後按 F5。

4. 清除來源中的預設文字，在其中輸入數字，然後按一下或點選 [新增]。

   [ 標籤] 控制項會顯示您輸入的數字。

5. 從 來源清除數字，在其中輸入另一個數字，然後按一下或點選 [新增]。

   [ 標籤] 控制項會顯示您輸入的兩個數字的總和。

6. （選用）重複上一個步驟一或多次。

7. 若要返回預設工作區，請按 Esc 鍵 （或按一下或點選右上角的關閉圖示）。

設定具有多個公式的按鈕

新增公式，以清除項目之間的 文字輸入 控制項。

1. 將 Source 的 HintText 屬性設定為「輸入數字」。

2. 將 [新增] 的 OnSelect 屬性設定至此公式：

   UpdateContext（{總計：總計 + 值（Source.Text）}）;
   UpdateContext（{ClearInput： “”}）

   備註

   用分號“;”分隔多個公式。

3. 將 Source 的 Default 屬性設定為 ClearInput。

4. 按 F5，然後將數個數字相加來測試應用程式。

新增另一個按鈕以重設總計

新增第二個按鈕以清除計算之間的總計。

1. 新增另一個 Button 控制項，將其 Text 屬性設定為 “Clear”，並將其 OnSelect 屬性設定為下列公式：

   更新內容（{總計：0}）

2. 按 F5，將數個數字相加，然後按一下或點選 [清除] 以重設總計。

變更按鈕的外觀

變更按鈕的形狀

根據預設，Power Apps 會建立具有圓角的矩形 Button 控制項。 您可以設定 Button 控制項的 Height、Width 和 Radius 屬性，對 Button 控制項的圖形進行基本修改。

備註

Icons 和 Shapes 提供各式各樣的設計，而且可以執行一些與 Button 控制項相同的基本功能。 不過， 圖示和圖形 沒有 Text 屬性。

1. 新增 Button 控制項，並將其 Height 和 Width 屬性設定為 300 ，以建立大型方形按鈕。

2. 修改 RadiusTopLeft、 RadiusTopRight、 RadiusBottomLeft 和 RadiusBottomRight 屬性，以調整每個角落的曲率量。 以下是一些不同形狀的範例，每個形狀都從 300 x 300 方形按鈕開始：

   • 將所有四個 半徑值 都設定為 150 以建立圓。
   • 將 RadiusTopLeft 和 RadiusBottomRight 的值設定為 300 ，以建立葉形 Button。
   • 將 RadiusTopLeft 和 RadiusTopRight 的值設定為 300，並將 RadiusBottomLeft 和 RadiusBottomRight 的值設定為 100 ，以建立定位器形狀的按鈕。

將滑鼠游標懸停在按鈕上時變更按鈕的顏色

根據預設，當您將滑鼠停留在 Button 控制項上時， Button 控制項的填滿色彩會變暗 20%。 您可以變更使用 ColorFade 函式的 HoverFill 屬性來調整此行為。 如果您將 ColorFade 公式設定為正百分比，當您將滑鼠停留在按鈕上時，顏色會變淺，而負百分比會使顏色變暗。

• 變更您建立之其中一個按鈕的 HoverFill 屬性中的 ColorFade 百分比，並觀察效果。

您也可以將 Button 控制項的 HoverFill 屬性設定為包含 ColorValue 函式的公式，而不是 ColorFade 函式，以指定 Button 控制項的色彩，如 ColorValue（“Red”）。

備註

顏色值可以是任何 CSS 顏色定義，可以是名稱或十六進位值。

• 在您建立的其中一個按鈕中，將 ColorFade 函式取代為 ColorValue 函式，並觀察效果。

協助工具指導方針

色彩對比

• 適用標準色彩對比度要求。

支援螢幕助讀程式

• 必須存在文字 。

鍵盤支援

• TabIndex 必須為零或更大，鍵盤使用者才能流覽至它。
• 焦點指示器必須清晰可見。 使用 FocusedBorderColor 和 FocusedBorderThickness 來達成此目的。