うさぎ駆動開発

UWP, Xamarin.Macを中心によしなしごとを書いていきます。

UWP で角丸ボタンを作る

3月26日に行われたこちらのイベントで,ライブコーディングしていたのだけどその場でちゃんとできなかったので,改めて。

jxug.connpass.com

お題

UWP でもXamarin.Forms のCustom Renderer を使って角を丸くしたボタンコントロールを作りたい

その場しのぎの解法

田淵さんはStyle で攻めていたのだけど,ここはControlTemplate でいいんじゃないかとその場で書いたのがこれ(すこし加筆)。

これだと形状自体はお題通りのことが可能ながら,ホバーしたときのトリガーなどを規定していないので異なる動作になってしまう,と。f:id:ailen0ada:20160327141408g:plain これは困りました。

ちゃんと作る

まあきちんとすべて反映させるにはボタンのスタイルをコピーするしかないと。そういった方のために,デフォルトのスタイルやテンプレートはきちんと公開されています。最新版はこちら。 Button styles and templates - Windows app development

ローカルにもあります。SDKバージョンにより微妙に仕様が違う場合があるので,ローカルを参照する方がいいかもしれません。(Program Files(x86))\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic にあるgeneric.xaml がそれです。

で,コピーしてRootGridBorder にして,BorderBrush ほかをTemplateBinding してやって,CornerRadius を書く。こんな感じに。

5行目から9行目がBorder の定義で,今回の肝です。また,73行目あたりのContentPresenter から,BorderBrushBorderThicknessを削除しています。外枠でやればいいことですからね。では動作を確認しましょう。

f:id:ailen0ada:20160327145813g:plain

これがほしいものでした。

まとめ

  • ControlTemplate でなんでもできる
  • Style は素の状態ではXAML上で合成できないので使いどころを見極める
  • デフォルトのコントロール定義はSDKに入ってて+オンラインにあって誰でも参考にできる