Power Apps での画像コントロール

たとえば、ローカル ファイルまたはデータ ソースからの画像を表示するコントロール。

内容

アプリに 画像 コントロールを 1 つまたは複数追加すると、データ セットに含まれていない個々の画像を表示したり、データ ソースのレコードからの画像を組み込むことができます。

主要なプロパティ

画像 – 画像、オーディオ、マイクのコントロールに表示される画像の名前。

追加のプロパティ

AccessibleLabel – スクリーン リーダー用のラベル。

ApplyEXIFOrientation – 画像とともに埋め込まれた EXIF のデータで指定された向きを、自動的に適用するかどうか。

AutoDisableOnSelect – OnSelect の動作の実行時にコントロールを自動で無効化するかどうかを指定します。

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

BorderStyle – コントロールの境界線が 実線破線点線 、または なし かどうか。

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

CalculateOriginalDimensionsOriginalHeight および OriginalWidth プロパティを有効にします。

DisplayMode – コントロールがユーザー入力を許可するか ( 編集 )、データのみを表示するか ( 表示 )、または無効にするか ( 無効 ) どうか。

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

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

塗りつぶし – コントロールの背景色。

FlipHorizontal – 画像を表示する前に水平方向に反転するかどうか。

FlipVertical – 画像を表示する前に垂直方向に反転するかどうか。

FocusedBorderColor – コントロールがフォーカスされているときのコントロールの境界線の色。

FocusedBorderThickness – コントロールがフォーカスされているときのコントロールの境界線の太さ。

高さ – コントロールの上端と下端間の距離。

HoverBorderColor – ユーザーがコントロール上にマウス ポインターを重ねているときのコントロールの境界線の色。

HoverFill – ユーザーがコントロールにマウス ポインターを重ねているときのコントロールの背景色。

ImagePosition – 画面またはコントロールのサイズが画像と異なる場合の、画面またはコントロール内の画像の位置 ( 画面いっぱい自動調整拡大タイル表示 、または 中央に表示 )。

ImageRotation – 画像を表示する前に回転させる方法。 値には、なし、時計回り (CW) に 90 度、反時計回り (CCW) に 90 度、時計回りに 180 度を設定できます。

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

OriginalHeight – 画像の元の高さで、 CalculateOriginalDimensions プロパティで有効にします。

OriginalWidth – 画像の元の幅で、 CalculateOriginalDimensions プロパティで有効にします。

PaddingBottom – コントロール内のテキストとそのコントロールの下端間の距離。

PaddingLeft – コントロール内のテキストとそのコントロールの左端間の距離。

PaddingRight – コントロール内のテキストとそのコントロールの右端間の距離。

PaddingTop – コントロール内のテキストとそのコントロールの上端間の距離。

PressedBorderColor – ユーザーがコントロールをタップまたはクリックしたときのコントロールの境界線の色。

PressedFill – ユーザーがコントロールをタップまたはクリックしたときのコントロールの背景色。

RadiusBottomLeft – コントロールの左下隅を丸める度合い。

RadiusBottomRight – コントロールの右下隅を丸める度合い。

RadiusTopLeft – コントロールの左上隅を丸める度合い。

RadiusTopRight – コントロールの右上隅を丸める度合い。

TabIndex – 他のコントロールに関連するキーボード ナビゲーションの順序。

ツールヒント – ユーザーがコントロールにカーソルを置くときに表示される説明テキスト。

透明性 – 画像の背後にあるコントロールを表示し続ける度合い。 10 進値の範囲は 0〜1 です。 0 は不透明、0.5 は半透明、1 は透明です。

表示 – コントロールが表示されるか非表示になるか。

– コントロールの左端と右端間の距離。

X – コントロールの左端とその親コンテナー (親コンテナーがない場合は画面) の左端間の距離。

Y – コントロールの上端とその親コンテナー (親コンテナーがない場合は画面) の上端間の距離。

Remove ( DataSource , ThisItem )

ローカル ファイルからの画像を表示する

  1. ファイル メニューで、 メディア をクリックまたはタップしてから、 参照 をクリックまたはタップします。

  2. 追加する画像ファイルをクリックまたはタップし、 開く をクリックまたはタップしてから、Esc キーを押して既定のワークスペースに戻ります。

  3. 画像 コントロールを追加し、 画像 プロパティを追加したファイルの名前に設定します。

    コントロールの追加および構成 についてはこちらをご覧ください。

    指定した画像が 画像 コントロールに表示されます。

データ ソースからの一連の画像を表示する

  1. この Excel ファイル をダウンロードして、ローカル デバイスに保存します。

  2. Power Apps Studio で、アプリを作成するか開いてから、右側のウィンドウで データ ソースの追加 をクリックまたはタップします。

    右側のウィンドウに データ ソースの追加 が表示されない場合、左側のナビゲーション バーの画面をクリックまたはタップします。

  3. 静的データをアプリに追加 をクリックまたはタップして、ダウンロードした Excel ファイルをクリックまたはタップしてから、 開く をクリックまたはタップします。

  4. 床材の見積もり チェック ボックスをオンにしてから、 接続 をクリックまたはタップします。

  5. ギャラリー コントロールを画像に追加し、 項目 プロパティを FlooringEstimates に設定します。

    コントロールの追加および構成 についてはこちらをご覧ください。

    ギャラリー コントロールには、ダウンロードした Excel ファイルのリンクに基づくカーペット、硬木、およびタイル製品の画像が表示されます。

アクセシビリティ ガイドライン

色のコントラスト

  • グラフィックがボタンとして使用される場合、標準色のコントラスト要件 が適用されます。
  • 純粋な装飾でない画像の場合、画像内のコントラストの問題を確認することを検討してください。

スクリーン リーダー サポート

  • グラフィックがボタンとして使用されるか、または単なる装飾用ではない場合は、 AccessibleLabel が存在する必要があります。
  • グラフィックが純粋に装飾用である場合は、 AccessibleLabel を空または空の文字列 "" にする必要があります。 これにより、スクリーン リーダーでグラフィックが無視されます。
  • グラフィックが不要な情報を提供する場合は、 AccessibleLabel を空または空の文字列 "" にすることができます。
    • たとえば、 AccessibleLabel設定 に設定された歯車の 画像 があるとします。 このイメージは、ボタンとしては使用されません。 Label の横にあり、 設定 であることを示しています。 スクリーン リーダーは、画像を 設定 として読み取り、ラベルをもう一度 設定 として読み取ります。 これは不必要に冗長なものです。 この場合、 画像AccessibleLabel は必要ありません。

      重要

      スクリーン リーダーは、 AccessibleLabel が空の場合でも、 TabIndex が 0 以上の 画像 を常に読み取ります。 これはボタンとしてレンダリングされるためです。 AccessibleLabel が指定されていない場合、スクリーン リーダーは単純にグラフィックを ボタン として読み取ります。

キーボードのサポート

  • グラフィックをボタンとして使用する場合は、 TabIndex を 0 以上にする必要があります。 こうすることで、キーボード ユーザーがそこに移動できるようになります。

  • グラフィックをボタンとして使用する場合は、明確に判別できるフォーカス インジケーターが必要です。 これを実現するには FocusedBorderColor および FocusedBorderThickness を使用します。

    注意

    TabIndex が 0 以上の場合、 画像 はボタンとしてレンダリングされます。 外観は変更はありませんが、スクリーン リーダーは画像をボタンとして正しく識別します。 TabIndex が 0 未満の場合、 画像 は画像として識別されます。