简单介绍Silverlight控件模板的使用方法

Silverlight中可以通过样式来改变控件的颜色，大小等。但是这些属性只能简单的改变控件的外观，如果想更灵活的改变控件的属性，那么就需要通过Silverlight的模板。

1.在样式中定义模板
控件的模板也是样式中的一个属性，在定义控件模板时和其他属性相同。如

<Style x:Key="btnStyle" TargetType="Button">
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="Button">
                       <Grid x:Name="RootElement">
                           <Rectangle Width="100" Height="40" RadiusX="25" RadiusY="25" Fill="AliceBlue">
                           Rectangle>
                           <TextBlock Text="Hello World" HorizontalAlignment="Center" VerticalAlignment="Center" />
                       Grid>
                   ControlTemplate>
               Setter.Value>
           Setter>
       Style>

控件引用

<Button Style="{StaticResource btnStyle}" Width="100" Height="100" Background="Red" Content="提交" Foreground="Black" >Button>

效果图

2.单独定义模板

<ControlTemplate x:Key="btnStyle" TargetType="Button">
            <Grid x:Name="RootElement">
                <Ellipse Width="200" Height="80">
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint="0,0">
                            <GradientStop Color="#FFFFFF" Offset="0.0" />
                            <GradientStop Color="#EC04FA" Offset="1.0" />
                        LinearGradientBrush>
                    Ellipse.Fill>
                    <Ellipse.Stroke>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FCB2FD" Offset="0" />
                            <GradientStop Color="#FFFFFF" Offset="1" />
                        LinearGradientBrush>
                    Ellipse.Stroke>
                Ellipse>
                <TextBlock Text="Hello World" FontSize="26" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            Grid>
        ControlTemplate>

单独定义模板通过ControlTemplate来定义，和样式相同也需要声明模板名称和目标类型，控件引用单独模板时候通过Template属性。
控件引用

<Button  Template="{StaticResource btnStyle}" Content="Hello World">Button>

效果

3.控件内部模板
控件可以单独在自己内部定义模板，如

<Button Content="Hello World">
           <Button.Template>
               <ControlTemplate>
                   <Grid>
                       <Ellipse Width="200" Height="200" Fill="Orange">
                       Ellipse>
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">ContentPresenter>
                   Grid>
               ControlTemplate>
           Button.Template>
       Button>

效果

在控件模板中定义了控件的显示文字，大小，颜色等属性的的时候，应用了模板的控件本身的属性会被忽略掉。可以通过{TemplateBinding ControlProperty}标签来重新设定。
如

<Style x:Key="btnStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootElement">
                            <Rectangle Width="100" Height="40" RadiusX="25" RadiusY="25" Fill="AliceBlue">
                            Rectangle>
                            <TextBlock Text="Hello World" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        Grid>
                    ControlTemplate>
                Setter.Value>
            Setter>
        Style>


        <Style x:Key="btnTemplateStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootElement">
                            <Rectangle Width="100" Height="40" RadiusX="25" RadiusY="25" Fill="AliceBlue">
                            Rectangle>
                            <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        Grid>
                    ControlTemplate>
                Setter.Value>
            Setter>
        Style>

控件引用

<Button Style="{StaticResource btnStyle}" Width="100" Height="100"  Content="Hello" >Button>
  <Button Style="{StaticResource btnTemplateStyle}" Width="100" Height="100"  Content="World" >Button>

效果

第一个模板中的TextBlock的Text属性没有引用{TemplateBinding ControlProperty}标签，因此在第一个Button中显示的内容仍然是模板中定义的。
第二个模板中的TextBlock的Text属性引用了此标签，因此在第二个Button中显示的内容是Button自己定义的。