Buttonを角丸にカスタマイズする[ControlTemplate][TemplateBinding][XAML]

2017年11月19日

C#

ButtonコントロールをControlTemplate(コントロールテンプレート)を利用して、シンプルな形の角丸にカスタマイズしていきます。その過程で、ContentPresenterやTemplateBindingについて説明していきます。

 

 

5行目
ButtonのTemplateプロパティ(5行目)に、ControlTemplateクラスを設定しTargetTypeにButtonを指定しています。

 

11〜12行目
ContentPresenterを利用して、親コントロールのContentプロパティの内容を表示させることができます。ここでは3行目のButtonコントロールのContentプロパティの内容である「ボタン」が表示されることがわかります。もしこの12〜13行目を削除すると「ボタン」の文字が表示されなくなります。

 

 

 

次にTemplateBindingを設定してみます。TemplateBindingを利用すると、親コントロールのプロパティをバインドすることができます。

 

 

10行目

上記コードでは3行目のBackgroundで指定されているGrayが、実際のBorderのBackgroundとして設定されます。

 

 

上記で説明したContentPresenterやTemplateBindingの効力は、以下のように複数のボタンを作成して、リソース(Resources)内にControlTemplateを記述した場合に分かります。

 

 

 

最後に、ボタンのマウスオーバー時/クリック時に、ボタンの背景を変えるようにしています。

 

 

 

 

参照ページ・書籍


@IT

第4回 “見た目”を決めるコントロール・テンプレート

 

++C++; // 未確認飛行 C

テンプレート(WPF)

 

 

 

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー