UWP で角丸ボタンを作る
3月26日に行われたこちらのイベントで,ライブコーディングしていたのだけどその場でちゃんとできなかったので,改めて。
お題
UWP でもXamarin.Forms のCustom Renderer を使って角を丸くしたボタンコントロールを作りたい
その場しのぎの解法
田淵さんはStyle
で攻めていたのだけど,ここはControlTemplate
でいいんじゃないかとその場で書いたのがこれ(すこし加筆)。
これだと形状自体はお題通りのことが可能ながら,ホバーしたときのトリガーなどを規定していないので異なる動作になってしまう,と。 これは困りました。
ちゃんと作る
まあきちんとすべて反映させるにはボタンのスタイルをコピーするしかないと。そういった方のために,デフォルトのスタイルやテンプレートはきちんと公開されています。最新版はこちら。 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
がそれです。
で,コピーしてRootGrid
をBorder
にして,BorderBrush
ほかをTemplateBinding
してやって,CornerRadius
を書く。こんな感じに。
5行目から9行目がBorder
の定義で,今回の肝です。また,73行目あたりのContentPresenter
から,BorderBrush
とBorderThickness
を削除しています。外枠でやればいいことですからね。では動作を確認しましょう。
これがほしいものでした。