---
title: Power Appsのギャラリーを使いこなそう
tags:  #power apps  
author: [コルネ](https://www.docswell.com/user/korune)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GEWLDNM372.jpg?width=480
description: Here&#039;s a summary of the use of gallery controls in Power Apps.
published: April 18, 20
canonical: https://www.docswell.com/s/korune/5N3DV5-2020-04-18-115652
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GEWLDNM372.jpg)

Microsoft Power Apps の
ギャラリーコントロールを使いこなそう！！
コルネ
@koruneko32767


# Page. 2

![Page Image](https://bcdn.docswell.com/page/47ZMG3QGE3.jpg)

自己紹介
Twitter
コルネ @koruneko32767
ブログ
https://koruneko.hatenablog.com/
YouTube
https://www.youtube.com/channel/UCYvIgC9JYS6VFumWdwi5QMA


# Page. 3

![Page Image](https://bcdn.docswell.com/page/YJ6NYX6QJV.jpg)

目次
・ギャラリーコントロールってなに？
・2つの項目毎に折り返されるように設定してみよう！
・高さ可変ギャラリーを使いこなそう！
・ギャラリー内のアイテムをギャラリー外から参照しよう！
・ギャラリーの中にギャラリーを配置しよう！
・TemplateSize = 0を理解しよう！


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GJ55GX62J4.jpg)

ギャラリーコントロールとは？
ギャラリーコントロールを使用すると
複数のデータソースを表示することができます。


# Page. 5

![Page Image](https://bcdn.docswell.com/page/9E2NYXM17R.jpg)

どこにあるの？
←ここです！
最近「カスタム」や
「AI Builder」が追加されて
表示されなくなってしまいました…
ぴえん


# Page. 6

![Page Image](https://bcdn.docswell.com/page/D7YPG8X47M.jpg)

まずは簡単に触ってみよう！


# Page. 7

![Page Image](https://bcdn.docswell.com/page/VEN5GQ16J8.jpg)

基本操作


# Page. 8

![Page Image](https://bcdn.docswell.com/page/Y79YWD5RE3.jpg)

“items”に設定している
“CustomGallerySample”の
データが表示される
ギャラリー内の要素


# Page. 9

![Page Image](https://bcdn.docswell.com/page/G786N3YGJD.jpg)

2つの項目毎に
折り返されるように設定してみよう！


# Page. 10

![Page Image](https://bcdn.docswell.com/page/L7L9PV4XER.jpg)

折り返しの数(WrapCount)を指定することで
指定した数で行が折り返して表示されます
*ただし設定できる最大の数値は10です


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EMZ4GK37W.jpg)

DEMO


# Page. 12

![Page Image](https://bcdn.docswell.com/page/PER6WZXRJ9.jpg)

高さ可変ギャラリーを使いこなそう！


# Page. 13

![Page Image](https://bcdn.docswell.com/page/P7XMP96YJX.jpg)

こいつを選択！


# Page. 14

![Page Image](https://bcdn.docswell.com/page/37KGDP14ED.jpg)

Toggleによって表示/非表示が
切り替わるオブジェクトの配置


# Page. 15

![Page Image](https://bcdn.docswell.com/page/LJ3NRXQDJ5.jpg)

表示される内容によって高さが自動で調整される！


# Page. 16

![Page Image](https://bcdn.docswell.com/page/8JDWY292EG.jpg)

DEMO


# Page. 17

![Page Image](https://bcdn.docswell.com/page/VEP961ZL78.jpg)

ギャラリー内のアイテムを
ギャラリー外から参照しよう！


# Page. 18

![Page Image](https://bcdn.docswell.com/page/27VM3YW67Q.jpg)

このギャラリーに対して動作


# Page. 19

![Page Image](https://bcdn.docswell.com/page/5JGG39D2JL.jpg)

ギャラリーの指定した項目を選択
選択された項目は背景が赤に設定
Select(Gallery, Value(TextInput.Text))


# Page. 20

![Page Image](https://bcdn.docswell.com/page/47QX5W19JP.jpg)

ギャラリーの指定したボタンを押す
右のテキストの内容を変数に格納
UpdateContext({_text:ThisItem.SampleText})
Select(Gallery, Value(TextInput.Text), Button)


# Page. 21

![Page Image](https://bcdn.docswell.com/page/KE469K6RJ1.jpg)

ギャラリーの指定したTextInputに
入力された文字列を表示
Last(FirstN(Gallery.AllItems,
Value(TextInput1.Text))).TextInput2.Text
TextInput1：ギャラリー外
TextInput2：ギャラリー内


# Page. 22

![Page Image](https://bcdn.docswell.com/page/L71VKXVVJG.jpg)

DEMO


# Page. 23

![Page Image](https://bcdn.docswell.com/page/G7WLDNL3J2.jpg)

ギャラリーの中に
ギャラリーを配置しよう！


# Page. 24

![Page Image](https://bcdn.docswell.com/page/4JZMG3MG73.jpg)

ギャラリーの中にギャラリーを
追加するだけ！
簡単ですね！！


# Page. 25

![Page Image](https://bcdn.docswell.com/page/YE6NYXNQEV.jpg)

ではこのギャラリー(親)の中に配置した
ギャラリー(子)の要素を参照するにはどうすれば・・・


# Page. 26

![Page Image](https://bcdn.docswell.com/page/GE55GX52E4.jpg)

Gallery1：親ギャラリー
Gallery2：子ギャラリー
親ギャラリーの選択されている要素の
子ギャラリーを選択する
Select(Gallery1.Selected.Gallery2, Value())
OR
Select(Gallery1, Value(), Select(Gallery2, Value()))


# Page. 27

![Page Image](https://bcdn.docswell.com/page/972NYXN1JR.jpg)

Gallery1：親ギャラリー
Gallery2：子ギャラリー
親ギャラリーの選択されている要素の
子ギャラリーを選択する
Select(Gallery1.Selected.Gallery2, Value())
OR
Select(Gallery1, Value(), Select(Gallery2, Value()))


# Page. 28

![Page Image](https://bcdn.docswell.com/page/DJYPG8P4JM.jpg)

ではどうすればいいのか？


# Page. 29

![Page Image](https://bcdn.docswell.com/page/V7N5GQ56E8.jpg)

親ギャラリーの中にボタンを追加し、
ボタンは子ギャラリーの要素を指定するよう設定。
外部からは親ギャラリーのボタンを選択する。
親ギャラリー内のボタン
Select(Gallery2, Value(TextInput2.Text))
外部のボタン
Select(Gallery1, Value(TextInput1.Text), Button1)


# Page. 30

![Page Image](https://bcdn.docswell.com/page/YJ9YWDYR73.jpg)

DEMO


# Page. 31

![Page Image](https://bcdn.docswell.com/page/GJ86N36GED.jpg)

TemplateSize = 0を理解しよう！


# Page. 32

![Page Image](https://bcdn.docswell.com/page/LJL9PV9X7R.jpg)

ギャラリーには各項目の高さを指定する
“TemplateSize”が存在する
下記の設定がここのサイズ


# Page. 33

![Page Image](https://bcdn.docswell.com/page/47MZ4GZ3JW.jpg)

“TemplateSize”を0にするとどうなる？
表示されていたオブジェクトが全て重なる！


# Page. 34

![Page Image](https://bcdn.docswell.com/page/P7R6WZ6RE9.jpg)

レコード毎に座標・サイズを指定して任意の箇所に
オブジェクトを配置しよう！
冒頭にご紹介したように「折り返しの数」に指定できるのは
最大でも10までです。
しかし、この方法を用いればそれ以上の設定が可能になります。


# Page. 35

![Page Image](https://bcdn.docswell.com/page/PJXMP9MYEX.jpg)

この手法を用いる際の注意点
“TemplateSize = 0”に設定しても実際は”1”と設定されています。
なので”Y”に座標を適応する際、補正を行う必要があります。
// 指定するY座標
ThisItem.Y +
// 横方向のずれを補正(N:折り返しの数)
Mod(N - ThisItem.ID, N) // 縦方向のずれを補正(M:縦方向のピクセル数)
(ThisItem.Y / M)


# Page. 36

![Page Image](https://bcdn.docswell.com/page/3JKGDPG47D.jpg)

先ほどの式だけでもいいのですが…
このようにランダムで値をセットしていった場合、
ずれが生じてしまいます。。。


# Page. 37

![Page Image](https://bcdn.docswell.com/page/LE3NRXNDE5.jpg)

解決方法
ギャラリーの”Items”には”ID(通し番号)”でソートされた
ものを設定しましょう。
Sort(col, ID)
先ほどの式にさらに補正を加えます。
// 値が連続でない場合、さらに微調整を行う
(ThisItem.ID - 1) / N *
(1 - CountRows(Filter(col, ID &lt;= ThisItem.ID))
/ ThisItem.ID) * N *
// 値が連続している場合は0、そうでない場合は1(丸め誤差対応済)
RoundUp(1 - Round(CountRows(
Filter(col, ID &lt;= ThisItem.ID)) / ThisItem.ID, 10), 0)


# Page. 38

![Page Image](https://bcdn.docswell.com/page/8EDWY2W27G.jpg)

DEMO


# Page. 39

![Page Image](https://bcdn.docswell.com/page/V7P9619LJ8.jpg)

Q&amp;A


