学Silverlight 2系列（9）：使用控件模板

<Canvas Background="#46461F">
　　<Button x:Name="button1" Style="{StaticResource RoundButton}"
　　　　　　Canvas.Top="80" Canvas.Left="150"/>
</Canvas>

运行后就可以看到下面的效果：

创建模板

上面的示例中，控件的文字以及控件的大小都是固定的，我们希望在开发人员使用中再设定，可以在控件模板中通过使用 {TemplateBinding ControlProperty} 的标识扩展句法来绑定到控件的属性来实现，使用ContentPresenter控件可以灵活的设置各个属性。修改RoundButton样式如下所示：

<Style x:Key="RoundButton" TargetType="Button">
　　<Setter Property="Template">
　　　　<Setter.Value>
　　　　　　<ControlTemplate TargetType="Button">
　　　　　　　　<Grid x:Name="RootElement">
　　　　　　　　　　<Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
　　　　　　　　　　　　　　　 RadiusX="15" RadiusY="15">
　　　　　　　　　　　　<Rectangle.Fill>
　　　　　　　　　　　　　　<LinearGradientBrush StartPoint="0,0">
　　　　　　　　　　　　　　　　<GradientStop Color="#FFFFFF" Offset="0.0" />
　　　　　　　　　　　　　　　　<GradientStop Color="#EC04FA" Offset="1.0" />
　　　　　　　　　　　　　　</LinearGradientBrush>
　　　　　　　　　　　　</Rectangle.Fill>
　　　　　　　　　　　　<Rectangle.Stroke>
　　　　　　　　　　　　　　<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
　　　　　　　　　　　　　　　　<GradientStop Color="#EC04FA" Offset="0" />
　　　　　　　　　　　　　　　　<GradientStop Color="#FFFFFF" Offset="1" />
　　　　　　　　　　　　　　</LinearGradientBrush>
　　　　　　　　　　　　</Rectangle.Stroke>
　　　　　　　　　　</Rectangle>
　　　　　　　　　　<ContentPresenter
　　　　　　　　　　　　Content="{TemplateBinding Content}"
　　　　　　　　　　　　FontSize="{TemplateBinding FontSize}"
　　　　　　　　　　　　HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
　　　　　　　　　　　　VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
　　　　　　　　　　　　Foreground="{TemplateBinding Foreground}">
　　　　　　　　　　</ContentPresenter>
　　　　　　　　</Grid>
　　　　　　</ControlTemplate>
　　　　</Setter.Value>
　　</Setter>
</Style>

这样在使用RoundButton时我们可以设定控件的文本及控件的大小：

<Canvas Background="#46461F">
　　<Button x:Name="button1" Style="{StaticResource RoundButton}"
　　　　　　Canvas.Top="80" Canvas.Left="50"
　　　　　　Content="提 交" FontSize="26"
　　　　　　HorizontalContentAlignment="Center"
　　　　　　VerticalContentAlignment="Center"
　　　　　　Foreground="White" Width="200" Height="60"/>
　　
　　<Button x:Name="button2" Style="{StaticResource RoundButton}"
　　　　　　Canvas.Top="80" Canvas.Left="260"
　　　　　　Content="取 消" FontSize="26"
　　　　　　HorizontalContentAlignment="Center"
　　　　　　VerticalContentAlignment="Center"
　　　　　　Foreground="White" Width="100" Height="100"/>
</Canvas>

运行时效果如下：

结束语

本文简单的介绍了如何定制控件的内容以及通过控件模板完全定制控件，你可以从下载本文示例代码。