こんにちは、あんこ先生です。
アイコンコントロールはUIおよびUX向上に有効です。
それは、直感的に何を示しているのか理解できるからです。
例えば、プリンタのアイコンをみると印刷できるんだなってのがわかりますよね。
矢印が上を向いていれば増加、下を向いていれば減少などもわかります。
さらにボタンコントロールと同様にクリックすることで何らかのアクションを行わせることもできます。
このようにアイコンコントロールを活用することで、使い勝手のよいアプリが作成できるのです。
この記事では、アイコンコントロールの使い方と主要プロパティを解説します。
さらに、すぐ使える活用事例をコード付きで紹介します。
実際にコードをコピペして、動作を確認してみましょう！
すぐできるアイコンコントロールの使い方と活用事例
アイコンコントロールとは│Icon
複数のアイコン、図形から構成されるコントロールの総称です。
矢印、幾何学的図形、アクション、記号など多種多様なアイコンが用意されています。
直感的に機能をイメージできます。
OnSelectプロパティで、ボタンコントロールの代わりにもなります。
つまり、ユーザーに視覚的な体験を促すことに特化したコントロールなのです。
アイコンコントロールの設置方法
リボンの挿入から下記アイコンを選べばアイコンコントロールが追加できます。
主要プロパティの使い方│アイコンコントロール
アイコンコントロールはアイコンと図形の２種類があります。
アイコン・図形に共通する主要プロパティは、次の２点です。
- コントロールの背景色を指定するFillプロパティ
- ユーザーがコントロールを選択したときに実行するアクションのOnSelectプロパティ
アイコンのみの主要プロパティは、次の３点です。
- 表示するアイコンのタイプを指定するIconプロパティ
- アイコンを回転させる度数を指定するRotationプロパティ
- 名前または 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) //閾値より大きいなら上、小さいなら反転
- 数式の結果により、アイコンの傾き（向き）を変えます。
- 矢印は図形なので、代替できるアイコンを使っています。
- 左側のアイコンは高さをすこしずらして２つ重ねています。
サイズや傾きを組み合わせる
- サイズを変えても劣化しない特性を活かして色々と組み合わせて表現します。
- 図はゴミ箱を45度傾け、作成を小さくしたものを３つ適当に配置しています。
高さを数式として棒グラフっぽくみせる
- YプロパティとHeightプロパティに数式を埋め込み算出します。
- ギャラリーコントロールを使うとかんたんに表現できます。
ボタンコントロールの代わりに使う
- 図のようにアイコンの方がシンプルでわかりやすいです。
- ラベルコントロールで捕捉すると完璧です。
背景に表示させイメージをかきたてる
- お金をイメージさせています。
- 最背面に少し傾けて50%で通過させたアイコンを設置しています。
失敗例から学ぶ│アイコン
いまのところありません
まとめ
今回はアイコンコントロールを紹介しました。
おなじカテゴリーですが、アイコンと図形がありました。
さらに図形はアイコンと比べ使えるプロパティが少ないのがポイントです。
とはいえ、配置や組み合わせでいろいろな表現ができることを理解いただけたと思います。
試行錯誤してアイコンコントロールマスターを目指しましょう！
吹き出しも作りたいと思ったあなた！この記事もぜひ読んでください。
レコードの中身を一覧できるため、様々なアプリで利用されます。