Silverlight 使用控件模板定制控件

前面的示例中我们只是定制了控件的内容，Silverlight允许我们完全对控件进行定制，而不仅仅是内容。下面的示例中我们定制一个渐变色的圆角矩形按钮。首先我们在App.xaml中创建一个RoundButton样式，改写按钮的Template属性：

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="使用控件模板定制控件.App" > <Application.Resources> <Style x:Key="RoundButton" <a href="/tag/targettype/" target="_blank" class="keywords">targettype</a>="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate <a href="/tag/targettype/" target="_blank" class="keywords">targettype</a>="Button"> <Grid x:Name="RootElement"> <Rectangle Width="200" Height="80" RadiusX="15" RadiusY="15"> <Rectangle.Fill> <LinearGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a> StartPoint="0,0"> <GradientStop Color="#FFFFFF" Offset="0.0"/> <GradientStop Color="#EC04FA" Offset="1.0"/> </LinearGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a>> </Rectangle.Fill> <Rectangle.<a href="/tag/stroke/" target="_blank" class="keywords">stroke</a>> <LinearGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a> EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FCB2FD" Offset="0" /> <GradientStop Color="#FFFFFF" Offset="1" /> </LinearGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a>> </Rectangle.<a href="/tag/stroke/" target="_blank" class="keywords">stroke</a>> </Rectangle> <TextBlock Text="提交" FontSize="26" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Application.Resources> </Application>

 

现在在XAML中使用该样式：

<UserControl x:Class="使用控件模板定制控件.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ig<a href="/tag/nor/" target="_blank" class="keywords">nor</a>able="d" d:DesignHeight="300" d:DesignWidth="400"> <Canvas Background="#46461F"> <Button x:Name="button1" Style="{StaticResource RoundButton}" mce_Style="{StaticResource RoundButton}" Canvas.Top="80" Canvas.Left="150"/> </Canvas> </UserControl>

运行结果：

 

创建模板

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

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="创建模板.App" > <Application.Resources> <Style x:Key="RoundButton" <a href="/tag/targettype/" target="_blank" class="keywords">targettype</a>="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate <a href="/tag/targettype/" target="_blank" class="keywords">targettype</a>="Button"> <Grid x:Name="RootElememt"> <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" RadiusX="15" RadiusY="15"> <Rectangle.Fill> <LinearGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a> StartPoint="0,0"> <GradientStop Color="#EC04FA" Offset="0"/> <GradientStop Color="#FFFFFF" Offset="1"/> </LinearGradientB<a href="/tag/rush/" target="_blank" class="keywords">rush</a>> </Rectangle.<a href="/tag/stroke/" target="_blank" class="keywords">stroke</a>> </Rectangle> <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Application.Resources> </Application>

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

<UserControl x:Class="创建模板.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ig<a href="/tag/nor/" target="_blank" class="keywords">nor</a>able="d" d:DesignHeight="300" d:DesignWidth="400"> <Canvas Background="#46461F"> <Button x:Name="button1" Style="{StaticResource RoundButton}" mce_Style="{StaticResource RoundButton}" Canvas.Top="80" Canvas.Left="50" Content="提交" FontSize="26" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" Width="200" Height="60"/> <Button x:Name="button2" Style="{StaticResource RoundButton}" mce_Style="{StaticResource RoundButton}" Canvas.Top="80" Canvas.Left="260" Content="取 消" FontSize="26" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="White" Width="100" Height="100"/> </Canvas> </UserControl>

运行效果如下：