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