キャンバス アプリの 画像の追加 コントロール

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

内容

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

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

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

制限

画像コントロールには、次の制限があります:

• iOS で 画像を追加 コントロールを使用する場合、カメラまたはギャラリーを使用してインポートされた画像には、向き、位置情報、カメラ設定などのメタデータが含まれません。

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 – コントロール内のテキストを斜体にするかどうか。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UseMobileCamera – 利用可能な場合に、モバイル カメラを直接使用するかどうか。 Android デバイスの場合、このプロパティには実験的な設定 改善されたメディアキャプチャ をオンにする必要があります。

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

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

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

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

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

関連する関数

Patch( DataSource、BaseRecord、ChangeRecord )

例

画像ギャラリー コントロールへの画像の追加

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

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

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

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

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

4. 垂直ギャラリー コントロールを追加し、その Items プロパティを MyPix に設定します。

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

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

   画像の追加コントロールの画像が垂直ギャラリー コントロールに表示されます。 画像の縦横比が 垂直ギャラリー コントロール内の 画像 コントロールと同じでない場合は、画像 コントロールの ImagePosition プロパティを 自動調整 に設定します。

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

   2 番目の画像が画像ギャラリー コントロールに表示されます。

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

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

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

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

色のコントラスト

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

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

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

キーボードのサポート

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