PowerApps ~ Amazon風に画像をクリックすると、画像を切り替える（B） ~

どうも、あび教官です。

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

（B）大きい画像の同じ位置に、複数の画像を重ねた状態にして、小さい画像をクリックすると大きい画像の可視/非可視を切り替える。

イメージはこんな感じ↓

基本的に前回と同様ですが、大きい画像の所に手を加えます。

下記の通りに、大きい画像の位置に10枚のイメージを重ねます。

それぞれのイメージの「image」の値を、LookUp関数を使用して各アイドルごとの（七瀬陸とか和泉一織）イメージの値を設定します。

※取り出すのは↓の部分

「image」にセットする関数は以下です。

LookUP(第一、第二、第三)

第一：データソース

第二：抽出の条件

第三：抽出したい項目

同様に他の9枚のイメージを設定します。

次は、各イメージの表示/非表示の設定を行います。

グローバル変数を作成して、その中の値によって各イメージの表示/非表示を切り替えます。

手順としては

①小さい画像のOnSelect時(画像をクリックした時)に「ImageFlg」という変数にNoを設定する。

②大きい画像(先ほど10枚設定したイメージ)のVisibleに「自分のNoの時は表示、それ以外のときは非表示)と関数を設定します。

まず、①は以下のように「idol1」のイメージをクリックした時に、

変数「ImgeFlg」にNo（↓の画像では１）を設定します。

次の②は、イメージの表示/非表示を、変数「ImageFlg」の設定された値によってVisibleのtrueとfalseを切り替えます。 

完成のサンプルは以下です。

設定済みのイメージの表示/非表示を切り替えているので。前回のサンプルよりも、こちらの方が大きい画像の処理が早いです。