キャンバス アプリの Add picture コントロール

写真を撮影したり、ローカル デバイスから画像を読み込みます。

内容

このコントロールを使用すると、ユーザーは写真を撮影したり、デバイスから画像ファイルをアップロードしたり、このコンテンツでデータ ソースを更新したりできます。 モバイル デバイスでは、ユーザーにはデバイスの選択ダイアログが表示され、ユーザーは写真を撮影するか既存の画像を使用するかを選択できます。

このコントロールは、Image および Add picture button の 2 つのコントロールを含むグループ化されたコントロールです。 Image コントロールには、アップロードされた画像、または画像がアップロードされていない場合はプレースホルダーが表示されます。 Add picture button は、画像をアップロードするように求めます。

Image プロパティについては、画像コントロールのリファレンス を参照してください。

Add picture ボタン プロパティ

AccessibleLabel – スクリーン リーダー用のラベル。 画像追加の目的を説明する必要があります。

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

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

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

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

ChangePictureText – 画像がアップロードされたときにボタンに表示されるテキスト。

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

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

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

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

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

Error - 画像のアップロードで問題が発生した場合、このプロパティには該当するエラー文字列が含まれます。

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

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

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

Font – テキストを表示するフォントのファミリーの名前。

FontWeight – コントロール内のテキストの太さ: 太字中太標準、または 細字

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

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

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

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

Italic – コントロール内のテキストを斜体にするかどうか。

Media – オーディオまたはビデオ コントロールが再生するクリップの ID です。

OnChange – ユーザーが (スライダーを調整するなどして) コントロールの値を変更したときに実行するアクション。

OnSelect – ユーザーがコントロールをタップまたはクリックしたときに実行するアクション。

Padding – インポートまたはエクスポート ボタンのテキストと、そのボタンの端との間の距離。

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

PressedColor – ユーザーがコントロールをタップまたはクリックしたときのコントロール内のテキストの色。

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

Reset – コントロールを既定値に戻すかどうかを指定します。

Size – コントロールに表示されるテキストのフォント サイズ。

Strikethrough – コントロールに表示されるテキストに取り消し線を付けるかどうか。

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

Text – イメージがアップロードされていないときにボタンに表示されるテキスト。

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

Underline – コントロールに表示されるテキストの下に線を引くかどうか。

UseMobileCamera – 利用可能な場合に、モバイル カメラを直接使用するかどうか。

VerticalAlign – コントロールの垂直方向の中心に対するコントロール上でのテキストの位置。

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

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

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

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

Patch( DataSourceBaseRecordChangeRecord )

  1. Add picture コントロールを追加してから、それをトリプルクリックします。

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

  2. 開く ダイアログ ボックスで、画像ファイルをクリックまたはタップしてから、開く をクリックまたはタップします。

  3. Button コントロールを追加して、Add picture コントロールの下に移動し、Button コントロールの OnSelect プロパティを次の数式に設定します:
    Collect(MyPix, AddMediaButton1.Media)

    Collect 関数または その他の関数 については、各関連記事を参照してください。

  4. Vertical gallery コントロールを追加し、その Items プロパティを MyPix に設定します。

  5. ギャラリーで Image コントロールを選択して、Image プロパティを ThisItem.Value に設定します。

  6. F5 キーを押してから Button コントロールをクリックまたはタップします。

    Add picture コントロールの画像が Vertical Gallery コントロールに表示されます。 画像の縦横比が Vertical gallery コントロール内の Image コントロールと同じでない場合は、Image コントロールの ImagePosition プロパティを 自動調整 に設定します。

  7. Add picture コントロールをクリックまたはタップし、別の画像ファイルをクリックまたはタップし、開く をクリックまたはタップしてから、追加した Button コントロールをクリックまたはタップします。

    2 番目の画像が Image gallery コントロールに表示されます。

  8. (オプション) 前の手順を何回も繰り返してから、Esc キーを押して既定のワークスペースに戻ります。

SaveData 関数を使用して画像をローカルに保存するか、Patch 関数を使用してデータ ソースを更新します。

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

Button および Image と同じガイドラインが適用されます。 さらに次の点について考慮してください:

色のコントラスト

  • Add picture button には、テキストと背景の間に適切なコントラストが必要です。 アップロードされる画像にはさまざまな色が存在する可能性があるので、Add picture button で不透明な Fill を使用して一貫したコントラストにします。

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

  • Add picture button には、ユーザーに画像の追加または変更を求める Text および ChangePictureText が必要です。

キーボードのサポート

  • Add picture button では、TabIndex を 0 以上にして、キーボード ユーザーがそこに移動できるようにする必要があります。
  • Add picture button には、明確に判別できるフォーカス インジケーターが必要です。 これを実現するには FocusedBorderColor および FocusedBorderThickness を使用します。

注意

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

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