2015年1月24日0件のコメントTweetゲームパッドのボタンデザインについてvGamePadのUI部分はWPF(XAML)でデザインしています。今回はその部分のみを切り出してまとめています。VisualStudioのデザイン画面のキャプチャです。右端のツィッターボタンは例として掲載しています。このデザインを構成するXAMLなんですが、サンプルのMainWindow.xamlを全文張ります。</Canvas></Window>基本的な考え方vGamePadではタッチスクリーン全域を覆う1枚のウィンドウ(Canvas)上に各ボタンになる部品を配置しています。上記XAMLを見ていただければわかると思いますがボタンになる部品そのものはButtonではありません。基本的にGrid、Ellipse、TextBlockの3つで構成しています。Symbolを使っています。Text="&#xE144;"/>のように、”&#xNNNN;”の形式で設定します。ちなみにプログラム(C#)では”\uNNNN”になります。Symbolのページを参照してください。0x10000以降にもいろいろな絵文字が存在します。ボタンテキストの回転+字キーのデザインは上下左右が必要になるため主に音楽の再生に使うPLAYアイコン(0xE102)を回転させて各方向のボタンテキストとしています。XAMLは回転させることも簡単にできるのですが、ちょっといろいろと必要になります。</TextBlock.RenderTransform></TextBlock>RotateTransformのAngleが回転角度を表しています。90度、180度、270度をそれぞれ指定することでそれぞれの方向を示したように見えるわけです。フォントにないイメージの指定vGamePadでは使っていないのですが、ジオメトリを使った図形をボタンイメージとして使うこともできます。Z"/>指定方法はいろいろあるのですが、例ではツィッターアイコンをPathで指定しています。実際、このジオメトリはこんなすごいこともできるようです。クラウディアさんを描いてみました(グラバグさんのブログより)しかしながら素人のわたくしには自作で恰好のいいデザインを作るのは無理でございます。他力本願、他の方のお力を借りてアイコンを作成します。Iconsをオススメします。一覧の中からアイコンを選択するだけでXAMLデータを生成してくれる優れものです。作成されたXAMLを単純にコピペするだけで作れてしまいます。次回、実際のタッチイベントをどのように処理しているかをまとめます。コメントをキャンセルメールアドレスが公開されることはありません。