Power Apps での Image コントロール

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

内容

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

キー プロパティ

Image – イメージ、オーディオ、マイクの各コントロールに表示される画像の名前、または URL です。

注意

  • すべての外部画像に HTTPS を使用して、最新ブラウザーで互換性を確保します。
  • 外部のイメージには匿名で (認証をすることなく) アクセスできる必要があります。

追加のプロパティ

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

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

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

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

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

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

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

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

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

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

Fill – コントロールの背景色。

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

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

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

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

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

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 – 他のコントロールに関連するキーボード ナビゲーションの順序。

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

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

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

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

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

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

Remove( DataSource, ThisItem )

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

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

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

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

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

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

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

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

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

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

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

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

  5. Gallery コントロールを画像に追加し、Items プロパティを FlooringEstimates に設定します。

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

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

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

色のコントラスト

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

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

  • AccessibleLabel は重要なグラフィックに設定する必要があります。

  • グラフィックが装飾用であるか、冗長な情報を提供する場合は、AccessibleLabel を空にするか、空の文字列 "" に設定します。 スクリーン リーダーはこれらのグラフィックを無視します。

たとえば、このフォームは変更できません という Label の横に南京錠の Image を配置できます。 Label にはその意味がすでに説明されているため、画像に AccessibleLabel は必要ありません。

重要

TabIndex が 0 以上の場合、Image はボタンになります。 外観は変わりませんが、スクリーン リーダーはボタンとして扱います。 AccessibleLabel が空の場合でも、コントロールを無視しません。

キーボードのサポート

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

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

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。