こんにちは、あんこ先生です。
いくつかあるコントロールの幅を揃えたい、テキストの色を変えたいといったとき、ひとつずつ設定していませんか？
じつは、コントロールは複数選択することでまとめて設定できちゃうんです。
これはコントロールの数が多ければ多いほど、その効果は高まります。
特別なスキルは要りません。
そこで、今回は知っているとPowerAppsの作業効率が大きく向上する方法を紹介します。
初心者から中級者の方は必見です。
この記事を読めばすぐに実践できるので、ぜひ最後まで読んでみてください。
Contents
各種コントロールのコードをまとめて記述する方法
コントロールを複数選択した状態でプロパティの値を変更した場合、そのすべてに適用されます。
この性質を利用して、複数コントロールをまとめて設定していきます。
異なるコントロール選択時は共通プロパティのみ表示される
異なる種類のコントロール同士を選択した場合、それらに共通するプロパティのみ表示されるようになります。
たとえば、境界線の色を設定するBorderColorはすべてのコントロールに存在するため表示されます。
ラベルとテキスト入力ではTextとDefaultプロパティが共通しないため、どちらも表示されません。
つまり、選択できるプロパティはコントロールの種類に関係なく、まとめて変更できるわけです。
コントロールを複数選択する方法
コントロールを複数選択する方法は２種類あります。
どちらも一長一短なので、状況に応じて使い分けてください。
- 範囲でまとめて選択する
選択したい範囲をマウスでドラッグします。
その際、表示されていない（Visible＝false）コントロールも含まれます。
個別に除きたいコントロールがある場合は、ctrl+クリックで選択を解除します。 - ctrl+クリックでひとつずつ選択する
コントロールをctrl+クリックで選択します。
表示されていない（Visible＝false）コントロールは選択できません。
※ツリービューには表示されるのでそちらからなら選択できます。
個別に除きたいコントロールがある場合は、もういちどctrl+クリックで選択を解除します。
コントロールの階層を変更する方法
ツリービューの三点リーダから再配列を選べばコントロール間の階層を変更できます。
これも複数選択すればその並びを維持したまま、相対的に階層を変更できます。
なお、ctrl+[またはctrl+]キーで階層をひとつずつ上下に移動することができます。
とても便利なので覚えておいてください。
各種コントロールのサイズや位置をまとめて変更する
幅を揃える│Width
コントロールを複数選択した状態で、サイズの幅、またはWidthプロパティを変更します。
高さを揃える│Height
コントロールを複数選択した状態で、サイズの高さ、またはHeightプロパティを変更します。
上寄せ│Y
コントロールを複数選択した状態で、サイズのY、またはYプロパティを変更します。
左寄せ│X
コントロールを複数選択した状態で、サイズのX、またはXプロパティを変更します。
位置揃え時の注意点
コントロールを複数選択した状態で、XとYをまとめて設定するとすべて重なってしまいます。
不要なコントロールは解除して揃えましょう。
コントロールの配置
階層と同様にツリービューの三点リーダから配置を選べばコントロールのおおまかな整列が行えます。
これもコントロールを複数選択すれば、まとめて変更できます。
なお、コントロールを３つ以上選択すると表示される左右に整列または上下に整列は、両端のコントロールを基準に等間隔で配置します。
その範囲が狭いと重なってしまうため、はじめに両端を配置してから整列させましょう。
とても便利なので覚えておいてください。
各種コントロールをまとめて配色する
テキスト│Color
テキストについて、Colorプロパティでまとめて配色できます。
フォーカス時、ポイント時などのテキストは別プロパティなので注意してください。
背景│Fill
背景について、Fillプロパティでまとめて配色できます。
フォーカス時、ポイント時などの背景は別プロパティなので注意してください。
境界線│BorderColor
境界線について、BorderColorプロパティでまとめて配色できます。
ただし、境界線の太さを設定するBorderThicknessプロパティの値が0の場合、表示されません。
これはDisabledBorderColor、FocusedBorderColor等もおなじ結果となります。
上図だと一番上のラベルが該当します。
もちろん値を増やせば設定した色の境界線が表示されます。
部分ごとの色を設定したいときに役立つ記事はコチラ
疑似スタイルシートを設定する
変数を用いて動的に配色する
色に関するプロパティにRGBA型の変数を指定することで動的に配色することができます。
上図ではBorderColorプロパティに_testColorという変数を指定しました。
RGB各色に対応したスライダーと連動し、境界線の色が変化します。
//スライダーのOnChange
Set(_testColor,RGBA(SliderR.Value,SliderG.Value,SliderB.Value,1))
起動時に変数を設定する
AppのOnStartプロパティで変数を格納することで起動時に配色できます。
疑似的なスタイルシートとして運用できますね。
同様にユーザー情報から条件分岐させれば、ユーザーごとに配色を変えることもできます。
もちろん対象のコントロールについて変数を設定しておく必要がありますよ。
サンプルコードは次の通りです。
Set(_color,RGBA(96,96,96,1));//テキスト
Set(_fillColor,RGBA(253, 222, 207, 1));//背景
Set(_borderColor,RGBA(246, 88, 16, 1));// 境界線▪OnChange処理などをまとめて記述する
ユーザー操作に依存するOn~系の処理についてもまとめて設定できます。
上図では３つのスライダーがあり、値が変わるたび変数を更新しています。
スライダーをひとつずつ選択してOnChangeにそれぞれ処理を記述します。
今回は３つなのでさほど手間ではありませんが、対象が増えるほど負担が高まります。
これもスライダーを複数選択すれば１回の記述で終わります。
とても便利ですね。
ギャラリーのテンプレートを使った作業効率UP方法も紹介しています。
各種コントロールのコードをまとめて記述する方法のまとめ
今回は初心者から中級者の方を対象に、各種コントロールのコードをまとめて記述する方法を紹介しました。
複数選択すれば共通するプロパティしか表示されなくなるのは便利ですよね。
季節ごとに配色を簡単に変更できるので、疑似スタイルシートもオススメです。
まとめて設定して作業効率を高めていきましょう！
複数のコントロールにまったくおなじ処理をさせるなら、Select関数を使った方がメンテナンスが容易になるよ。