ButtonコントロールをControlTemplate（コントロールテンプレート）を利用して、シンプルな形の角丸にカスタマイズしていきます。その過程で、ContentPresenterやTemplateBindingについて説明していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<Button Height="20" Width="100" Content="ボタン"> <Button.Template> <ControlTemplate TargetType="Button"> <Border Name="border" BorderThickness="1" BorderBrush="DarkGray" Background="Green" CornerRadius="10"> <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" /> </Border> </ControlTemplate> </Button.Template> </Button> |
5行目
ButtonのTemplateプロパティ（5行目）に、ControlTemplateクラスを設定しTargetTypeにButtonを指定しています。
11〜12行目
ContentPresenterを利用して、親コントロールのContentプロパティの内容を表示させることができます。ここでは3行目のButtonコントロールのContentプロパティの内容である「ボタン」が表示されることがわかります。もしこの12〜13行目を削除すると「ボタン」の文字が表示されなくなります。
次にTemplateBindingを設定してみます。TemplateBindingを利用すると、親コントロールのプロパティをバインドすることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<Button Height="20" Width="100" Background="Gray" Content="ボタン"> <Button.Template> <ControlTemplate TargetType="Button"> <Border Name="border" BorderThickness="1" BorderBrush="DarkGray" Background="{TemplateBinding Background}" CornerRadius="10"> <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" /> </Border> </ControlTemplate> </Button.Template> </Button> |
10行目
上記コードでは3行目のBackgroundで指定されているGrayが、実際のBorderのBackgroundとして設定されます。
上記で説明したContentPresenterやTemplateBindingの効力は、以下のように複数のボタンを作成して、リソース（Resources）内にControlTemplateを記述した場合に分かります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<Window.Resources> <ControlTemplate x:Key="buttonTemplate" TargetType="Button"> <Border Name="border" BorderThickness="1" BorderBrush="DarkGray" Background="{TemplateBinding Background}" CornerRadius="10"> <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" /> </Border> </ControlTemplate> </Window.Resources> <Grid> <StackPanel> <Button Height="20" Width="100" Margin="5" Background="Red" Content="ボタン1" Template="{StaticResource buttonTemplate}"> </Button> <Button Height="20" Width="100" Margin="5" Background="Green" Content="ボタン2" Template="{StaticResource buttonTemplate}"> </Button> </StackPanel> </Grid> |
最後に、ボタンのマウスオーバー時／クリック時に、ボタンの背景を変えるようにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<Window.Resources> <ControlTemplate x:Key="buttonTemplate" TargetType="Button"> <Border Name="border" BorderThickness="1" BorderBrush="DarkGray" Background="{TemplateBinding Background}" CornerRadius="10"> <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" /> </Border> <ControlTemplate.Triggers> <!--マウスオーバー時--> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="border" Property="Background" Value="DarkGray" /> </Trigger> <!--クリック時--> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="border" Property="Background" Value="Gray" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Window.Resources> <Grid> <StackPanel> <Button Height="20" Width="100" Margin="5" Background="Red" Content="ボタン1" Template="{StaticResource buttonTemplate}"> </Button> <Button Height="20" Width="100" Margin="5" Background="Green" Content="ボタン2" Template="{StaticResource buttonTemplate}"> </Button> </StackPanel> </Grid> |
参照ページ・書籍
＠IT
++C++; // 未確認飛行 C
