为 Silverlight 2 创建自定义控件

核心提示： 然后打开 Page.xaml 并修改控件声明，使修改后的内容如下所示：<custom:SimpleButton />在浏览器中打开此测试页面，为 Silverlight 2 创建自定义控件(7)，该控件的外观应与以前完全相同，但是这次，图 7 显示了 Generic.xaml

然后打开 Page.xaml 并修改控件声明，使修改后的内容如下所示：

<custom:SimpleButton />

在浏览器中打开此测试页面，该控件的外观应与以前完全相同。但是这次，获取此外观将比较简单。

步骤 5：添加模板绑定

SimpleButton 现存的一个问题是，控件模板不支持分配给该控件的属性值。也就是说，如果按如下所示声明该控件，该控件仍然宽 200，高 100，因为这些值已硬编码到控件模板中。

<custom:SimpleButton Width="250" Height="150" />

从控件开发人员的角度而言，Silverlight 2 最重要的功能之一就是模板绑定。模板绑定允许分配给控件的属性值向下传递到控件模板，并且是使用 {TemplateBinding} 标记扩展在 XAML 中声明的。请不要使用类似下面的硬编码值定义构成 SimpleButton 主体的 Rectangle 的 Width 和 Height 属性：

Width="200" Height="100"

您应按如下方式定义上述属性：

Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"

现在，分配给控件的宽度和高度即是分配给 Rectangle 的宽度和高度。

图 7 显示了 Generic.xaml 修改后的版本，它将默认值分配给从基类继承来的 Width、Height 和 Background 属性，并使用模板绑定在控件模板中引用这些属性值。

图 7 修改后的 Generic.xaml

<ResourceDictionary
　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
　xmlns:custom="clr-namespace:SimpleButtonDemo;assembly=SimpleButtonDemo">
　<Style TargetType="custom:SimpleButton">
　　<Setter Property="Width" Value="200" />
　　<Setter Property="Height" Value="100" />
　　<Setter Property="Background" Value="Lavender" />
　　<Setter Property="Template">
　　　<Setter.Value>
　　　　<ControlTemplate TargetType="custom:SimpleButton">
　　　　　<Grid x:Name="RootElement">
　　　　　　<Rectangle x:Name="BodyElement"
　　　　　　　Width="{TemplateBinding Width}"
　　　　　　　Height="{TemplateBinding Height}"
　　　　　　　Fill="{TemplateBinding Background}"
　　　　　　　Stroke="Purple" RadiusX="16" RadiusY="16" />
　　　　　　<TextBlock Text="Click Me"
　　　　　　　HorizontalAlignment="Center"
　　　　　　　VerticalAlignment="Center" />
　　　　　</Grid>
　　　　</ControlTemplate>
　　　</Setter.Value>
　　</Setter>
　</Style>
</ResourceDictionary>