クリックまたはタップするとアプリを操作できるコントロールです。

説明

ユーザーがボタン コントロールをクリックまたはタップしたときに 1 つ以上の数式を実行するように、このコントロールの OnSelect プロパティを構成します。

主要なプロパティ

OnSelect – ユーザーがコントロールをタップまたはクリックした場合のアプリの反応を指定します。

Text – コントロールに表示されるテキスト、またはコントロールにユーザーが入力するテキストです。

その他のプロパティ

Align – コントロールの水平方向の中心に対するテキストの位置です。

AutoDisableOnSelectOnSelect の動作の実行時にコントロールを自動で無効化します。

BorderColor – コントロールの境界線の色です。

BorderStyle – コントロールの境界線を Solid (実線)、Dashed (破線)、Dotted (点線)、None (なし) のいずれに指定します。

BorderThickness – コントロールの境界線の太さです。

FocusedBorderThickness – キーボードでフォーカスした場合のコントロールの境界線の太さです。

Color – コントロールのテキストの色です。

DisplayMode – コントロールで、ユーザー入力を許可するか (Edit)、データの表示のみを許可するか (View)、許可しないか (Disabled) を設定します。

DisabledBorderColor – コントロールの DisplayMode プロパティが Disabled に設定されている場合のコントロールの境界線の色です。

DisabledColor – コントロールの DisplayMode プロパティが Disabled に設定されている場合のコントロール内のテキストの色です。

DisabledFill – コントロールの DisplayMode プロパティが Disabled に設定されている場合のコントロールの背景色です。

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( ScreenNameScreenTransitionValue )

ボタンに基本的な数式を追加する

  1. テキスト入力 コントロールを追加し、 Source という名前を付けます。

    コントロールの追加、命名、構成についてはこちらをご覧ください

  2. ボタン コントロールを追加し、Text プロパティを "Add" に設定して、OnSelect プロパティを次の式に設定します。
    UpdateContext({Total:Total + Value(Source.Text)})

    UpdateContext 関数やその他の関数については各関連記事を参照してください。

  3. ラベル コントロールを追加し、Text プロパティを Total に設定して、F5 キーを押します。

  4. "Source" から既定のテキストを消去し、数値を入力して、"Add" をクリックまたはタップします。

    ラベル コントロールに、入力した数値が表示されます。

  5. "Source" から数値を消去し、別の数値を入力して、"Add" をクリックまたはタップします。

    ラベル コントロールに、入力した 2 つの数値の合計が表示されます。

  6. (省略可) 前のステップを 1 回以上繰り返します。

  7. Esc キーを押して (または、右上隅の閉じるアイコンをクリックまたはタップして)、既定のワークスペースに戻ります。

複数の数式を使用してボタンを構成する

入力と入力の間にテキスト入力コントロールをクリアする数式を追加します。

  1. "Source" の HintText プロパティを "Enter a number" に設定します。

  2. "Add" の OnSelect プロパティを次の数式に設定します。

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

    注: 複数の数式はセミコロン ";" で区切ります。

  3. "Source" の Default プロパティを ClearInput に設定します。

  4. F5 キーを押し、複数の数値を一緒に追加してアプリをテストします。

合計をリセットするもう 1 つのボタンを追加する

計算と計算の間に合計をクリアする 2 番目のボタンを追加します。

  1. もう 1 つのボタン コントロールを追加し、Text プロパティを "Clear" に設定して、OnSelect プロパティを次の数式に設定します。

    UpdateContext({Total:0})

  2. F5 キーを押し、複数の数値を一緒に追加して、[クリア] をクリックまたはタップして合計をクリアします。

ボタンの外観を変更する

ボタンの形を変更する

PowerApps の既定では、角の丸い四角形のボタン コントロールが作成されます。 ボタン コントロールの形に基本的な変更を加えることができます。そのためには、HeightWidthRadius の各プロパティを変更します。

注: アイコンとシェイプ** には、さまざまなデザインが用意されていて、 ボタン コントロールで実行できるのと同じ基本的な機能のいくつかを実行できます。 ただし、 **アイコンとシェイプText プロパティはありません。

  1. ボタン コントロールを追加し、Height プロパティと Width プロパティを 300 に設定して、大きな正方形のボタンを作成します。

  2. RadiusTopLeftRadiusTopRightRadiusBottomLeftRadiusBottomRight の各プロパティを変更して、四隅の曲率の量を調整します。 異なるいくつかのシェイプの例を次に示します。それぞれ 300 x 300 の正方形のボタンを基にしています。

ホバーしたときのボタンの色を変更する

既定では、ボタン コントロールにマウスでホバーすると、塗りつぶしの色が 20% だけ暗くなります。 HoverFill プロパティを変更することで、この動作を変更できます。そのためには ColorFade 関数を使用します。 ColorFade の数式を正の比率に設定すると、ボタンにホバーしたときの色が薄くなります。一方、負の比率を設定すると、色が濃くなります。

  • 作成したいずれかのボタンの HoverFill プロパティで ColorFade の比率を変更し、その効果を確認します。

ボタン コントロールの色を指定する別の方法として、HoverFill プロパティを、 ColorFade 関数ではなく ColorValue 関数を含む数式 ColorValue("Red") など に変更する方法もあります。

注: 色の値は、任意の CSS 色定義とすることができ、名前または 16 進値のどちらでもかまいません。 - 作成したいずれかのボタンで、ColorFade 関数を ColorValue 関数に置き換え、効果を確認します。