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自己定义的。