8発売まで1ヶ月をきりました。今回は、XAML/C#でのWindowsストアアプリ開発におけるカスタムコントロールの使用例をご紹介したいと思います。シンプルに見えてオリジナリティを出そうとすると意外とはまるAppBarボタンを例に解説します。Symbolにある字体が基本となっているAppBarボタンですが、すべてそれらのデザインで賄えるということも少ないのではないでしょうか。画像を使用したい場合に、ContentTemplateに画像を入れればOKというわけにはいきません。画像の場合、ポイントオーバー時やタップのデザインも色が正しく反転するよう設定する必要があります。1つ1つスタイルのビジュアルステートで設定するのは現実的ではありません。上図は左端の「徒歩」をタップした状態、右端の「ヘリコプター」を無効化した状態です。Studio」を使って作成したものです。カスタムコントロールでAppBarボタンをつくる汎用的に使えるAppBarボタンスタイルはStandardStyle.xamlに定義されています。使用する場合は、対象のスタイルのコメントアウト(RTM版からコメントアウトされるようになりました)を外して以下のように使用することができます。[右へ]25B6しかし、テキストによっては中央からズレた位置に表示されてしまうテキストも存在しますため注意が必要です。Symbolのテキストが使用されているため、枠とアイコンデザインの位置を調節することは難しいです。上記の場合に、カスタムコントロールを使用するとよいかと思います。例外として、アイコンデザインに画像を使用する箇所が少ない場合には、個別にスタイルを用意してもよいかと思います。カスタムコントロールを定義するButtonを継承したカスタムコントロール「CustomAppBarButton」をつくります。通常時の画像と、プレス時の画像を設定するプロパティを設けます。画像の場合は、型をImageSourceにします。※PressImageは型はUriでも構いません。カスタムコントロールのスタイルを定義するThemes/Generic.xamlでスタイルを設定します。下の例では、丸枠付きの画像を用意することを前提としています。Blendを使ってAppBarボタンのデフォルトのスタイルを編集すると簡単に作成できます。TemplateBidingを使ってImageとTitleを受け取っています。BasicTextStyle}”/></StackPanel>//ここにビジュアルステートを書く</Grid></ControlTemplate></Setter.Value></Setter></Style>ビジュアルステートですが、ApplicationViewStatesについてはデフォルトのAppBarボタンのスタイルと同様です。PointerOver、Pressed、Disabledの部分だけ抜粋します。Value=”0.5′′/></ObjectAnimationUsingKeyFrames></Storyboard></VisualState>【Pressed】ポインタープレス時にImageContentのSourceをPressImageに変更するTemplateBidingは使用できません。BidingでImageSource(またはUri)のプロパティPressImageを設定し、以下のように記述します。TemplatedParent}}“/></ObjectAnimationUsingKeyFrames></Storyboard></VisualState>【Disabled】無効化されたときに透明度を変化させるラベルも透過させるときは以下に加えます。汎用的に使えるスタイルを定義するアイコンデザインごとに統一させるためにカスタムコントロールの各デザインごとのスタイルを定義します。カスタムコントロールを使用する通常のAppBarボタンのようにスタイルを指定することで使用できます。ViewGridCustomAppBarButtonStyle}”/>まとめAppBarボタンを表示するためだけにカスタムコントロールというのは面倒な気もしますが、一度スタイルを作成してしまえば使いまわせることを考えると重宝するのではと思っています。そもそもAppBarボタンに画像を使うケースを想定して設定できるようにしておいて欲しいなと思います。サイトのご利用にあたって。