その１
http://blogs.wankuma.com/kazuki/archive/2007/10/23/103382.aspx
その１では、ボタンを丸くしただけで終わってしまった。これじゃ丸くなっただけでボタンとして何も役にたたん！！
ってなことで、もうちょっとボタンらしくしてみようと思う。
とりあえず、ボタンのContentを表示しないとただの楕円になっちゃう。
こういうときには、ContentPresenderを使うとContentプロパティを表示してくれるっていう寸法みたいだ。
早速XAMLを書き換え。
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 TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="{TemplateBinding Property=Background}" />
<ContentPresenter />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Window>
赤い部分が書き足したもの。Gridを足しているのは、ControlTemplateには複数のブツを置くことができないからです。
これを実行するとボタンのContentが表示される！！
表示されたが…
私ボタンとはまったく関係ありません的なテキストが表示されてる。
関係者なので、中に入ってもらう。
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 TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="{TemplateBinding Property=Background}" />
<ContentPresenter
HorizontalAlignment="{TemplateBinding Property=HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Property=VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Window>
ボタンに、HorizontalContentAlignmentやVerticalContentAlignmentがあるので、それをバインドしてる。
これを実行すると、今まで別々っぽかったテキストと楕円が一体感を持つようになる。
これに調子にのってEllipseのStrokeプロパティにButtonのForegroundをバインドして、よりボタンっぽくする。
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 TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="{TemplateBinding Property=Background}"
Stroke="{TemplateBinding Property=Foreground}"/>
<ContentPresenter
HorizontalAlignment="{TemplateBinding Property=HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Property=VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Window>
実行してみると、かなりボタンちっくになってきてる。
だけど、まだ丸いだけでボタンを押したような感じが得られない。
これを解決するには、ボタンが押された時とか、ボタンにマウスカーソルがあるときに色を変えなきゃいけない。
これは、StyleのTriggerを使うとできるっぽい。
Styleって何？って感じもあるけど名前的にスタイルシートみたいなもんだろうと想像しても大丈夫だろう。
色々な指定方法があるっぽいけど、今回はわかりやすさのため一番汎用的じゃない書き方で！！
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.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="Blue" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" Value="Yellow" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="{TemplateBinding Property=Background}"
Stroke="{TemplateBinding Property=Foreground}"/>
<ContentPresenter
HorizontalAlignment="{TemplateBinding Property=HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Property=VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Window>
またもや赤い所が追加部分。
Styleを使うと、特定のプロパティに値を設定することが出来る。
本当なら、これはボタン直下とかじゃなくてボタンの外に追い出してやるのが一般的な使い方と思われる。
でも今回はばらけると、ダルイのでそのままです。
StyleにはTriggerっていう仕組みもあって、特定の条件を満たしたときのみプロパティに値を設定するってことが出来る。
今だとIsMouseOverがtrueの時にForegroundをBlueに、IsPressedがtrueの時にBackgroundをYellowにしています。
実行してみるとちゃんと色が変わる。
普通
マウスカーソルを上に持ってきた
クリックしてみた
出来てるっぽい！
色はセンス無いので気にしないでください。
ちなみに、次の課題はせっかくボタンを丸くしたのにボーダー枠が四角いまま…
後一歩っぽい！