PowerApps│すぐできるアイコンコントロールの使い方と活用事例

アイキャッチ




こんにちは、あんこ先生です。

アイコンコントロールはUIおよびUX向上に有効です。

それは、直感的に何を示しているのか理解できるからです。

例えば、プリンタのアイコンをみると印刷できるんだなってのがわかりますよね。

矢印が上を向いていれば増加、下を向いていれば減少などもわかります。

さらにボタンコントロールと同様にクリックすることで何らかのアクションを行わせることもできます。

このようにアイコンコントロールを活用することで、使い勝手のよいアプリが作成できるのです。

この記事では、アイコンコントロールの使い方と主要プロパティを解説します。

さらに、すぐ使える活用事例をコード付きで紹介します。

実際にコードをコピペして、動作を確認してみましょう!

すぐできるアイコンコントロールの使い方と活用事例


アイコンコントロールとは│Icon

複数のアイコン、図形から構成されるコントロールの総称です。

矢印、幾何学的図形、アクション、記号など多種多様なアイコンが用意されています。

直感的に機能をイメージできます。

OnSelectプロパティで、ボタンコントロールの代わりにもなります。

つまり、ユーザーに視覚的な体験を促すことに特化したコントロールなのです。

レコードの中身を一覧できるため、様々なアプリで利用されます。

アイコンコントロールの設置方法

リボンの挿入から下記アイコンを選べばアイコンコントロールが追加できます。

主要プロパティの使い方│アイコンコントロール

アイコンコントロールはアイコンと図形の2種類があります。

アイコン・図形に共通する主要プロパティは、次の2点です。

  1. コントロールの背景色を指定するFillプロパティ
  2. ユーザーがコントロールを選択したときに実行するアクションのOnSelectプロパティ

アイコンのみの主要プロパティは、次の3点です。

  1. 表示するアイコンのタイプを指定するIconプロパティ
  2. アイコンを回転させる度数を指定するRotationプロパティ
  3. 名前または RGBA 値によるアイコンの色を指定するColorプロパティ

これらの設定方法は次の通りです。

色と背景色│Color & Fill

Colorプロパティ

RGBA(54, 176, 75, 1) or Green //RGBAか色名で指定

Fillプロパティ
RGBA(54, 176, 75, 1) or Green //RGBAか色名で指定

  • どちらもコードの記述は同じです。
  • アイコンの場合、Colorがライン部分、Fillがそれ以外の色で塗りつぶされます。
  • 図形は背景色のみです。
  • アイコン・図形ともに、Borderプロパティで外枠を指定できます。

囲んだ部分だけ塗りつぶす機能はありません。


ボタン押下│OnSelect

OnSelectプロパティ
Navigate(Screen1, ScreenTransition.Fade) //別スクリーンに移動

  • アイコン・図形を押したときのアクションです。
  • データの書き込みや変数の格納など、ボタンコントロールと同様のアクションは行えます。


傾き│Rotation

Rotationプロパティ
180 //180度、つまり反転

  • アイコンのみ指定した数値分傾きます。

図形(矢印含む)は回転できないので。かゆいところに手が届きません。

活用事例とサンプルコード│アイコン


サイズを変えてもゆがまない

  • SVGで作成されているため、どのサイズでもきれいです。
  • 縦横どちらかの値が小さい場合は、それにあわせたサイズになります。


他コントロールと重ねる

  • 他コントロールと重ねることでいろいろな表現ができます。
  • 図のようにタグっぽいものや、ドーナツ型円グラフなど使い方はアイデア次第です。


数式で傾きを変える

Iconxx.Rotationプロパティ
If(ThisItem.Border>ThisItem.Value,0,180) //閾値より大きいなら上、小さいなら反転

  • 数式の結果により、アイコンの傾き(向き)を変えます。
  • 矢印は図形なので、代替できるアイコンを使っています。
  • 左側のアイコンは高さをすこしずらして2つ重ねています。


サイズや傾きを組み合わせる

  • サイズを変えても劣化しない特性を活かして色々と組み合わせて表現します。
  • 図はゴミ箱を45度傾け、作成を小さくしたものを3つ適当に配置しています。


高さを数式として棒グラフっぽくみせる

  • YプロパティHeightプロパティに数式を埋め込み算出します。
  • ギャラリーコントロールを使うとかんたんに表現できます。


ボタンコントロールの代わりに使う

  • 図のようにアイコンの方がシンプルでわかりやすいです。
  • ラベルコントロールで捕捉すると完璧です。


背景に表示させイメージをかきたてる

  • お金をイメージさせています。
  • 最背面に少し傾けて50%で通過させたアイコンを設置しています。

失敗例から学ぶ│アイコン

いまのところありません

まとめ

今回はアイコンコントロールを紹介しました。

おなじカテゴリーですが、アイコンと図形がありました。

さらに図形はアイコンと比べ使えるプロパティが少ないのがポイントです。

とはいえ、配置や組み合わせでいろいろな表現ができることを理解いただけたと思います。

試行錯誤してアイコンコントロールマスターを目指しましょう!


吹き出しも作りたいと思ったあなた!この記事もぜひ読んでください。

アイキャッチ
アイキャッチ-コントロール
アイキャッチ

ご支援よろしくおねがいします

この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。

下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。

受取人のメールアドレスは amazon@anko7793.com までお願いします。

メッセージもいただけるとたいへん喜びます。

よろしくお願いします。

Amazonギフト券(Eメールタイプ) 



コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
七草あんこ
非IT系中間管理職やってます。社命によりoffice365を主軸とした業務改善プロジェクトメンバーに任命されたことでPowerAppsと出会えました。いまではビジネス・プライベートを問わず、欠かせないツールになっています。導入初期やアプリ作成時に遭遇した諸問題の解決法とサンプルアプリの作り方を紹介していきます。主にTwitterで情報収集しているので不明点など呟いているとお邪魔するかもしれません。