こんにちは、あんこ先生です。
PowerAppsでもパワポのような吹き出しを使いたいと思いませんか？
数値を見せるときに吹き出しで括った方が見栄えがいいし、目を引きますよね。
ところが、PowerAppsの図形は角度調整どころか左右反転すらできません。
SVGを使えばなんとでもなるんですが、ちょっとした専門知識と微調整がめんどいです。
そこで、今回は「それでも吹き出しを使いたい！」という方のために、コントロールのみで吹き出しを作成する方法を解説します。
この記事を読めば、PowerAppsデザインの新天地にたどり着けるかも！
Contents
PowerAppsでパワポのような吹き出しを作る方法
吹き出しの基本パーツ
使用するのはすべて標準かつ馴染みのあるコントロールです。
具体的には、吹き出し部分にテキスト入力、先っちょ部分に図形(四角形)またはラベルを使います。
この組み合わせで表現できるのか半信半疑かもしれませんが、安心してください。
間違いなくこの組み合わせで表現できます。
この後、具体的な作成方法やアレンジ方法を紹介していきます。
吹き出し本体の作り方│テキスト入力
テキスト入力を設置しサイズを変更する
まず適当なテキスト入力を設置します。
今回は新円の吹き出しを作りますので、サイズは正方形に変更します。
後から変更も容易なので、とりあえず100×100としておきましょう。
角を丸める
実はテキスト入力に角の丸みを設定するRadiusTopLeftプロパティというものがあります。
この数値を増やすと四角から真円へ徐々に近づきます。
概ね一片の長さの60%辺りでほぼ真円になります。
計算がめんどくさいので一片の長さに合わしてしまいましょう。
今回の一片は100なので、RadiusTopLeftプロパティの値も100にします。
細かい設定
色やフォントサイズ、太さなどをお好みで変更します。
文字位置はセンターがオススメですが、なぜか左パディングが多く若干右寄りになります。
そのため、PaddingLeftプロパティの値を5に指定しておきましょう。
また、普通にテキスト入力できてしまうのでDisplayModeプロパティはViewにしておきます。
これで、吹き出し部分は完成です。
吹き出し先っちょの作り方│四角形orラベル
斜めにつける
先っちょを斜めにつける場合は、同じ色の四角形を適当な位置および下層レイヤーに移動させるだけです。
四角形の１角のみ表示され、先っちょっぽくなります。
もう少しとんがった方がお好みなら、取付箇所は制限されますが三角形でも代用できます。
上下左右につける
先っちょを上下左右につける場合は、同じ色のラベルに▲▼◀▶（さんかく）を入力し適当な位置および下層レイヤーに移動させるだけです。
文字の一部のみ表示され、これまた先っちょっぽくなります。
角を丸めたものがお好みなら、こちらも取付箇所は制限されますが半円などでも代用できます。
使い勝手を向上させる
今回紹介した吹き出しは2つのコントロールで構成されていますが、位置や表示有無を変える場合は少々扱いづらいです。
それらの問題が解消するため、あらかじめコンテナを用意し、その中に格納することを強くオススメします。
吹き出しのアレンジ紹介
四角形ベースの吹き出し
テキスト入力を横長の長方形にし、RadiusTopLeftプロパティを調整することで表現できます。
文字と背景を反転させれば、色付きも可能です。
この場合、見栄えの観点から先っちょは上下に限定した方がよさそうです。
吹き出しをつなげる
真円のテキスト入力を4つ重なるように連ねました。
上下にもブレをつければ、さらにもこもこ感が高まりますね。
パワポのような吹き出しを作る方法のまとめ
今回はパワポのような吹き出しを作る方法を紹介しました。
基本はテキスト入力と何かを組み合わせて表現しています。
仕組みが分かれば単純なので、アイデア次第で様々なデザインに応用できそうです。
おしゃれっぽいアプリ作成に役立ててみてください。
ご支援よろしくおねがいします
この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。
下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。
受取人のメールアドレスは amazon@anko7793.com までお願いします。
メッセージもいただけるとたいへん喜びます。
よろしくお願いします。
コメントを残す