はじめに
PowerApps、特にキャンバスアプリのよいところ(の一つ)は、ドラッグ＆ドロップで各種コントロール(アプリの構成要素・パーツ)を自由に配置して、簡単に画面を作成し、データをコネクターによってつなげることができることです。
しかし、パーツのレイアウトや形状の細かな変形(おもに回転や歪み)には、いつも使っているPowerPointなどと比べて融通がきかないところがあります。
今回は、このような少しの制約を緩和するTIPSを紹介します。
パーツはどこまで動かせるか
基本的にはコントロールは画面(Screen)内に収める必要があります。実際、ドラッグ＆ドロップでコントロールを移動できる範囲や、XY座標、幅・高さの直接指定では画面内に収まるように制限されています。
ということで、画面の中にしかコントロールは配置できません！ 基本的には。
画面外に配置する/はみ出させるためには
回避方法はあります。それが 「"0"を入れる」/「数式で表す」という方法です。
最初の例では、円のX座標(左上の角)を-10と指定したところ、書き戻されてしまいました。
これを、 Circle1.X : 0-10と指定するだけで、画面外に飛びさせることができます。
また、幅も同様に、画面の横幅が640だったとしても、Circle1.Width : 0+800 と指定することで、画面幅よりも広くできます。
※図では簡便のために-100にしています。
画面だけでなく、この方法はコンテナーやコンポーネントにも有効です。
利用例1
簡単な利用例を見ていきます。
まずはスクロール可能なスクリーンにおいて、スクロールバーの部分だけを画面外に追い出してみます。
スクロール可能な画面は、Canvasという特殊なコントロールで構成されていますが、残念ながらこれにはスクロールバーを隠す設定が存在しません。
この場合には、CanvasのWidthの定義に+15をしてあげることで、スクロールバーを追い出すことができます。
利用例2
ほかの利用例として、画像の一部を画面に表示させることが可能です。
横に広い画像をスクリーンに配置して、部分的に利用したい場合、幅の制約があるので、下図のように残念な仕上がりになります。
そこで、X座標を少し左(マイナス位置)に、幅をスクリーンよりも大きくとります。
これによって、結果的に画像の一部をきりとって表示させることができます。
おわりに
このように、幅や座標を数式で指定することによって、ドラッグ＆ドロップでは実現できないようなレイアウトが可能になります。
皆さんもぜひ試してみてください。