PowerApps ~ Amazon風に画像をクリックすると、画像を切り替える(A) ~

PowerApps ~ Amazon風に画像をクリックすると、画像を切り替える(A) ~

どうも、あび教官です。

今回は、Amazon風に画像を切り替える方法のサンプルです。

(↓こんなやつ、説明では「大きい画像」左側の小さい複数の画像は「小さい画像」として表記します)

私のやり方としては、2つあります。

(A)イメージのパスに変数を設定し、小さい画像をクリックすると変数の値を変更することで大きい画像を切り替える。

(B)大きい画像の同じ位置に、複数の画像を重ねた状態にして、小さい画像をクリックすると大きい画像の可視/非可視を切り替える。 ※次回で説明します。

 

まずは(A)の説明をば

使用しているのは、ギャラリー(Gallery)とイメージ(Image)です。

※元データのExcelは前回作成したものを使用しています(PowerApps ~ ギャラリー ~)

中央上部がイメージ(大きい画像にあたります)、アイドリッシュ7の画像が並んでいる箇所がギャラリー(小さい画像)にあたります。

 

まず、イメージ(大きい画像)の「Image」に 変数:ImagePathを設定してます。

※変数名は何でもいいです。

次に、ギャラリーの「Onselect」に、先ほどの変数「ImagePath」に対して、ギャラリーのイメージの値を設定します。

※補足

Set(ImagePath,Gallery1.Selected.イメージ)

・Set(第一、第二):グローバル変数を設定します。第一が変数の名前、第二が第一の変数に入れる値を示します。

・Gallery1.Selected.なんちゃら:「Gallery1」ギャラリーのコントロール名です。自動で振られる名前で使用しているので「Gallery1」になってます。Selectedで「今ギャラリーで選択しているデータ」を扱えます。

 

完成!

 

(B)については、また今度!