今日は、コントロールの見た目を完全に？制御できるというコントロールテンプレートにチャレンジしてみたいと思います。
巷でよく見かける、WPFのデモとかの丸いボタンとかは、多分この方法で作られてるはず！
何事もまず単純なところからスタート！！
ってことで、ボタンがあるだけのウィンドウを１つこさえました。
Window1.xaml
<Window x:Class="WpfStepByStep.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ControlTemplate" Height="150" Width="150">
<Grid Margin="10">
<Button Content="Hello world" />
</Grid>
</Window>
なんて名前でプロジェクト作ったのかバレバレだけど気にしない。
いらないとは思うけど一応before/afterのために実行結果をのせておく。
ControlTempalte適用前
早速コントロールテンプレートをかけてみようと思う。
ボタンのTemplateプロパティにControlTemplateを設定するがよろしいとのお告げを見つけたので、やってみました。
とりあえず無難にRectangleを設定！
コントロールテンプレートを適用したWindow1.xaml
<Window x:Class="WpfStepByStep.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ControlTemplate" Height="150" Width="150">
<Grid Margin="10">
<Button Content="Hello world">
<Button.Template>
<ControlTemplate>
<Rectangle Fill="Red" />
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Window>
実行すると、ボタンが真っ赤な四角形になります。
スクリーンショットじゃわからないけど、押してもボタン特有のプッシュした感じも無くなってる。
さて、これを頑張ってボタンっぽくしたい。
ボタンのテンプレート差し替えたのにボタンっぽくしたいってどういうことだ！って言われそうだけど、ボタンなんだからボタンらしく動かしたいと思うのが人情。
とりあえず背景色からそれっぽく染めていこうと思う。
あっついでに、四角だとつまらないから楕円にしておいた。
ボタンっぽい色
<Window x:Class="WpfStepByStep.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ControlTemplate" Height="150" Width="150">
<Grid Margin="10">
<Button Content="Hello world">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Ellipse Fill="{TemplateBinding Property=Background}" />
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Window>
今回変わったところは、赤色の部分。
ControlTemplateのTargetType属性を追加したのは、その下のTemplateBindingを使うときにボタンにあるプロパティ名を指定しやすくするため。
これがないと、コントロール名.プロパティ名と書かねばならぬこともあるとか。
さて、TemplateBindingですが見た目をのっとったコントロールのプロパティに対してバインドするときに使います。
この例だと、Elipseの塗りつぶしの色がボタンの背景色と同じになる。
実行してみると、確かに同じになってるのが確認できる。
Strokeプロパティに適当な色を設定したらそれっぽくなるだろう。
まだ、ボタンらしいペコってへこむ感じとコンテンツが空だけど時間切れ…おやすみなさい。